mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-22 02:24:44 +08:00
feat: remove homepage recommends
This commit is contained in:
@@ -1,21 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Film,
|
||||
MessageCircleHeart,
|
||||
MountainSnow,
|
||||
Star,
|
||||
Swords,
|
||||
Tv,
|
||||
VenetianMask,
|
||||
} from 'lucide-react';
|
||||
import { Suspense, useEffect, useState } from 'react';
|
||||
|
||||
// 客户端收藏 API
|
||||
import { getAllFavorites } from '@/lib/db.client';
|
||||
|
||||
import CapsuleSwitch from '@/components/CapsuleSwitch';
|
||||
import CollectionCard from '@/components/CollectionCard';
|
||||
import ContinueWatching from '@/components/ContinueWatching';
|
||||
import DemoCard from '@/components/DemoCard';
|
||||
import PageLayout from '@/components/PageLayout';
|
||||
@@ -33,29 +23,6 @@ interface DoubanResponse {
|
||||
list: DoubanItem[];
|
||||
}
|
||||
|
||||
// 合集数据
|
||||
const collections = [
|
||||
{
|
||||
icon: Film,
|
||||
title: '热门电影',
|
||||
href: '/douban?type=movie&tag=热门&title=热门电影',
|
||||
},
|
||||
{
|
||||
icon: Tv,
|
||||
title: '热门剧集',
|
||||
href: '/douban?type=tv&tag=热门&title=热门剧集',
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: '豆瓣 Top250',
|
||||
href: '/douban?type=movie&tag=top250&title=豆瓣 Top250',
|
||||
},
|
||||
{ icon: Swords, title: '美剧', href: '/douban?type=tv&tag=美剧' },
|
||||
{ icon: MessageCircleHeart, title: '韩剧', href: '/douban?type=tv&tag=韩剧' },
|
||||
{ icon: MountainSnow, title: '日剧', href: '/douban?type=tv&tag=日剧' },
|
||||
{ icon: VenetianMask, title: '日漫', href: '/douban?type=tv&tag=日本动画' },
|
||||
];
|
||||
|
||||
function HomeClient() {
|
||||
const [activeTab, setActiveTab] = useState('home');
|
||||
const [hotMovies, setHotMovies] = useState<DoubanItem[]>([]);
|
||||
@@ -166,27 +133,6 @@ function HomeClient() {
|
||||
) : (
|
||||
// 首页视图
|
||||
<>
|
||||
{/* 推荐 */}
|
||||
<section className='mb-8'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
推荐
|
||||
</h2>
|
||||
<ScrollableRow scrollDistance={800}>
|
||||
{collections.map((collection) => (
|
||||
<div
|
||||
key={collection.title}
|
||||
className='min-w-[150px] w-44 sm:min-w-[280px] sm:w-72'
|
||||
>
|
||||
<CollectionCard
|
||||
title={collection.title}
|
||||
icon={collection.icon}
|
||||
href={collection.href}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ScrollableRow>
|
||||
</section>
|
||||
|
||||
{/* 继续观看 */}
|
||||
<ContinueWatching />
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CollectionCardProps {
|
||||
title: string;
|
||||
icon: LucideIcon;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export default function CollectionCard({
|
||||
title,
|
||||
icon: Icon,
|
||||
href,
|
||||
}: CollectionCardProps) {
|
||||
return (
|
||||
<Link href={href} className='group block'>
|
||||
<div className='relative w-full'>
|
||||
{/* 长方形容器 - 调整宽高比和背景色 */}
|
||||
<div className='relative aspect-[5/3] w-full overflow-hidden rounded-xl bg-gray-200 border border-gray-300/50'>
|
||||
{/* 图标容器 */}
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<Icon className='h-8 w-8 sm:h-12 sm:w-12 text-gray-600' />
|
||||
</div>
|
||||
|
||||
{/* Hover 蒙版效果 - 参考 DemoCard */}
|
||||
<div className='absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200'></div>
|
||||
</div>
|
||||
|
||||
{/* 标题 - absolute 定位,类似 DemoCard */}
|
||||
<div className='absolute top-[calc(100%+0.5rem)] left-0 right-0'>
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<h3 className='text-xs sm:text-sm font-medium text-gray-800 truncate w-full text-center'>
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user