yeyin/KatelyaTV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 调整 EpisodeSelector 组件样式，优化布局和交互体验

Browse Source
This commit is contained in:
katelya
2025-09-05 11:24:40 +08:00
parent a378bad209
commit f0d2ea9d14
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/play/page.tsx
+1 -1
View File
@@ -1632,7 +1632,7 @@ function PlayPageClient() {
{/* 选集和换源 - 在移动端始终显示，在 lg 及以上可折叠 */} {/* 选集和换源 - 在移动端始终显示，在 lg 及以上可折叠 */}
<div <div
className={`h-[300px] lg:h-full md:overflow-hidden transition-all duration-300 ease-in-out ${ className={`h-[600px] lg:h-full md:overflow-hidden transition-all duration-300 ease-in-out ${
isEpisodeSelectorCollapsed isEpisodeSelectorCollapsed
? 'md:col-span-1 lg:hidden lg:opacity-0 lg:scale-95' ? 'md:col-span-1 lg:hidden lg:opacity-0 lg:scale-95'
: 'md:col-span-1 lg:opacity-100 lg:scale-100' : 'md:col-span-1 lg:opacity-100 lg:scale-100'
src/components/EpisodeSelector.tsx
+6 -6
View File
@@ -234,7 +234,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
return ( return (
<div className='md:ml-2 px-4 py-0 h-full rounded-xl bg-black/10 dark:bg-white/5 flex flex-col border border-white/0 dark:border-white/30 overflow-hidden'> <div className='md:ml-2 px-4 py-0 h-full rounded-xl bg-black/10 dark:bg-white/5 flex flex-col border border-white/0 dark:border-white/30 overflow-hidden'>
{/* 主要的 Tab 切换 - 无缝融入设计 */} {/* 主要的 Tab 切换 - 无缝融入设计 */}
<div className='flex mb-1 -mx-6 flex-shrink-0'> <div className='flex mb-0 -mx-6 flex-shrink-0'>
{totalEpisodes > 1 && ( {totalEpisodes > 1 && (
<div <div
onClick={() => setActiveTab('episodes')} onClick={() => setActiveTab('episodes')}
@@ -267,7 +267,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
{activeTab === 'episodes' && ( {activeTab === 'episodes' && (
<> <>
{/* 分类标签 */} {/* 分类标签 */}
<div className='flex items-center gap-4 mb-4 border-b border-gray-300 dark:border-gray-700 -mx-6 px-6 flex-shrink-0'> <div className='flex items-center gap-4 mb-2 border-b border-gray-300 dark:border-gray-700 -mx-6 px-6 flex-shrink-0'>
<div className='flex-1 overflow-x-auto' ref={categoryContainerRef}> <div className='flex-1 overflow-x-auto' ref={categoryContainerRef}>
<div className='flex gap-2 min-w-max'> <div className='flex gap-2 min-w-max'>
{categories.map((label, idx) => { {categories.map((label, idx) => {
@@ -320,8 +320,8 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
</button> </button>
</div> </div>
{/* 集数网格 */} {/* 集数网格 - 优化为10行×5列布局 */}
<div className='grid grid-cols-8 sm:grid-cols-10 lg:grid-cols-10 justify-center gap-1.5 overflow-y-auto pb-4'> <div className='grid grid-cols-5 gap-3 pb-6 px-2'>
{(() => { {(() => {
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-8 flex items-center justify-center text-xs font-medium rounded transition-all duration-200 cursor-pointer className={`w-full h-10 flex items-center justify-center text-sm font-medium rounded-lg transition-all duration-200 cursor-pointer
${ ${
isActive isActive
? 'bg-green-500 text-white shadow-md shadow-green-500/25 dark:bg-green-600' ? 'bg-green-500 text-white shadow-lg 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"