feat: init index page

src/components/CapsuleSwitch.tsx

@@ -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;

src/components/layout/Sidebar.tsx

@@ -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;

src/components/video/SearchCard.tsx

@@ -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;

src/components/video/VideoCard.tsx

@@ -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;