feat: implement search page ui

2026-02-25 21:44:45 +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/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'>