feat: 更新 EpisodeSelector 组件,调整每页显示集数和样式以优化用户体验
This commit is contained in:
@@ -1640,6 +1640,7 @@ function PlayPageClient() {
|
|||||||
>
|
>
|
||||||
<EpisodeSelector
|
<EpisodeSelector
|
||||||
totalEpisodes={totalEpisodes}
|
totalEpisodes={totalEpisodes}
|
||||||
|
episodesPerPage={50}
|
||||||
value={currentEpisodeIndex + 1}
|
value={currentEpisodeIndex + 1}
|
||||||
onChange={handleEpisodeChange}
|
onChange={handleEpisodeChange}
|
||||||
onSourceChange={handleSourceChange}
|
onSourceChange={handleSourceChange}
|
||||||
|
|||||||
@@ -321,7 +321,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 集数网格 */}
|
{/* 集数网格 */}
|
||||||
<div className='grid grid-cols-[repeat(auto-fill,minmax(48px,1fr))] justify-center gap-2 overflow-y-auto pb-4'>
|
<div className='grid grid-cols-8 sm:grid-cols-10 lg:grid-cols-10 justify-center gap-1.5 overflow-y-auto pb-4'>
|
||||||
{(() => {
|
{(() => {
|
||||||
const len = currentEnd - currentStart + 1;
|
const len = currentEnd - currentStart + 1;
|
||||||
const episodes = Array.from({ length: len }, (_, i) =>
|
const episodes = Array.from({ length: len }, (_, i) =>
|
||||||
@@ -338,10 +338,10 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleEpisodeClick(episodeNumber);
|
handleEpisodeClick(episodeNumber);
|
||||||
}}
|
}}
|
||||||
className={`w-full h-10 flex items-center justify-center text-sm font-medium rounded-md transition-all duration-200 cursor-pointer
|
className={`w-full h-8 flex items-center justify-center text-xs font-medium rounded transition-all duration-200 cursor-pointer
|
||||||
${
|
${
|
||||||
isActive
|
isActive
|
||||||
? 'bg-green-500 text-white shadow-lg shadow-green-500/25 dark:bg-green-600'
|
? 'bg-green-500 text-white shadow-md shadow-green-500/25 dark:bg-green-600'
|
||||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:scale-105 dark:bg-white/10 dark:text-gray-300 dark:hover:bg-white/20'
|
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:scale-105 dark:bg-white/10 dark:text-gray-300 dark:hover:bg-white/20'
|
||||||
}`.trim()}
|
}`.trim()}
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
Reference in New Issue
Block a user