优化弹幕选集列表
This commit is contained in:
mtvpls
+76
-50
@@ -2749,72 +2749,98 @@ function PlayPageClient() {
|
|||||||
|
|
||||||
{/* 列表区域 */}
|
{/* 列表区域 */}
|
||||||
<div className='overflow-y-auto max-h-[60vh] p-4'>
|
<div className='overflow-y-auto max-h-[60vh] p-4'>
|
||||||
<div className='space-y-3'>
|
<div className='space-y-4'>
|
||||||
{danmakuMatches.map((anime) => (
|
{danmakuMatches.map((anime, index) => (
|
||||||
<button
|
<button
|
||||||
key={anime.animeId}
|
key={anime.animeId}
|
||||||
onClick={() => handleDanmakuSourceSelect(anime)}
|
onClick={() => handleDanmakuSourceSelect(anime)}
|
||||||
className='w-full flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700/50
|
className='w-full flex flex-col p-5 bg-gray-50 dark:bg-gray-700/50
|
||||||
hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-all
|
hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-all
|
||||||
duration-200 text-left group border-2 border-transparent
|
duration-200 text-left group border-2 border-transparent
|
||||||
hover:border-green-500 hover:shadow-lg'
|
hover:border-green-500 hover:shadow-lg'
|
||||||
>
|
>
|
||||||
{/* 封面 */}
|
{/* 顶部：序号和标题 */}
|
||||||
{anime.imageUrl && (
|
<div className='flex items-start gap-3 mb-3'>
|
||||||
<div className='flex-shrink-0 w-16 h-24 rounded-lg overflow-hidden shadow-md
|
{/* 序号 */}
|
||||||
group-hover:shadow-xl transition-shadow duration-200'>
|
<div className='flex-shrink-0 w-8 h-8 rounded-full bg-green-500 text-white
|
||||||
<img
|
flex items-center justify-center font-bold text-sm
|
||||||
src={anime.imageUrl}
|
group-hover:bg-green-600 transition-colors duration-200'>
|
||||||
alt={anime.animeTitle}
|
{index + 1}
|
||||||
className='w-full h-full object-cover'
|
|
||||||
onError={(e) => {
|
|
||||||
e.currentTarget.style.display = 'none';
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 信息 */}
|
{/* 标题 */}
|
||||||
<div className='flex-1 min-w-0'>
|
<h4 className='flex-1 text-lg font-bold text-gray-900 dark:text-white
|
||||||
<h4 className='text-base font-bold text-gray-900 dark:text-white
|
|
||||||
group-hover:text-green-600 dark:group-hover:text-green-400
|
group-hover:text-green-600 dark:group-hover:text-green-400
|
||||||
transition-colors duration-200 line-clamp-2'>
|
transition-colors duration-200 leading-tight'>
|
||||||
{anime.animeTitle}
|
{anime.animeTitle}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<div className='flex flex-wrap gap-2 mt-2'>
|
{/* 选择图标 */}
|
||||||
{anime.typeDescription && (
|
<div className='flex-shrink-0'>
|
||||||
<span className='inline-flex items-center px-2 py-1 rounded-md
|
<svg className='w-6 h-6 text-gray-400 group-hover:text-green-500
|
||||||
bg-blue-100 dark:bg-blue-900/30 text-blue-700
|
transition-colors duration-200'
|
||||||
dark:text-blue-300 text-xs font-medium'>
|
fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||||||
{anime.typeDescription}
|
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2}
|
||||||
</span>
|
d='M9 5l7 7-7 7' />
|
||||||
)}
|
</svg>
|
||||||
{anime.episodeCount && (
|
|
||||||
<span className='inline-flex items-center px-2 py-1 rounded-md
|
|
||||||
bg-purple-100 dark:bg-purple-900/30 text-purple-700
|
|
||||||
dark:text-purple-300 text-xs font-medium'>
|
|
||||||
{anime.episodeCount} 集
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{anime.startDate && (
|
|
||||||
<span className='inline-flex items-center px-2 py-1 rounded-md
|
|
||||||
bg-gray-100 dark:bg-gray-600 text-gray-700
|
|
||||||
dark:text-gray-300 text-xs font-medium'>
|
|
||||||
{anime.startDate}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 选择图标 */}
|
{/* 主体内容 */}
|
||||||
<div className='flex-shrink-0 self-center'>
|
<div className='flex gap-4'>
|
||||||
<svg className='w-6 h-6 text-gray-400 group-hover:text-green-500
|
{/* 封面 */}
|
||||||
transition-colors duration-200'
|
{anime.imageUrl && (
|
||||||
fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
<div className='flex-shrink-0 w-20 h-28 rounded-lg overflow-hidden shadow-md
|
||||||
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2}
|
group-hover:shadow-xl transition-shadow duration-200'>
|
||||||
d='M9 5l7 7-7 7' />
|
<img
|
||||||
</svg>
|
src={anime.imageUrl}
|
||||||
|
alt={anime.animeTitle}
|
||||||
|
className='w-full h-full object-cover'
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 详细信息 */}
|
||||||
|
<div className='flex-1 space-y-2'>
|
||||||
|
{/* 基本信息标签 */}
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
|
{anime.typeDescription && (
|
||||||
|
<span className='inline-flex items-center px-2.5 py-1 rounded-md
|
||||||
|
bg-blue-100 dark:bg-blue-900/30 text-blue-700
|
||||||
|
dark:text-blue-300 text-sm font-medium'>
|
||||||
|
📺 {anime.typeDescription}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{anime.episodeCount && (
|
||||||
|
<span className='inline-flex items-center px-2.5 py-1 rounded-md
|
||||||
|
bg-purple-100 dark:bg-purple-900/30 text-purple-700
|
||||||
|
dark:text-purple-300 text-sm font-medium'>
|
||||||
|
🎬 {anime.episodeCount} 集
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{anime.startDate && (
|
||||||
|
<span className='inline-flex items-center px-2.5 py-1 rounded-md
|
||||||
|
bg-gray-100 dark:bg-gray-600 text-gray-700
|
||||||
|
dark:text-gray-300 text-sm font-medium'>
|
||||||
|
📅 {anime.startDate}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 动漫ID */}
|
||||||
|
<div className='text-xs text-gray-500 dark:text-gray-400'>
|
||||||
|
弹幕库 ID: {anime.animeId}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 提示信息 */}
|
||||||
|
<div className='text-sm text-gray-600 dark:text-gray-300 pt-1
|
||||||
|
opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
|
||||||
|
点击选择此弹幕源
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -223,25 +223,71 @@ export default function DanmakuPanel({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 剧集网格 */}
|
{/* 剧集列表 */}
|
||||||
{!isLoadingEpisodes && episodes.length > 0 && (
|
{!isLoadingEpisodes && episodes.length > 0 && (
|
||||||
<div className='grid grid-cols-5 gap-2 pb-4'>
|
<div className='space-y-2 pb-4'>
|
||||||
{episodes.map((episode) => {
|
{episodes.map((episode, index) => {
|
||||||
const isSelected = isEpisodeSelected(episode.episodeId);
|
const isSelected = isEpisodeSelected(episode.episodeId);
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={episode.episodeId}
|
key={episode.episodeId}
|
||||||
onClick={() => handleEpisodeSelect(episode)}
|
onClick={() => handleEpisodeSelect(episode)}
|
||||||
className={`rounded-lg px-2 py-2 text-xs font-medium transition-colors
|
className={`w-full flex items-center gap-3 p-3 rounded-lg text-left
|
||||||
|
transition-all duration-200 group border
|
||||||
${
|
${
|
||||||
isSelected
|
isSelected
|
||||||
? 'bg-green-500 text-white'
|
? 'bg-green-500 text-white border-green-600 shadow-md'
|
||||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 ' +
|
: 'bg-gray-100 hover:bg-gray-200 border-gray-200 ' +
|
||||||
'dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
|
'dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-700 ' +
|
||||||
|
'hover:border-green-500/50 hover:shadow-sm'
|
||||||
}`}
|
}`}
|
||||||
title={episode.episodeTitle}
|
|
||||||
>
|
>
|
||||||
{episode.episodeTitle}
|
{/* 序号徽章 */}
|
||||||
|
<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'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{index + 1}
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 未选中时的箭头 */}
|
||||||
|
{!isSelected && (
|
||||||
|
<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>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
Reference in New Issue
Block a user