首页新番放送模块移动
This commit is contained in:
mtvpls
+76
-76
@@ -286,6 +286,82 @@ function HomeClient() {
|
|||||||
</ScrollableRow>
|
</ScrollableRow>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* 每日新番放送 */}
|
||||||
|
<section className='mb-8'>
|
||||||
|
<div className='mb-4 flex items-center justify-between'>
|
||||||
|
<h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
|
||||||
|
新番放送
|
||||||
|
</h2>
|
||||||
|
<Link
|
||||||
|
href='/douban?type=anime'
|
||||||
|
className='flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
|
||||||
|
>
|
||||||
|
查看更多
|
||||||
|
<ChevronRight className='w-4 h-4 ml-1' />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<ScrollableRow>
|
||||||
|
{loading
|
||||||
|
? // 加载状态显示灰色占位数据
|
||||||
|
Array.from({ length: 8 }).map((_, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
|
||||||
|
>
|
||||||
|
<div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
|
||||||
|
<div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
|
||||||
|
</div>
|
||||||
|
<div className='mt-2 h-4 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
: // 展示当前日期的番剧
|
||||||
|
(() => {
|
||||||
|
// 获取当前日期对应的星期
|
||||||
|
const today = new Date();
|
||||||
|
const weekdays = [
|
||||||
|
'Sun',
|
||||||
|
'Mon',
|
||||||
|
'Tue',
|
||||||
|
'Wed',
|
||||||
|
'Thu',
|
||||||
|
'Fri',
|
||||||
|
'Sat',
|
||||||
|
];
|
||||||
|
const currentWeekday = weekdays[today.getDay()];
|
||||||
|
|
||||||
|
// 找到当前星期对应的番剧数据，并过滤掉没有图片的
|
||||||
|
const todayAnimes =
|
||||||
|
bangumiCalendarData
|
||||||
|
.find((item) => item.weekday.en === currentWeekday)
|
||||||
|
?.items.filter((anime) => anime.images) || [];
|
||||||
|
|
||||||
|
return todayAnimes.map((anime, index) => (
|
||||||
|
<div
|
||||||
|
key={`${anime.id}-${index}`}
|
||||||
|
className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
|
||||||
|
>
|
||||||
|
<VideoCard
|
||||||
|
from='douban'
|
||||||
|
title={anime.name_cn || anime.name}
|
||||||
|
poster={
|
||||||
|
anime.images?.large ||
|
||||||
|
anime.images?.common ||
|
||||||
|
anime.images?.medium ||
|
||||||
|
anime.images?.small ||
|
||||||
|
anime.images?.grid ||
|
||||||
|
''
|
||||||
|
}
|
||||||
|
douban_id={anime.id}
|
||||||
|
rate={anime.rating?.score?.toFixed(1) || ''}
|
||||||
|
year={anime.air_date?.split('-')?.[0] || ''}
|
||||||
|
isBangumi={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
})()}
|
||||||
|
</ScrollableRow>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* 热门剧集 */}
|
{/* 热门剧集 */}
|
||||||
<section className='mb-8'>
|
<section className='mb-8'>
|
||||||
<div className='mb-4 flex items-center justify-between'>
|
<div className='mb-4 flex items-center justify-between'>
|
||||||
@@ -371,82 +447,6 @@ function HomeClient() {
|
|||||||
))}
|
))}
|
||||||
</ScrollableRow>
|
</ScrollableRow>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* 每日新番放送 */}
|
|
||||||
<section className='mb-8'>
|
|
||||||
<div className='mb-4 flex items-center justify-between'>
|
|
||||||
<h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
|
|
||||||
新番放送
|
|
||||||
</h2>
|
|
||||||
<Link
|
|
||||||
href='/douban?type=anime'
|
|
||||||
className='flex items-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
|
|
||||||
>
|
|
||||||
查看更多
|
|
||||||
<ChevronRight className='w-4 h-4 ml-1' />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<ScrollableRow>
|
|
||||||
{loading
|
|
||||||
? // 加载状态显示灰色占位数据
|
|
||||||
Array.from({ length: 8 }).map((_, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
|
|
||||||
>
|
|
||||||
<div className='relative aspect-[2/3] w-full overflow-hidden rounded-lg bg-gray-200 animate-pulse dark:bg-gray-800'>
|
|
||||||
<div className='absolute inset-0 bg-gray-300 dark:bg-gray-700'></div>
|
|
||||||
</div>
|
|
||||||
<div className='mt-2 h-4 bg-gray-200 rounded animate-pulse dark:bg-gray-800'></div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: // 展示当前日期的番剧
|
|
||||||
(() => {
|
|
||||||
// 获取当前日期对应的星期
|
|
||||||
const today = new Date();
|
|
||||||
const weekdays = [
|
|
||||||
'Sun',
|
|
||||||
'Mon',
|
|
||||||
'Tue',
|
|
||||||
'Wed',
|
|
||||||
'Thu',
|
|
||||||
'Fri',
|
|
||||||
'Sat',
|
|
||||||
];
|
|
||||||
const currentWeekday = weekdays[today.getDay()];
|
|
||||||
|
|
||||||
// 找到当前星期对应的番剧数据，并过滤掉没有图片的
|
|
||||||
const todayAnimes =
|
|
||||||
bangumiCalendarData
|
|
||||||
.find((item) => item.weekday.en === currentWeekday)
|
|
||||||
?.items.filter((anime) => anime.images) || [];
|
|
||||||
|
|
||||||
return todayAnimes.map((anime, index) => (
|
|
||||||
<div
|
|
||||||
key={`${anime.id}-${index}`}
|
|
||||||
className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
|
|
||||||
>
|
|
||||||
<VideoCard
|
|
||||||
from='douban'
|
|
||||||
title={anime.name_cn || anime.name}
|
|
||||||
poster={
|
|
||||||
anime.images?.large ||
|
|
||||||
anime.images?.common ||
|
|
||||||
anime.images?.medium ||
|
|
||||||
anime.images?.small ||
|
|
||||||
anime.images?.grid ||
|
|
||||||
''
|
|
||||||
}
|
|
||||||
douban_id={anime.id}
|
|
||||||
rate={anime.rating?.score?.toFixed(1) || ''}
|
|
||||||
year={anime.air_date?.split('-')?.[0] || ''}
|
|
||||||
isBangumi={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
})()}
|
|
||||||
</ScrollableRow>
|
|
||||||
</section>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user