feat: search api/page && detail api/page

2026-02-23 11:35:17 +08:00 · 2025-06-18 00:59:11 +08:00
parent b38b513df0
commit 479fafcb1c
15 changed files with 1050 additions and 376 deletions
--- a/src/components/card/DemoCard.tsx
+++ b/src/components/card/DemoCard.tsx
@@ -6,9 +6,6 @@ import React, { useState } from 'react';
 interface DemoCardProps {
  title: string;
  poster: string;
-  rating?: number;
-  type: 'movie' | 'tv';
-  episodes?: number;
 }

 function SearchCircle({
@@ -55,7 +52,7 @@ function SearchCircle({
  );
 }

-const DemoCard = ({ title, poster, episodes }: DemoCardProps) => {
+const DemoCard = ({ title, poster }: DemoCardProps) => {
  const [hover, setHover] = useState(false);
  const router = useRouter();

@@ -65,7 +62,7 @@ const DemoCard = ({ title, poster, episodes }: DemoCardProps) => {

  return (
    <div
-      className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col cursor-pointer'
+      className='group relative w-full overflow-hidden rounded-lg bg-transparent shadow-none flex flex-col cursor-pointer'
      onClick={handleClick}
    >
      {/* 海报图片 - 2:3 比例 */}
@@ -85,17 +82,11 @@ const DemoCard = ({ title, poster, episodes }: DemoCardProps) => {
            </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'>
+      <div className='p-2 bg-transparent'>
+        <div className='flex flex-col items-center justify-center'>
+          <span className='text-gray-900 font-semibold truncate w-full text-center'>
            {title}
          </span>
        </div>
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -0,0 +1,140 @@
+import { Heart } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState } from 'react';
+
+interface VideoCardProps {
+  id: string;
+  source: string;
+  title: string;
+  poster: string;
+  episodes?: number;
+  source_name: string;
+  progress?: number;
+}
+
+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>
+  );
+}
+
+export default function VideoCard({
+  id,
+  title,
+  poster,
+  episodes,
+  source,
+  source_name,
+  progress,
+}: VideoCardProps) {
+  const [playHover, setPlayHover] = useState(false);
+
+  return (
+    <Link href={`/detail?source=${source}&id=${id}`}>
+      <div className='group relative w-full overflow-hidden rounded-lg bg-transparent 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>
+          )}
+
+          {/* 播放进度条 */}
+          {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 bg-transparent'>
+          <div className='flex flex-col items-center justify-center'>
+            <span className='text-gray-900 font-semibold truncate w-full text-center'>
+              {title}
+            </span>
+            {source && (
+              <span className='text-gray-500 text-xs w-full text-center mt-1'>
+                {source_name}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
--- a/src/components/card/VideoCard.tsx
+++ b/src/components/card/VideoCard.tsx
@@ -1,140 +0,0 @@
-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;
--- a/src/components/layout/PageLayout.tsx
+++ b/src/components/layout/PageLayout.tsx
@@ -0,0 +1,26 @@
+import { useSidebar } from './Sidebar';
+import Sidebar from './Sidebar';
+
+interface PageLayoutProps {
+  children: React.ReactNode;
+  activePath?: string;
+}
+
+const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
+  const { isCollapsed } = useSidebar();
+
+  return (
+    <div className='grid grid-cols-[auto_1fr] min-h-screen'>
+      <Sidebar activePath={activePath} />
+      <div
+        className={`transition-all duration-300 ${
+          isCollapsed ? 'col-start-2' : 'col-start-2'
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default PageLayout;
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,7 +1,23 @@
 import { Film, Folder, Home, Menu, Search, Star, Tv } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+interface SidebarContextType {
+  isCollapsed: boolean;
+}
+
+const SidebarContext = createContext<SidebarContextType>({
+  isCollapsed: false,
+});
+
+export const useSidebar = () => useContext(SidebarContext);

 // 可替换为你自己的 logo 图片
 const Logo = () => (
@@ -22,17 +38,31 @@ interface SidebarProps {

 const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
  const router = useRouter();
-  const [isCollapsed, setIsCollapsed] = useState(false);
+  const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    const saved = localStorage.getItem('sidebarCollapsed');
+    return saved !== null ? JSON.parse(saved) : false;
+  });
  const [active, setActive] = useState(activePath);

-  const handleToggle = () => {
-    const newCollapsed = !isCollapsed;
-    setIsCollapsed(newCollapsed);
-    onToggle?.(newCollapsed);
-  };
+  useEffect(() => {
+    setActive(pathname);
+  }, [pathname]);

-  const handleSearchClick = () => {
+  const handleToggle = useCallback(() => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem('sidebarCollapsed', JSON.stringify(newState));
+    onToggle?.(newState);
+  }, [isCollapsed, onToggle]);
+
+  const handleSearchClick = useCallback(() => {
    router.push('/search');
+  }, [router]);
+
+  const contextValue = {
+    isCollapsed,
  };

  const menuItems = [
@@ -45,107 +75,122 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
  ];

  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>
-
-        {/* 首页和搜索导航 */}
-        <nav className='px-2 mt-4 space-y-1'>
-          <Link
-            href='/'
-            onClick={() => setActive('/')}
-            data-active={active === '/'}
-            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 font-medium transition-colors duration-200 min-h-[40px] ${
-              isCollapsed ? 'w-full max-w-none mx-0' : 'max-w-[220px] 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' />
+    <SidebarContext.Provider value={contextValue}>
+      <div className='flex'>
+        <aside
+          className={`fixed top-0 left-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.3)',
+            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'
+                }`}
+              >
+                <div className='w-[calc(100%-4rem)] flex justify-center'>
+                  {!isCollapsed && <Logo />}
+                </div>
+              </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 z-10 ${
+                  isCollapsed ? 'left-1/2 -translate-x-1/2' : 'right-2'
+                }`}
+              >
+                <Menu className='h-4 w-4' />
+              </button>
            </div>
-            {!isCollapsed && (
-              <span className='whitespace-nowrap transition-opacity duration-200 opacity-100'>
-                首页
-              </span>
-            )}
-          </Link>
-          <Link
-            href='/search'
-            onClick={(e) => {
-              e.preventDefault();
-              handleSearchClick();
-              setActive('/search');
-            }}
-            data-active={active === '/search'}
-            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 font-medium transition-colors duration-200 min-h-[40px] ${
-              isCollapsed ? 'w-full max-w-none mx-0' : 'max-w-[220px] mx-auto'
-            } gap-3 justify-start`}
-          >
-            <div className='w-4 h-4 flex items-center justify-center'>
-              <Search 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) => (
+            {/* 首页和搜索导航 */}
+            <nav className='px-2 mt-4 space-y-1'>
              <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] ${
+                href='/'
+                onClick={() => setActive('/')}
+                data-active={active === '/'}
+                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 font-medium transition-colors duration-200 min-h-[40px] ${
                  isCollapsed
                    ? 'w-full max-w-none mx-0'
                    : 'max-w-[220px] 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' />
+                  <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'>
-                    {item.label}
+                    首页
                  </span>
                )}
              </Link>
-            ))}
+              <Link
+                href='/search'
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleSearchClick();
+                  setActive('/search');
+                }}
+                data-active={active === '/search'}
+                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 font-medium transition-colors duration-200 min-h-[40px] ${
+                  isCollapsed
+                    ? 'w-full max-w-none mx-0'
+                    : 'max-w-[220px] mx-auto'
+                } gap-3 justify-start`}
+              >
+                <div className='w-4 h-4 flex items-center justify-center'>
+                  <Search 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-[220px] 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>
-        </div>
+        </aside>
+        <div
+          className={`transition-all duration-300 ${
+            isCollapsed ? 'w-16' : 'w-64'
+          }`}
+        ></div>
      </div>
-    </aside>
+    </SidebarContext.Provider>
  );
 };