671 lines
26 KiB
TypeScript
671 lines
26 KiB
TypeScript
'use client';
|
|
|
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
|
|
import { getEpisodes, searchAnime } from '@/lib/danmaku/api';
|
|
import type {
|
|
DanmakuAnime,
|
|
DanmakuComment,
|
|
DanmakuEpisode,
|
|
DanmakuSelection,
|
|
} from '@/lib/danmaku/types';
|
|
|
|
interface DanmakuPanelProps {
|
|
videoTitle: string;
|
|
currentEpisodeIndex: number;
|
|
onDanmakuSelect: (selection: DanmakuSelection) => void;
|
|
currentSelection: DanmakuSelection | null;
|
|
onUploadDanmaku?: (comments: DanmakuComment[]) => void;
|
|
}
|
|
|
|
export default function DanmakuPanel({
|
|
videoTitle,
|
|
currentEpisodeIndex,
|
|
onDanmakuSelect,
|
|
currentSelection,
|
|
onUploadDanmaku,
|
|
}: DanmakuPanelProps) {
|
|
const [searchKeyword, setSearchKeyword] = useState('');
|
|
const [searchResults, setSearchResults] = useState<DanmakuAnime[]>([]);
|
|
const [selectedAnime, setSelectedAnime] = useState<DanmakuAnime | null>(null);
|
|
const [episodes, setEpisodes] = useState<DanmakuEpisode[]>([]);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const [isLoadingEpisodes, setIsLoadingEpisodes] = useState(false);
|
|
const [searchError, setSearchError] = useState<string | null>(null);
|
|
const initializedRef = useRef(false); // 标记是否已初始化过
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const episodeGroupContainerRef = useRef<HTMLDivElement>(null);
|
|
const episodeGroupButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);
|
|
const [episodeGroupIndex, setEpisodeGroupIndex] = useState(0);
|
|
const [episodeDescending, setEpisodeDescending] = useState(false);
|
|
const [episodeViewMode, setEpisodeViewMode] = useState<'list' | 'grid'>('list');
|
|
const [isEpisodeGroupHovered, setIsEpisodeGroupHovered] = useState(false);
|
|
const episodesPerGroup = 50;
|
|
|
|
// 搜索弹幕
|
|
const handleSearch = useCallback(async (keyword: string) => {
|
|
if (!keyword.trim()) {
|
|
setSearchError('请输入搜索关键词');
|
|
return;
|
|
}
|
|
|
|
setIsSearching(true);
|
|
setSearchError(null);
|
|
|
|
try {
|
|
const response = await searchAnime(keyword.trim());
|
|
|
|
if (response.success && response.animes.length > 0) {
|
|
setSearchResults(response.animes);
|
|
setSearchError(null);
|
|
} else {
|
|
setSearchResults([]);
|
|
setSearchError(
|
|
response.errorMessage || '未找到匹配的剧集，请尝试其他关键词'
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error('搜索失败:', error);
|
|
setSearchError('搜索失败，请检查弹幕 API 服务是否正常运行');
|
|
setSearchResults([]);
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
}, []);
|
|
|
|
// 选择动漫，加载剧集列表
|
|
const handleAnimeSelect = useCallback(async (anime: DanmakuAnime) => {
|
|
setSelectedAnime(anime);
|
|
setIsLoadingEpisodes(true);
|
|
|
|
try {
|
|
const response = await getEpisodes(anime.animeId);
|
|
|
|
if (response.success && response.bangumi.episodes.length > 0) {
|
|
setEpisodes(response.bangumi.episodes);
|
|
} else {
|
|
setEpisodes([]);
|
|
setSearchError('该剧集暂无弹幕信息');
|
|
}
|
|
} catch (error) {
|
|
console.error('获取剧集失败:', error);
|
|
setEpisodes([]);
|
|
setSearchError('获取剧集失败');
|
|
} finally {
|
|
setIsLoadingEpisodes(false);
|
|
}
|
|
}, []);
|
|
|
|
// 选择剧集
|
|
const handleEpisodeSelect = useCallback(
|
|
(episode: DanmakuEpisode) => {
|
|
if (!selectedAnime) return;
|
|
|
|
const selection: DanmakuSelection = {
|
|
animeId: selectedAnime.animeId,
|
|
episodeId: episode.episodeId,
|
|
animeTitle: selectedAnime.animeTitle,
|
|
episodeTitle: episode.episodeTitle,
|
|
searchKeyword: searchKeyword.trim() || undefined, // 使用当前搜索框的关键词
|
|
};
|
|
|
|
onDanmakuSelect(selection);
|
|
},
|
|
[selectedAnime, searchKeyword, onDanmakuSelect]
|
|
);
|
|
|
|
// 回到搜索结果
|
|
const handleBackToResults = useCallback(() => {
|
|
setSelectedAnime(null);
|
|
setEpisodes([]);
|
|
setEpisodeGroupIndex(0);
|
|
}, []);
|
|
|
|
// 判断当前剧集是否已选中
|
|
const isEpisodeSelected = useCallback(
|
|
(episodeId: number) => {
|
|
return currentSelection?.episodeId === episodeId;
|
|
},
|
|
[currentSelection]
|
|
);
|
|
|
|
// 处理文件上传
|
|
const handleFileUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
if (!file.name.endsWith('.xml')) {
|
|
setSearchError('请上传XML格式的弹幕文件');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const text = await file.text();
|
|
const { parseXmlDanmaku } = await import('@/lib/danmaku/xml-parser');
|
|
const comments = parseXmlDanmaku(text);
|
|
|
|
if (comments.length === 0) {
|
|
setSearchError('弹幕文件解析失败或文件为空');
|
|
return;
|
|
}
|
|
|
|
onUploadDanmaku?.(comments);
|
|
setSearchError(null);
|
|
} catch (error) {
|
|
console.error('上传弹幕失败:', error);
|
|
setSearchError('弹幕文件解析失败');
|
|
} finally {
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
}
|
|
}
|
|
}, [onUploadDanmaku]);
|
|
|
|
// 当视频标题首次加载时，初始化搜索关键词（仅执行一次）
|
|
useEffect(() => {
|
|
if (videoTitle && !initializedRef.current) {
|
|
setSearchKeyword(videoTitle);
|
|
initializedRef.current = true; // 标记已初始化，防止后续自动填充
|
|
}
|
|
}, [videoTitle]);
|
|
|
|
useEffect(() => {
|
|
if (episodes.length > 0) {
|
|
setEpisodeGroupIndex(Math.floor(currentEpisodeIndex / episodesPerGroup));
|
|
} else {
|
|
setEpisodeGroupIndex(0);
|
|
}
|
|
}, [episodes, currentEpisodeIndex]);
|
|
|
|
const episodeGroupCount = Math.ceil(episodes.length / episodesPerGroup);
|
|
|
|
const episodeGroups = useMemo(() => {
|
|
return Array.from({ length: episodeGroupCount }, (_, idx) => {
|
|
const start = idx * episodesPerGroup + 1;
|
|
const end = Math.min((idx + 1) * episodesPerGroup, episodes.length);
|
|
return `${start}-${end}`;
|
|
});
|
|
}, [episodeGroupCount, episodes.length]);
|
|
|
|
const displayEpisodeGroupIndex = useMemo(() => {
|
|
if (episodeDescending) {
|
|
return episodeGroupCount - 1 - episodeGroupIndex;
|
|
}
|
|
return episodeGroupIndex;
|
|
}, [episodeDescending, episodeGroupCount, episodeGroupIndex]);
|
|
|
|
const currentGroupEpisodes = useMemo(() => {
|
|
if (episodes.length === 0) return [];
|
|
|
|
const start = episodeGroupIndex * episodesPerGroup;
|
|
const end = Math.min(start + episodesPerGroup, episodes.length);
|
|
const groupEpisodes = episodes.slice(start, end);
|
|
const withEpisodeNumber = groupEpisodes.map((episode, index) => ({
|
|
...episode,
|
|
episodeNumber: start + index + 1,
|
|
}));
|
|
|
|
return episodeDescending ? [...withEpisodeNumber].reverse() : withEpisodeNumber;
|
|
}, [episodes, episodeDescending, episodeGroupIndex]);
|
|
|
|
const getEpisodeDisplayLabel = useCallback((episodeTitle: string, episodeNumber: number) => {
|
|
if (!episodeTitle) {
|
|
return String(episodeNumber);
|
|
}
|
|
|
|
if (episodeTitle.match(/^OVA\s+\d+/i)) {
|
|
return episodeTitle;
|
|
}
|
|
|
|
const sxxexxMatch = episodeTitle.match(/[Ss](\d+)[Ee](\d{1,4}(?:\.\d+)?)/);
|
|
if (sxxexxMatch) {
|
|
const season = sxxexxMatch[1].padStart(2, '0');
|
|
const episode = sxxexxMatch[2];
|
|
return `S${season}E${episode}`;
|
|
}
|
|
|
|
const match = episodeTitle.match(/(?:第)?(\d+(?:\.\d+)?)(?:集|话)/);
|
|
if (match) {
|
|
return match[1];
|
|
}
|
|
|
|
return String(episodeNumber);
|
|
}, []);
|
|
|
|
const preventPageScroll = useCallback((e: WheelEvent) => {
|
|
if (isEpisodeGroupHovered) {
|
|
e.preventDefault();
|
|
}
|
|
}, [isEpisodeGroupHovered]);
|
|
|
|
const handleEpisodeGroupWheel = useCallback((e: WheelEvent) => {
|
|
if (!isEpisodeGroupHovered || !episodeGroupContainerRef.current) {
|
|
return;
|
|
}
|
|
|
|
const container = episodeGroupContainerRef.current;
|
|
if (container.scrollWidth <= container.clientWidth) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
container.scrollBy({
|
|
left: e.deltaY * 2,
|
|
behavior: 'smooth',
|
|
});
|
|
}, [isEpisodeGroupHovered]);
|
|
|
|
useEffect(() => {
|
|
if (isEpisodeGroupHovered) {
|
|
document.addEventListener('wheel', preventPageScroll, { passive: false });
|
|
document.addEventListener('wheel', handleEpisodeGroupWheel, { passive: false });
|
|
} else {
|
|
document.removeEventListener('wheel', preventPageScroll);
|
|
document.removeEventListener('wheel', handleEpisodeGroupWheel);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('wheel', preventPageScroll);
|
|
document.removeEventListener('wheel', handleEpisodeGroupWheel);
|
|
};
|
|
}, [handleEpisodeGroupWheel, isEpisodeGroupHovered, preventPageScroll]);
|
|
|
|
useEffect(() => {
|
|
const btn = episodeGroupButtonRefs.current[displayEpisodeGroupIndex];
|
|
const container = episodeGroupContainerRef.current;
|
|
if (!btn || !container) {
|
|
return;
|
|
}
|
|
|
|
const containerRect = container.getBoundingClientRect();
|
|
const btnRect = btn.getBoundingClientRect();
|
|
const btnLeft = btnRect.left - containerRect.left + container.scrollLeft;
|
|
const targetScrollLeft = btnLeft - (containerRect.width - btnRect.width) / 2;
|
|
|
|
container.scrollTo({
|
|
left: targetScrollLeft,
|
|
behavior: 'smooth',
|
|
});
|
|
}, [displayEpisodeGroupIndex]);
|
|
|
|
return (
|
|
<div className='flex h-full flex-col overflow-hidden'>
|
|
{/* 搜索区域 - 固定在顶部 */}
|
|
<div className='mb-4 flex-shrink-0'>
|
|
<div className='flex flex-wrap gap-2'>
|
|
<input
|
|
type='text'
|
|
value={searchKeyword}
|
|
onChange={(e) => setSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSearch(searchKeyword);
|
|
}
|
|
}}
|
|
placeholder='输入剧集名称搜索弹幕...'
|
|
autoComplete='off'
|
|
autoCorrect='off'
|
|
autoCapitalize='off'
|
|
spellCheck='false'
|
|
data-form-type='other'
|
|
data-lpignore='true'
|
|
className='flex-1 min-w-[220px] rounded-lg border border-gray-300 px-3 py-2 text-sm
|
|
transition-colors focus:border-green-500 focus:outline-none
|
|
focus:ring-2 focus:ring-green-500/20
|
|
dark:border-gray-600 dark:bg-gray-800 dark:text-white
|
|
sm:px-4'
|
|
disabled={isSearching}
|
|
/>
|
|
<button
|
|
onClick={() => handleSearch(searchKeyword)}
|
|
disabled={isSearching}
|
|
className='flex flex-shrink-0 items-center justify-center gap-2 rounded-lg bg-green-500 px-3 py-2
|
|
text-sm font-medium text-white transition-colors
|
|
hover:bg-green-600 disabled:cursor-not-allowed
|
|
disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700
|
|
lg:px-4 min-w-[44px]'
|
|
>
|
|
{isSearching ? (
|
|
<div className='h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
|
|
) : (
|
|
<MagnifyingGlassIcon className='h-4 w-4' />
|
|
)}
|
|
<span className='hidden lg:inline'>
|
|
{isSearching ? '搜索中...' : '搜索'}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* 错误提示 */}
|
|
{searchError && (
|
|
<div
|
|
className='mt-3 rounded-lg border border-red-500/30 bg-red-500/10
|
|
px-3 py-2 text-sm text-red-600 dark:text-red-400'
|
|
>
|
|
{searchError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 可滚动内容区域 */}
|
|
<div className='flex-1 overflow-y-auto min-h-0'>
|
|
{/* 当前选择的弹幕信息 */}
|
|
{currentSelection && (
|
|
<div
|
|
className='mb-4 rounded-lg border border-green-500/30 bg-green-500/10
|
|
px-3 py-2 text-sm'
|
|
>
|
|
<p className='font-semibold text-green-600 dark:text-green-400'>
|
|
当前弹幕
|
|
</p>
|
|
<p className='mt-1 text-gray-700 dark:text-gray-300'>
|
|
{currentSelection.animeTitle}
|
|
</p>
|
|
<p className='text-xs text-gray-600 dark:text-gray-400'>
|
|
{currentSelection.episodeTitle}
|
|
</p>
|
|
{currentSelection.danmakuCount !== undefined && (
|
|
<p className='mt-1 text-xs text-gray-500 dark:text-gray-500'>
|
|
弹幕数量: {currentSelection.danmakuCount}
|
|
{currentSelection.danmakuOriginalCount && ` (原始 ${currentSelection.danmakuOriginalCount} 条)`}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 内容区域 */}
|
|
<div>
|
|
{/* 显示剧集列表 */}
|
|
{selectedAnime && (
|
|
<div className='space-y-2'>
|
|
{/* 返回按钮 */}
|
|
<button
|
|
onClick={handleBackToResults}
|
|
className='mb-2 text-sm text-green-600 hover:underline
|
|
dark:text-green-400'
|
|
>
|
|
← 返回搜索结果
|
|
</button>
|
|
|
|
{/* 动漫标题 */}
|
|
<h3 className='mb-3 text-base font-semibold text-gray-800 dark:text-white'>
|
|
{selectedAnime.animeTitle}
|
|
</h3>
|
|
|
|
{/* 加载中 */}
|
|
{isLoadingEpisodes && (
|
|
<div className='flex items-center justify-center py-8'>
|
|
<div
|
|
className='h-8 w-8 animate-spin rounded-full border-4
|
|
border-gray-300 border-t-green-500'
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 剧集列表 */}
|
|
{!isLoadingEpisodes && episodes.length > 0 && (
|
|
<div className='pb-4'>
|
|
<div className='mb-4 border-b border-gray-300 dark:border-gray-700'>
|
|
<div
|
|
ref={episodeGroupContainerRef}
|
|
className='flex items-center gap-4 overflow-x-auto pb-3'
|
|
onMouseEnter={() => setIsEpisodeGroupHovered(true)}
|
|
onMouseLeave={() => setIsEpisodeGroupHovered(false)}
|
|
>
|
|
{episodeGroups.map((label, idx) => {
|
|
const isActive = idx === displayEpisodeGroupIndex;
|
|
return (
|
|
<button
|
|
key={label}
|
|
ref={(el) => {
|
|
episodeGroupButtonRefs.current[idx] = el;
|
|
}}
|
|
onClick={() =>
|
|
setEpisodeGroupIndex(
|
|
episodeDescending ? episodeGroupCount - 1 - idx : idx
|
|
)
|
|
}
|
|
className={`relative w-20 py-2 text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 text-center ${
|
|
isActive
|
|
? 'text-green-500 dark:text-green-400'
|
|
: 'text-gray-700 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400'
|
|
}`}
|
|
>
|
|
{label}
|
|
{isActive && (
|
|
<div className='absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 dark:bg-green-400' />
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
<button
|
|
onClick={() => setEpisodeDescending((prev) => !prev)}
|
|
className='flex-shrink-0 rounded-md p-2 text-gray-700 hover:bg-gray-100 hover:text-green-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-400'
|
|
title={episodeDescending ? '切换正序' : '切换倒序'}
|
|
>
|
|
<svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
|
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4' />
|
|
</svg>
|
|
</button>
|
|
<div className='ml-auto flex items-center gap-1 rounded-md bg-gray-100 p-1 dark:bg-gray-800'>
|
|
<button
|
|
onClick={() => setEpisodeViewMode('list')}
|
|
title='列表视图'
|
|
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
|
episodeViewMode === 'list'
|
|
? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
|
|
: 'text-gray-600 dark:text-gray-400'
|
|
}`}
|
|
>
|
|
<svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
|
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01' />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={() => setEpisodeViewMode('grid')}
|
|
title='格子视图'
|
|
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
|
episodeViewMode === 'grid'
|
|
? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
|
|
: 'text-gray-600 dark:text-gray-400'
|
|
}`}
|
|
>
|
|
<svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
|
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z' />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{episodeViewMode === 'grid' ? (
|
|
<div className='grid grid-cols-3 gap-2 sm:grid-cols-4'>
|
|
{currentGroupEpisodes.map((episode) => {
|
|
const isSelected = isEpisodeSelected(episode.episodeId);
|
|
return (
|
|
<button
|
|
key={episode.episodeId}
|
|
onClick={() => handleEpisodeSelect(episode)}
|
|
className={`rounded-lg px-3 py-2 text-sm font-medium transition-all ${
|
|
isSelected
|
|
? 'bg-green-500 text-white shadow-md'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
|
|
}`}
|
|
title={episode.episodeTitle}
|
|
>
|
|
<div className='truncate'>
|
|
{getEpisodeDisplayLabel(episode.episodeTitle, episode.episodeNumber)}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className='space-y-2'>
|
|
{currentGroupEpisodes.map((episode) => {
|
|
const isSelected = isEpisodeSelected(episode.episodeId);
|
|
return (
|
|
<button
|
|
key={episode.episodeId}
|
|
onClick={() => handleEpisodeSelect(episode)}
|
|
className={`w-full flex items-center gap-3 p-3 rounded-lg text-left transition-all duration-200 group border ${
|
|
isSelected
|
|
? 'bg-green-500 text-white border-green-600 shadow-md'
|
|
: 'bg-gray-100 hover:bg-gray-200 border-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 hover:border-green-500/50 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm ${
|
|
isSelected
|
|
? 'bg-white/20 text-white'
|
|
: 'bg-green-500 text-white group-hover:bg-green-600'
|
|
}`}
|
|
>
|
|
{episode.episodeNumber}
|
|
</div>
|
|
|
|
<div className='flex-1 min-w-0'>
|
|
<div className='font-semibold text-sm mb-1 truncate'>
|
|
{episode.episodeTitle}
|
|
</div>
|
|
<div
|
|
className={`flex items-center gap-2 text-xs ${
|
|
isSelected ? 'text-white/80' : 'text-gray-500 dark:text-gray-400'
|
|
}`}
|
|
>
|
|
<span className='flex items-center gap-1'>
|
|
🆔 ID: {episode.episodeId}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{isSelected ? (
|
|
<div className='flex-shrink-0'>
|
|
<svg className='w-6 h-6 text-white' fill='currentColor' viewBox='0 0 20 20'>
|
|
<path fillRule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clipRule='evenodd' />
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className='flex-shrink-0'>
|
|
<svg className='w-5 h-5 text-gray-400 group-hover:text-green-500 transition-colors' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
|
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M9 5l7 7-7 7' />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!isLoadingEpisodes && episodes.length === 0 && (
|
|
<div className='py-8 text-center text-sm text-gray-500'>
|
|
暂无剧集信息
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 显示搜索结果 */}
|
|
{!selectedAnime && searchResults.length > 0 && (
|
|
<div className='space-y-2 pb-4'>
|
|
{searchResults.map((anime) => (
|
|
<div
|
|
key={anime.animeId}
|
|
onClick={() => handleAnimeSelect(anime)}
|
|
className='flex cursor-pointer items-start gap-3 rounded-lg
|
|
bg-gray-100 p-3 transition-colors hover:bg-gray-200
|
|
dark:bg-gray-800 dark:hover:bg-gray-700'
|
|
>
|
|
{/* 封面 */}
|
|
{anime.imageUrl && (
|
|
<div className='h-16 w-12 flex-shrink-0 overflow-hidden rounded'>
|
|
<img
|
|
src={anime.imageUrl}
|
|
alt={anime.animeTitle}
|
|
className='h-full w-full object-cover'
|
|
onError={(e) => {
|
|
e.currentTarget.style.display = 'none';
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 信息 */}
|
|
<div className='min-w-0 flex-1'>
|
|
<div className='relative'>
|
|
<p className='truncate font-semibold text-gray-800 dark:text-white peer'>
|
|
{anime.animeTitle}
|
|
</p>
|
|
{/* 自定义 tooltip */}
|
|
<div
|
|
className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded-md shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all duration-200 ease-out delay-100 whitespace-nowrap pointer-events-none z-[100]'
|
|
>
|
|
{anime.animeTitle}
|
|
<div className='absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800' />
|
|
</div>
|
|
</div>
|
|
<div className='mt-1 flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400'>
|
|
<span className='rounded bg-gray-200 px-2 py-0.5 dark:bg-gray-700'>
|
|
{anime.typeDescription || anime.type}
|
|
</span>
|
|
{anime.episodeCount && (
|
|
<span>{anime.episodeCount} 集</span>
|
|
)}
|
|
{anime.startDate && <span>{anime.startDate}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 空状态 */}
|
|
{!selectedAnime && searchResults.length === 0 && !isSearching && (
|
|
<div className='flex flex-col items-center justify-center py-12 text-center'>
|
|
<MagnifyingGlassIcon className='mb-3 h-12 w-12 text-gray-400' />
|
|
<p className='text-sm text-gray-500 dark:text-gray-400'>
|
|
输入剧集名称搜索弹幕
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 上传弹幕区域 - 移动端：在滚动容器内 */}
|
|
{onUploadDanmaku && (
|
|
<div className='mt-3 border-t border-gray-200 pt-3 dark:border-gray-700 md:hidden'>
|
|
<input
|
|
ref={fileInputRef}
|
|
type='file'
|
|
accept='.xml'
|
|
onChange={handleFileUpload}
|
|
className='hidden'
|
|
/>
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className='w-full text-center text-xs text-gray-500 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 transition-colors py-2'
|
|
>
|
|
搜不到想要的弹幕？自行上传
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 上传弹幕区域 - PC端：固定在底部 */}
|
|
{onUploadDanmaku && (
|
|
<div className='mt-3 flex-shrink-0 border-t border-gray-200 pt-3 dark:border-gray-700 hidden md:block'>
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className='w-full text-center text-xs text-gray-500 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 transition-colors py-2'
|
|
>
|
|
搜不到想要的弹幕？自行上传
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|