mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-27 23:34:48 +08:00
feat: init index page
This commit is contained in:
shinya
@@ -9,7 +9,7 @@ import {
|
||||
Plus,
|
||||
Shield,
|
||||
} from 'lucide-react';
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import Button from '@/components/buttons/Button';
|
||||
import IconButton from '@/components/buttons/IconButton';
|
||||
|
||||
59
src/app/globals.css
Normal file
59
src/app/globals.css
Normal file
@@ -0,0 +1,59 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#e6f3fb 0%,
|
||||
#eaf3f7 18%,
|
||||
#f7f7f3 38%,
|
||||
#e9ecef 60%,
|
||||
#dbe3ea 80%,
|
||||
#d3dde6 100%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(75, 85, 99, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(107, 114, 128, 0.5);
|
||||
}
|
||||
|
||||
/* 视频卡片悬停效果 */
|
||||
.video-card-hover {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.video-card-hover:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 渐变遮罩 */
|
||||
.gradient-overlay {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.8) 100%
|
||||
);
|
||||
}
|
||||
@@ -1,52 +1,13 @@
|
||||
import { Metadata } from 'next';
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
|
||||
import '@/styles/globals.css';
|
||||
// !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately
|
||||
import '@/styles/colors.css';
|
||||
import './globals.css';
|
||||
|
||||
import { siteConfig } from '@/constant/config';
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
// !STARTERCONF Change these default meta
|
||||
// !STARTERCONF Look at @/constant/config to change them
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(siteConfig.url),
|
||||
title: {
|
||||
default: siteConfig.title,
|
||||
template: `%s | ${siteConfig.title}`,
|
||||
},
|
||||
description: siteConfig.description,
|
||||
robots: { index: true, follow: true },
|
||||
// !STARTERCONF this is the default favicon, you can generate your own from https://realfavicongenerator.net/
|
||||
// ! copy to /favicon folder
|
||||
icons: {
|
||||
icon: '/favicon/favicon.ico',
|
||||
shortcut: '/favicon/favicon-16x16.png',
|
||||
apple: '/favicon/apple-touch-icon.png',
|
||||
},
|
||||
manifest: `/favicon/site.webmanifest`,
|
||||
openGraph: {
|
||||
url: siteConfig.url,
|
||||
title: siteConfig.title,
|
||||
description: siteConfig.description,
|
||||
siteName: siteConfig.title,
|
||||
images: [`${siteConfig.url}/images/og.jpg`],
|
||||
type: 'website',
|
||||
locale: 'en_US',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: siteConfig.title,
|
||||
description: siteConfig.description,
|
||||
images: [`${siteConfig.url}/images/og.jpg`],
|
||||
// creator: '@th_clarence',
|
||||
},
|
||||
// authors: [
|
||||
// {
|
||||
// name: 'Theodorus Clarence',
|
||||
// url: 'https://theodorusclarence.com',
|
||||
// },
|
||||
// ],
|
||||
title: '聚合视频站',
|
||||
description: '一个聚合多个视频源的现代化视频网站',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -55,8 +16,10 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html>
|
||||
<body>{children}</body>
|
||||
<html lang='zh-CN'>
|
||||
<body className={`${inter.className} min-h-screen text-gray-900`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
180
src/app/page.tsx
180
src/app/page.tsx
@@ -1,72 +1,130 @@
|
||||
'use client';
|
||||
|
||||
import Head from 'next/head';
|
||||
import * as React from 'react';
|
||||
import '@/lib/env';
|
||||
import { useState } from 'react';
|
||||
|
||||
import ArrowLink from '@/components/links/ArrowLink';
|
||||
import ButtonLink from '@/components/links/ButtonLink';
|
||||
import UnderlineLink from '@/components/links/UnderlineLink';
|
||||
import UnstyledLink from '@/components/links/UnstyledLink';
|
||||
import CapsuleSwitch from '@/components/CapsuleSwitch';
|
||||
import Sidebar from '@/components/layout/Sidebar';
|
||||
import SearchCard from '@/components/video/SearchCard';
|
||||
import VideoCard from '@/components/video/VideoCard';
|
||||
|
||||
/**
|
||||
* SVGR Support
|
||||
* Caveat: No React Props Type.
|
||||
*
|
||||
* You can override the next-env if the type is important to you
|
||||
* @see https://stackoverflow.com/questions/68103844/how-to-override-next-js-svg-module-declaration
|
||||
*/
|
||||
import Logo from '~/svg/Logo.svg';
|
||||
const defaultPoster =
|
||||
'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg';
|
||||
|
||||
// !STARTERCONF -> Select !STARTERCONF and CMD + SHIFT + F
|
||||
// Before you begin editing, follow all comments with `STARTERCONF`,
|
||||
// to customize the default configuration.
|
||||
// 模拟数据
|
||||
const mockData = {
|
||||
recentMovies: [
|
||||
{
|
||||
id: 1,
|
||||
title: '流浪地球2',
|
||||
poster: defaultPoster,
|
||||
rating: 8.3,
|
||||
type: 'movie' as const,
|
||||
source: '电影天堂',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '满江红',
|
||||
poster: defaultPoster,
|
||||
rating: 7.5,
|
||||
type: 'movie' as const,
|
||||
source: '电影天堂',
|
||||
},
|
||||
],
|
||||
recentTvShows: [
|
||||
{
|
||||
id: 3,
|
||||
title: '三体',
|
||||
poster: defaultPoster,
|
||||
rating: 8.7,
|
||||
type: 'tv' as const,
|
||||
episodes: 30,
|
||||
source: '电影天堂',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '狂飙',
|
||||
poster: defaultPoster,
|
||||
rating: 8.5,
|
||||
type: 'tv' as const,
|
||||
episodes: 39,
|
||||
source: '电影天堂',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('home'); // 'home' 或 'favorites'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
<Head>
|
||||
<title>Hi</title>
|
||||
</Head>
|
||||
<section className='bg-white'>
|
||||
<div className='layout relative flex min-h-screen flex-col items-center justify-center py-12 text-center'>
|
||||
<Logo className='w-16' />
|
||||
<h1 className='mt-4'>Next.js + Tailwind CSS + TypeScript Starter</h1>
|
||||
<p className='mt-2 text-sm text-gray-800'>
|
||||
A starter for Next.js, Tailwind CSS, and TypeScript with Absolute
|
||||
Import, Seo, Link component, pre-configured with Husky{' '}
|
||||
</p>
|
||||
<p className='mt-2 text-sm text-gray-700'>
|
||||
<ArrowLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
|
||||
See the repository
|
||||
</ArrowLink>
|
||||
</p>
|
||||
<div className='flex min-h-screen'>
|
||||
<Sidebar onToggle={setSidebarCollapsed} />
|
||||
|
||||
<ButtonLink className='mt-6' href='/components' variant='light'>
|
||||
See all components
|
||||
</ButtonLink>
|
||||
|
||||
<UnstyledLink
|
||||
href='https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fts-nextjs-tailwind-starter'
|
||||
className='mt-4'
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
width='92'
|
||||
height='32'
|
||||
src='https://vercel.com/button'
|
||||
alt='Deploy with Vercel'
|
||||
/>
|
||||
</UnstyledLink>
|
||||
|
||||
<footer className='absolute bottom-2 text-gray-700'>
|
||||
© {new Date().getFullYear()} By{' '}
|
||||
<UnderlineLink href='https://theodorusclarence.com?ref=tsnextstarter'>
|
||||
Theodorus Clarence
|
||||
</UnderlineLink>
|
||||
</footer>
|
||||
<main
|
||||
className={`flex-1 px-10 py-8 transition-all duration-300 ${
|
||||
sidebarCollapsed ? 'ml-16' : 'ml-64'
|
||||
}`}
|
||||
>
|
||||
{/* 顶部 Tab 切换 */}
|
||||
<div className='mb-8 flex justify-center'>
|
||||
<CapsuleSwitch
|
||||
options={[
|
||||
{ label: '首页', value: 'home' },
|
||||
{ label: '收藏夹', value: 'favorites' },
|
||||
]}
|
||||
active={activeTab}
|
||||
onChange={setActiveTab}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* 继续观看 */}
|
||||
<section className='mb-12'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
继续观看
|
||||
</h2>
|
||||
<div className='flex space-x-8 overflow-x-auto pb-2'>
|
||||
{[...mockData.recentMovies, ...mockData.recentTvShows]
|
||||
.slice(0, 4)
|
||||
.map((item) => (
|
||||
<div key={item.id} className='min-w-[192px] w-48'>
|
||||
<VideoCard
|
||||
{...item}
|
||||
showProgress={true}
|
||||
progress={Math.random() * 100}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 最新电影 */}
|
||||
<section className='mb-12'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
最新电影
|
||||
</h2>
|
||||
<div className='grid grid-cols-5 gap-8'>
|
||||
{mockData.recentMovies.map((movie) => (
|
||||
<div key={movie.id} className='w-48'>
|
||||
<SearchCard {...movie} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 最新电视剧 */}
|
||||
<section className='mb-12'>
|
||||
<h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
|
||||
最新电视剧
|
||||
</h2>
|
||||
<div className='grid grid-cols-5 gap-8'>
|
||||
{mockData.recentTvShows.map((show) => (
|
||||
<div key={show.id} className='w-48'>
|
||||
<SearchCard {...show} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
39
src/components/CapsuleSwitch.tsx
Normal file
39
src/components/CapsuleSwitch.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
|
||||
interface CapsuleSwitchProps {
|
||||
options: { label: string; value: string }[];
|
||||
active: string;
|
||||
onChange: (value: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CapsuleSwitch: React.FC<CapsuleSwitchProps> = ({
|
||||
options,
|
||||
active,
|
||||
onChange,
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`inline-flex bg-gray-300/80 rounded-full p-1 ${
|
||||
className || ''
|
||||
}`}
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => onChange(opt.value)}
|
||||
className={`w-20 px-3 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
|
||||
active === opt.value
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-700 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CapsuleSwitch;
|
||||
145
src/components/layout/Sidebar.tsx
Normal file
145
src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Film, Folder, Home, Menu, Search, Star, Tv } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
|
||||
// 可替换为你自己的 logo 图片
|
||||
const Logo = () => (
|
||||
<div className='flex items-center justify-center h-16 select-none'>
|
||||
<span className='text-2xl font-bold text-green-600 tracking-tight'>
|
||||
LibreTV
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
interface SidebarProps {
|
||||
onToggle?: (collapsed: boolean) => void;
|
||||
}
|
||||
|
||||
const Sidebar = ({ onToggle }: SidebarProps) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [active, setActive] = useState('/');
|
||||
|
||||
const handleToggle = () => {
|
||||
const newCollapsed = !isCollapsed;
|
||||
setIsCollapsed(newCollapsed);
|
||||
onToggle?.(newCollapsed);
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{ icon: Tv, label: '电视剧', href: '/tv-shows' },
|
||||
{ icon: Film, label: '电影', href: '/movies' },
|
||||
{ icon: Star, label: '豆瓣 Top250', href: '/top250' },
|
||||
{ icon: Folder, label: '合集', href: '/collections' },
|
||||
{ icon: Star, label: '热门电影', href: '/douban/hot-movies' },
|
||||
{ icon: Star, label: '热门电视剧', href: '/douban/hot-tv' },
|
||||
];
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`fixed left-0 top-0 h-screen bg-white/40 backdrop-blur-xl transition-all duration-300 border-r border-gray-200/50 z-10 shadow-lg ${
|
||||
isCollapsed ? 'w-16' : 'w-64'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.4)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
}}
|
||||
>
|
||||
<div className='flex h-full flex-col'>
|
||||
{/* 顶部 Logo 区域 */}
|
||||
<div className='relative h-16'>
|
||||
<div
|
||||
className={`absolute inset-0 flex items-center justify-center transition-opacity duration-200 ${
|
||||
isCollapsed ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
<Logo />
|
||||
</div>
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className={`absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 transition-colors duration-200 ${
|
||||
isCollapsed ? 'left-1/2 -translate-x-1/2' : 'right-2'
|
||||
}`}
|
||||
>
|
||||
<Menu className='h-4 w-4' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className='px-2 pb-2 h-12'>
|
||||
<div
|
||||
className={`relative h-full ${
|
||||
isCollapsed ? 'w-full max-w-none mx-0' : 'max-w-[215px] mx-auto'
|
||||
}`}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<button className='flex items-center justify-center rounded-lg p-2 text-gray-600 hover:bg-gray-100/50 hover:text-green-600 w-full h-full transition-all duration-300'>
|
||||
<Search className='h-4 w-4 text-gray-500' />
|
||||
</button>
|
||||
) : (
|
||||
<div className='relative h-full'>
|
||||
<Search className='absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 transition-all duration-300' />
|
||||
<input
|
||||
type='text'
|
||||
placeholder='搜索...'
|
||||
className='w-full h-full rounded-lg bg-gray-50/80 py-3 pl-9 pr-4 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white border border-gray-200/50 shadow-sm transition-all duration-300'
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 首页导航 */}
|
||||
<nav className='px-2 mt-4'>
|
||||
<Link
|
||||
href='/'
|
||||
onClick={() => setActive('/')}
|
||||
data-active={active === '/'}
|
||||
className={`flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 font-medium transition-colors duration-200 min-h-[40px] ${
|
||||
isCollapsed ? 'w-full max-w-none mx-0' : 'max-w-[215px] mx-auto'
|
||||
} gap-3 justify-start`}
|
||||
>
|
||||
<div className='w-4 h-4 flex items-center justify-center'>
|
||||
<Home className='h-4 w-4 text-gray-500 group-hover:text-green-600 data-[active=true]:text-green-700' />
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
|
||||
首页
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* 菜单项 */}
|
||||
<div className='flex-1 overflow-y-auto px-2 pt-4'>
|
||||
<div className='space-y-1'>
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setActive(item.href)}
|
||||
data-active={active === item.href}
|
||||
className={`group flex items-center rounded-lg px-2 py-2 pl-4 text-gray-700 hover:bg-gray-100/30 hover:text-green-600 data-[active=true]:bg-green-500/20 data-[active=true]:text-green-700 transition-colors duration-200 min-h-[40px] ${
|
||||
isCollapsed
|
||||
? 'w-full max-w-none mx-0'
|
||||
: 'max-w-[215px] mx-auto'
|
||||
} gap-3 justify-start`}
|
||||
>
|
||||
<div className='w-4 h-4 flex items-center justify-center'>
|
||||
<item.icon className='h-4 w-4 text-gray-500 group-hover:text-green-600 group-data-[active=true]:text-green-700' />
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
98
src/components/video/SearchCard.tsx
Normal file
98
src/components/video/SearchCard.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { Search } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface SearchCardProps {
|
||||
title: string;
|
||||
poster: string;
|
||||
rating?: number;
|
||||
type: 'movie' | 'tv';
|
||||
episodes?: number;
|
||||
}
|
||||
|
||||
function SearchCircle({
|
||||
className = '',
|
||||
fillColor = 'none',
|
||||
}: {
|
||||
className?: string;
|
||||
fillColor?: string;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
width='44'
|
||||
height='44'
|
||||
viewBox='0 0 44 44'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className={className}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<circle
|
||||
cx='22'
|
||||
cy='22'
|
||||
r='20'
|
||||
stroke='white'
|
||||
strokeWidth='1.5'
|
||||
fill={fillColor}
|
||||
/>
|
||||
<g>
|
||||
<foreignObject x='12' y='12' width='20' height='20'>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Search className='h-7 w-7 text-white' strokeWidth={2} />
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const SearchCard = ({ title, poster, episodes }: SearchCardProps) => {
|
||||
const [hover, setHover] = useState(false);
|
||||
return (
|
||||
<div className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col'>
|
||||
{/* 海报图片 - 2:3 比例 */}
|
||||
<div className='relative aspect-[2/3] w-full overflow-hidden'>
|
||||
<Image src={poster} alt={title} fill className='object-cover' />
|
||||
{/* Hover 效果 */}
|
||||
<div className='absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center group'>
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<div
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
className={`transition-all duration-200 ${
|
||||
hover ? 'scale-110' : ''
|
||||
}`}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<SearchCircle fillColor={hover ? '#22c55e' : 'none'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 集数指示器 - 绿色小圆球 */}
|
||||
{episodes && (
|
||||
<div className='absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center'>
|
||||
<span className='text-white text-xs font-bold'>{episodes}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* 信息层 */}
|
||||
<div className='p-2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<span className='text-gray-900 font-semibold truncate flex-1 mr-2'>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchCard;
|
||||
140
src/components/video/VideoCard.tsx
Normal file
140
src/components/video/VideoCard.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { Heart } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface VideoCardProps {
|
||||
title: string;
|
||||
poster: string;
|
||||
rating?: number;
|
||||
type: 'movie' | 'tv';
|
||||
episodes?: number;
|
||||
source?: string;
|
||||
showProgress?: boolean;
|
||||
progress?: number; // 0-100
|
||||
}
|
||||
|
||||
function CheckCircleCustom() {
|
||||
return (
|
||||
<span className='inline-flex items-center justify-center'>
|
||||
<svg
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 32 32'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<circle cx='16' cy='16' r='13' stroke='white' strokeWidth='2' />
|
||||
<path
|
||||
d='M11 16.5L15 20L21 13.5'
|
||||
stroke='white'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function PlayCircleSolid({
|
||||
className = '',
|
||||
fillColor = 'none',
|
||||
}: {
|
||||
className?: string;
|
||||
fillColor?: string;
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
width='44'
|
||||
height='44'
|
||||
viewBox='0 0 44 44'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
className={className}
|
||||
>
|
||||
<circle
|
||||
cx='22'
|
||||
cy='22'
|
||||
r='20'
|
||||
stroke='white'
|
||||
strokeWidth='1.5'
|
||||
fill={fillColor}
|
||||
/>
|
||||
<polygon points='19,15 19,29 29,22' fill='white' />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const VideoCard = ({
|
||||
title,
|
||||
poster,
|
||||
episodes,
|
||||
source,
|
||||
showProgress,
|
||||
progress,
|
||||
}: VideoCardProps) => {
|
||||
const [playHover, setPlayHover] = useState(false);
|
||||
|
||||
return (
|
||||
<div className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col'>
|
||||
{/* 海报图片 - 2:3 比例 */}
|
||||
<div className='relative aspect-[2/3] w-full overflow-hidden'>
|
||||
<Image src={poster} alt={title} fill className='object-cover' />
|
||||
|
||||
{/* Hover 效果 */}
|
||||
<div className='absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center group'>
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<div
|
||||
onMouseEnter={() => setPlayHover(true)}
|
||||
onMouseLeave={() => setPlayHover(false)}
|
||||
className={`transition-all duration-200 ${
|
||||
playHover ? 'scale-110' : ''
|
||||
}`}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<PlayCircleSolid fillColor={playHover ? '#22c55e' : 'none'} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='absolute bottom-4 right-4 flex items-center gap-6'>
|
||||
<CheckCircleCustom />
|
||||
<Heart className='h-5 w-5 text-white/90 stroke-[2]' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 集数指示器 - 绿色小圆球 */}
|
||||
{episodes && (
|
||||
<div className='absolute top-2 right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center'>
|
||||
<span className='text-white text-xs font-bold'>{episodes}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 播放进度条 */}
|
||||
{showProgress && progress !== undefined && (
|
||||
<div className='absolute bottom-0 left-0 right-0 h-1 bg-gray-300'>
|
||||
<div
|
||||
className='h-full bg-blue-500 transition-all duration-300'
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 信息层 */}
|
||||
<div className='p-2'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<span className='text-gray-900 font-semibold truncate flex-1 mr-2'>
|
||||
{title}
|
||||
</span>
|
||||
{/* 数据源信息 */}
|
||||
{source && (
|
||||
<span className='text-gray-400 text-xs flex-shrink-0'>
|
||||
{source}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoCard;
|
||||
Reference in New Issue
Block a user