diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index f413af9..e03271f 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,7 +1,7 @@ /* eslint-disable react-hooks/exhaustive-deps, @typescript-eslint/no-explicit-any,@typescript-eslint/no-non-null-assertion,no-empty */ 'use client'; -import { ChevronUp, RefreshCw, Search, X } from 'lucide-react'; +import { ChevronUp, RefreshCw, Search, X, Film, HardDrive } from 'lucide-react'; import { useRouter, useSearchParams } from 'next/navigation'; import React, { startTransition, Suspense, useEffect, useMemo, useRef, useState } from 'react'; @@ -19,6 +19,7 @@ import SearchResultFilter, { SearchFilterCategory } from '@/components/SearchRes import SearchSuggestions from '@/components/SearchSuggestions'; import VideoCard, { VideoCardHandle } from '@/components/VideoCard'; import PansouSearch from '@/components/PansouSearch'; +import CapsuleSwitch from '@/components/CapsuleSwitch'; function SearchPageClient() { // 搜索历史 @@ -800,27 +801,23 @@ function SearchPageClient() { {/* 选项卡 */} -
- - +
+ , + }, + { + label: '网盘搜索', + value: 'pansou', + icon: , + }, + ]} + active={activeTab} + onChange={(value) => setActiveTab(value as 'video' | 'pansou')} + />
diff --git a/src/components/CapsuleSwitch.tsx b/src/components/CapsuleSwitch.tsx index abaea15..1e3396a 100644 --- a/src/components/CapsuleSwitch.tsx +++ b/src/components/CapsuleSwitch.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'; interface CapsuleSwitchProps { - options: { label: string; value: string }[]; + options: { label: string; value: string; icon?: React.ReactNode }[]; active: string; onChange: (value: string) => void; className?: string; @@ -86,12 +86,13 @@ const CapsuleSwitch: React.FC = ({ buttonRefs.current[index] = el; }} onClick={() => onChange(opt.value)} - className={`relative z-10 w-16 px-3 py-1 text-xs sm:w-20 sm:py-2 sm:text-sm rounded-full font-medium transition-all duration-200 cursor-pointer ${ + className={`relative z-10 flex items-center justify-center gap-1.5 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm rounded-full font-medium transition-all duration-200 cursor-pointer ${ isActive ? 'text-gray-900 dark:text-gray-100' : 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100' }`} > + {opt.icon && {opt.icon}} {opt.label} );