修改搜索页面选项卡

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() {
           </form>
 
           {/* 选项卡 */}
-          <div className='flex justify-center gap-2 mt-6'>
+          <div className='flex justify-center mt-6'>
-            <button
+            <CapsuleSwitch
-              onClick={() => setActiveTab('video')}
+              options={[
-              className={`px-6 py-2 rounded-lg text-sm font-medium transition-colors ${
+                {
-                activeTab === 'video'
+                  label: '影视搜索',
-                  ? 'bg-green-600 text-white dark:bg-green-600'
+                  value: 'video',
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                  icon: <Film size={16} />,
-              }`}
+                },
-            >
+                {
-              影视搜索
+                  label: '网盘搜索',
-            </button>
+                  value: 'pansou',
-            <button
+                  icon: <HardDrive size={16} />,
-              onClick={() => setActiveTab('pansou')}
+                },
-              className={`px-6 py-2 rounded-lg text-sm font-medium transition-colors ${
+              ]}
-                activeTab === 'pansou'
+              active={activeTab}
-                  ? 'bg-green-600 text-white dark:bg-green-600'
+              onChange={(value) => setActiveTab(value as 'video' | 'pansou')}
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+            />
-              }`}
-            >
-              网盘搜索
-            </button>
           </div>
         </div>
 

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<CapsuleSwitchProps> = ({
               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 && <span className='inline-flex items-center'>{opt.icon}</span>}
             {opt.label}
           </button>
         );