feat: implement search page ui

2026-02-22 10:34:42 +08:00 · 2025-06-17 21:57:42 +08:00
parent 0acec95317
commit b38b513df0
5 changed files with 191 additions and 42 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,9 +3,9 @@
 import { useState } from 'react';

 import CapsuleSwitch from '@/components/CapsuleSwitch';
+import DemoCard from '@/components/card/DemoCard';
+import VideoCard from '@/components/card/VideoCard';
 import Sidebar from '@/components/layout/Sidebar';
-import SearchCard from '@/components/video/SearchCard';
-import VideoCard from '@/components/video/VideoCard';

 const defaultPoster =
  'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg';
@@ -105,7 +105,7 @@ export default function Home() {
          <div className='grid grid-cols-5 gap-8'>
            {mockData.recentMovies.map((movie) => (
              <div key={movie.id} className='w-48'>
-                <SearchCard {...movie} />
+                <DemoCard {...movie} />
              </div>
            ))}
          </div>
@@ -119,7 +119,7 @@ export default function Home() {
          <div className='grid grid-cols-5 gap-8'>
            {mockData.recentTvShows.map((show) => (
              <div key={show.id} className='w-48'>
-                <SearchCard {...show} />
+                <DemoCard {...show} />
              </div>
            ))}
          </div>
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { Search } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+import VideoCard from '@/components/card/VideoCard';
+import Sidebar from '@/components/layout/Sidebar';
+
+// 模拟搜索历史数据
+const mockSearchHistory = ['流浪地球', '三体', '狂飙', '满江红'];
+
+// 模拟搜索结果数据
+const mockSearchResults = [
+  {
+    id: 1,
+    title: '流浪地球2',
+    poster:
+      'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg',
+    type: 'movie' as const,
+    source: '电影天堂',
+  },
+  {
+    id: 2,
+    title: '三体',
+    poster:
+      'https://vip.dytt-img.com/upload/vod/20250326-1/9857e2e8581f231e24747ee32e633a3b.jpg',
+    type: 'tv' as const,
+    episodes: 30,
+    source: '电影天堂',
+  },
+];
+
+export default function SearchPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');
+  const [searchResults, setSearchResults] = useState<typeof mockSearchResults>(
+    []
+  );
+  const [showResults, setShowResults] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // 自动聚焦搜索框
+    searchInputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    // 当搜索参数变化时更新搜索状态
+    const query = searchParams.get('q');
+    if (query) {
+      setSearchQuery(query);
+      // 这里应该调用实际的搜索 API
+      setSearchResults(mockSearchResults);
+      setShowResults(true);
+    } else {
+      setShowResults(false);
+    }
+  }, [searchParams]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+    }
+  };
+
+  return (
+    <div className='flex min-h-screen'>
+      <Sidebar onToggle={setSidebarCollapsed} activePath='/search' />
+
+      <main
+        className={`flex-1 px-10 py-8 transition-all duration-300 ${
+          sidebarCollapsed ? 'ml-16' : 'ml-64'
+        }`}
+      >
+        {/* 搜索框 */}
+        <div className='mb-8'>
+          <form onSubmit={handleSearch} className='max-w-2xl mx-auto'>
+            <div className='relative'>
+              <Search className='absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400' />
+              <input
+                ref={searchInputRef}
+                type='text'
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder='搜索电影、电视剧...'
+                className='w-full h-12 rounded-lg bg-gray-50/80 py-3 pl-10 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'
+              />
+            </div>
+          </form>
+        </div>
+
+        {/* 搜索结果或搜索历史 */}
+        <div className='max-w-7xl mx-auto mt-12'>
+          {showResults ? (
+            // 搜索结果
+            <div className='grid grid-cols-5 gap-7'>
+              {searchResults.map((item) => (
+                <div key={item.id} className='w-44'>
+                  <VideoCard {...item} />
+                </div>
+              ))}
+            </div>
+          ) : mockSearchHistory.length > 0 ? (
+            // 搜索历史
+            <section className='mb-12'>
+              <h2 className='mb-4 text-xl font-bold text-gray-800 text-left'>
+                搜索历史
+              </h2>
+              <div className='flex flex-wrap gap-2'>
+                {mockSearchHistory.map((item, index) => (
+                  <button
+                    key={index}
+                    onClick={() => {
+                      setSearchQuery(item);
+                      router.push(`/search?q=${encodeURIComponent(item)}`);
+                    }}
+                    className='px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors duration-200'
+                  >
+                    {item}
+                  </button>
+                ))}
+              </div>
+            </section>
+          ) : null}
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/components/video/SearchCard.tsx
+++ b/src/components/video/SearchCard.tsx
@@ -1,8 +1,9 @@
 import { Search } from 'lucide-react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';

-interface SearchCardProps {
+interface DemoCardProps {
  title: string;
  poster: string;
  rating?: number;
@@ -54,10 +55,19 @@ function SearchCircle({
  );
 }

-const SearchCard = ({ title, poster, episodes }: SearchCardProps) => {
+const DemoCard = ({ title, poster, episodes }: DemoCardProps) => {
  const [hover, setHover] = useState(false);
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push(`/search?q=${encodeURIComponent(title)}`);
+  };
+
  return (
-    <div className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col'>
+    <div
+      className='group relative w-full overflow-hidden rounded-lg bg-white border border-[#e6e6e6] shadow-none flex flex-col cursor-pointer'
+      onClick={handleClick}
+    >
      {/* 海报图片 - 2:3 比例 */}
      <div className='relative aspect-[2/3] w-full overflow-hidden'>
        <Image src={poster} alt={title} fill className='object-cover' />
@@ -70,7 +80,6 @@ const SearchCard = ({ title, poster, episodes }: SearchCardProps) => {
              className={`transition-all duration-200 ${
                hover ? 'scale-110' : ''
              }`}
-              style={{ cursor: 'pointer' }}
            >
              <SearchCircle fillColor={hover ? '#22c55e' : 'none'} />
            </div>
@@ -95,4 +104,4 @@ const SearchCard = ({ title, poster, episodes }: SearchCardProps) => {
  );
 };

-export default SearchCard;
+export default DemoCard;
--- a/src/components/video/VideoCard.tsx
+++ b/src/components/video/VideoCard.tsx
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,23 +1,29 @@
 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';

 // 可替换为你自己的 logo 图片
 const Logo = () => (
-  <div className='flex items-center justify-center h-16 select-none'>
+  <Link
+    href='/'
+    className='flex items-center justify-center h-16 select-none hover:opacity-80 transition-opacity duration-200'
+  >
    <span className='text-2xl font-bold text-green-600 tracking-tight'>
      LibreTV
    </span>
-  </div>
+  </Link>
 );

 interface SidebarProps {
  onToggle?: (collapsed: boolean) => void;
+  activePath?: string;
 }

-const Sidebar = ({ onToggle }: SidebarProps) => {
+const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
+  const router = useRouter();
  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [active, setActive] = useState('/');
+  const [active, setActive] = useState(activePath);

  const handleToggle = () => {
    const newCollapsed = !isCollapsed;
@@ -25,6 +31,10 @@ const Sidebar = ({ onToggle }: SidebarProps) => {
    onToggle?.(newCollapsed);
  };

+  const handleSearchClick = () => {
+    router.push('/search');
+  };
+
  const menuItems = [
    { icon: Tv, label: '电视剧', href: '/tv-shows' },
    { icon: Film, label: '电影', href: '/movies' },
@@ -65,38 +75,14 @@ const Sidebar = ({ onToggle }: SidebarProps) => {
          </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'>
+        {/* 首页和搜索导航 */}
+        <nav className='px-2 mt-4 space-y-1'>
          <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'
+            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'>
@@ -108,6 +94,27 @@ const Sidebar = ({ onToggle }: SidebarProps) => {
              </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>

        {/* 菜单项 */}
@@ -122,7 +129,7 @@ const Sidebar = ({ onToggle }: SidebarProps) => {
                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'
+                    : 'max-w-[220px] mx-auto'
                } gap-3 justify-start`}
              >
                <div className='w-4 h-4 flex items-center justify-center'>