网盘类型选项卡改为单行

src/components/PansouSearch.tsx

@@ -1,9 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any,no-console */
 'use client';
 
-import { AlertCircle, Copy, ExternalLink, Loader2, RefreshCw } from 'lucide-react';
+import {
+  AlertCircle,
+  Copy,
+  ExternalLink,
+  Loader2,
+  RefreshCw,
+} from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { PansouLink, PansouSearchResult } from '@/lib/pansou.client';
 
@@ -35,13 +41,17 @@ const CLOUD_TYPE_NAMES: Record<string, string> = {
 // 网盘类型颜色
 const CLOUD_TYPE_COLORS: Record<string, string> = {
   baidu: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
-  aliyun: 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-200',
+  aliyun:
-  quark: 'bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200',
+    'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-200',
+  quark:
+    'bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200',
   tianyi: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200',
   uc: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200',
   mobile: 'bg-pink-100 text-pink-800 dark:bg-pink-900/40 dark:text-pink-200',
-  '115': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200',
+  '115':
-  pikpak: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-200',
+    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200',
+  pikpak:
+    'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-200',
   xunlei: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-200',
   '123': 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-200',
   magnet: 'bg-gray-100 text-gray-800 dark:bg-gray-700/40 dark:text-gray-200',
@@ -73,7 +83,13 @@ const CLOUD_TYPE_TO_CHECK_PLATFORM: Record<string, string> = {
   '123': 'pan123',
 };
 
-type CheckItemStatus = 'pending' | 'checking' | 'valid' | 'invalid' | 'unknown' | 'rate_limited';
+type CheckItemStatus =
+  | 'pending'
+  | 'checking'
+  | 'valid'
+  | 'invalid'
+  | 'unknown'
+  | 'rate_limited';
 
 interface NetdiskCheckTaskPayload {
   id: string;
@@ -89,7 +105,10 @@ interface NetdiskCheckTaskPayload {
     currentBatch: number;
     totalBatches: number;
   };
-  results: Record<string, { status: CheckItemStatus; reason?: string; fromCache?: boolean }>;
+  results: Record<
+    string,
+    { status: CheckItemStatus; reason?: string; fromCache?: boolean }
+  >;
   error?: string;
 }
 
@@ -103,8 +122,10 @@ const CHECK_STATUS_STYLE: Record<CheckItemStatus, string> = {
   checking: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200',
   valid: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200',
   invalid: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200',
-  unknown: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-200',
+  unknown:
-  rate_limited: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-200',
+    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-200',
+  rate_limited:
+    'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-200',
 };
 
 const CHECK_STATUS_TEXT: Record<CheckItemStatus, string> = {
@@ -127,11 +148,17 @@ export default function PansouSearch({
   const [error, setError] = useState<string | null>(null);
   const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
   const [selectedType, setSelectedType] = useState<string>('all'); // 'all' 表示显示全部
+  const typeScrollContainerRef = useRef<HTMLDivElement>(null);
+  const isTypeDraggingRef = useRef(false);
+  const typeDragStartXRef = useRef(0);
+  const typeDragScrollLeftRef = useRef(0);
   const [transferingUrl, setTransferingUrl] = useState<string | null>(null);
   const [playingUrl, setPlayingUrl] = useState<string | null>(null);
   const [toast, setToast] = useState<ToastProps | null>(null);
   const [cooldownRemainingMs, setCooldownRemainingMs] = useState(0);
-  const [checkStatesByType, setCheckStatesByType] = useState<Record<string, StoredCloudCheckState>>({});
+  const [checkStatesByType, setCheckStatesByType] = useState<
+    Record<string, StoredCloudCheckState>
+  >({});
 
   useEffect(() => {
     setCooldownRemainingMs(0);
@@ -149,7 +176,9 @@ export default function PansouSearch({
       const updates = await Promise.all(
         runningEntries.map(async ([cloudType, state]) => {
           try {
-            const response = await fetch(`/api/netdisk/check/task?id=${encodeURIComponent(state.taskId)}`);
+            const response = await fetch(
+              `/api/netdisk/check/task?id=${encodeURIComponent(state.taskId)}`
+            );
             const data = await response.json();
             if (!response.ok) {
               throw new Error(data.error || '获取检测进度失败');
@@ -167,7 +196,8 @@ export default function PansouSearch({
               task: {
                 ...state.task,
                 status: 'failed',
-                error: error instanceof Error ? error.message : '获取检测进度失败',
+                error:
+                  error instanceof Error ? error.message : '获取检测进度失败',
               } as NetdiskCheckTaskPayload,
               cooldownRemainingMs: 0,
             };
@@ -187,11 +217,15 @@ export default function PansouSearch({
         });
         return next;
       });
-      setCooldownRemainingMs(Math.max(0, ...updates.map((item) => item.cooldownRemainingMs)));
+      setCooldownRemainingMs(
+        Math.max(0, ...updates.map((item) => item.cooldownRemainingMs))
+      );
       updates.forEach((update) => {
         if (update.task.status === 'failed' && update.task.error) {
           setToast({
-            message: `${CLOUD_TYPE_NAMES[update.cloudType] || update.cloudType}: ${update.task.error}`,
+            message: `${
+              CLOUD_TYPE_NAMES[update.cloudType] || update.cloudType
+            }: ${update.task.error}`,
             type: 'error',
             onClose: () => setToast(null),
           });
@@ -301,23 +335,26 @@ export default function PansouSearch({
     }
   };
 
-  const handleNetdiskInstantPlay = async (cloudType: string, link: PansouLink) => {
+  const handleNetdiskInstantPlay = async (
+    cloudType: string,
+    link: PansouLink
+  ) => {
     try {
       setPlayingUrl(link.url);
       const instantPlayApi =
         cloudType === 'mobile'
           ? '/api/netdisk/mobile/instant-play'
           : cloudType === 'baidu'
-            ? '/api/netdisk/baidu/instant-play'
+          ? '/api/netdisk/baidu/instant-play'
-              : cloudType === 'tianyi'
+          : cloudType === 'tianyi'
-                ? '/api/netdisk/tianyi/instant-play'
+          ? '/api/netdisk/tianyi/instant-play'
-                : cloudType === '115'
+          : cloudType === '115'
-                  ? '/api/netdisk/115/instant-play'
+          ? '/api/netdisk/115/instant-play'
-                : cloudType === 'uc'
+          : cloudType === 'uc'
-                  ? '/api/netdisk/uc/instant-play'
+          ? '/api/netdisk/uc/instant-play'
-              : cloudType === '123'
+          : cloudType === '123'
-                ? '/api/netdisk/123/instant-play'
+          ? '/api/netdisk/123/instant-play'
-              : '/api/netdisk/quark/instant-play';
+          : '/api/netdisk/quark/instant-play';
       const response = await fetch(instantPlayApi, {
         method: 'POST',
         headers: {
@@ -336,7 +373,24 @@ export default function PansouSearch({
       }
 
       router.push(
-        `/play?source=${encodeURIComponent(data.source || (cloudType === 'mobile' ? 'netdisk-mobile' : cloudType === 'baidu' ? 'netdisk-baidu' : cloudType === 'tianyi' ? 'netdisk-tianyi' : cloudType === '115' ? 'netdisk-115' : cloudType === 'uc' ? 'netdisk-uc' : cloudType === '123' ? 'netdisk-123' : 'netdisk-quark'))}&id=${encodeURIComponent(data.id)}&title=${encodeURIComponent(keyword)}`
+        `/play?source=${encodeURIComponent(
+          data.source ||
+            (cloudType === 'mobile'
+              ? 'netdisk-mobile'
+              : cloudType === 'baidu'
+              ? 'netdisk-baidu'
+              : cloudType === 'tianyi'
+              ? 'netdisk-tianyi'
+              : cloudType === '115'
+              ? 'netdisk-115'
+              : cloudType === 'uc'
+              ? 'netdisk-uc'
+              : cloudType === '123'
+              ? 'netdisk-123'
+              : 'netdisk-quark')
+        )}&id=${encodeURIComponent(data.id)}&title=${encodeURIComponent(
+          keyword
+        )}`
       );
     } catch (err: any) {
       setToast({
@@ -421,6 +475,40 @@ export default function PansouSearch({
     return checkStatesByType[cloudType]?.task || null;
   };
 
+  // 网盘类型选项卡横向拖动滚动
+  const handleTypeMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!typeScrollContainerRef.current) return;
+    isTypeDraggingRef.current = true;
+    typeDragStartXRef.current =
+      e.pageX - typeScrollContainerRef.current.offsetLeft;
+    typeDragScrollLeftRef.current = typeScrollContainerRef.current.scrollLeft;
+    typeScrollContainerRef.current.style.cursor = 'grabbing';
+    typeScrollContainerRef.current.style.userSelect = 'none';
+  };
+
+  const handleTypeMouseLeave = () => {
+    if (!typeScrollContainerRef.current) return;
+    isTypeDraggingRef.current = false;
+    typeScrollContainerRef.current.style.cursor = 'grab';
+    typeScrollContainerRef.current.style.userSelect = 'auto';
+  };
+
+  const handleTypeMouseUp = () => {
+    if (!typeScrollContainerRef.current) return;
+    isTypeDraggingRef.current = false;
+    typeScrollContainerRef.current.style.cursor = 'grab';
+    typeScrollContainerRef.current.style.userSelect = 'auto';
+  };
+
+  const handleTypeMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!isTypeDraggingRef.current || !typeScrollContainerRef.current) return;
+    e.preventDefault();
+    const x = e.pageX - typeScrollContainerRef.current.offsetLeft;
+    const walk = (x - typeDragStartXRef.current) * 2;
+    typeScrollContainerRef.current.scrollLeft =
+      typeDragScrollLeftRef.current - walk;
+  };
+
   const getCheckResultForUrl = (cloudType: string, url: string) => {
     const task = getCloudCheckState(cloudType);
     return task?.results?.[url] || null;
@@ -463,7 +551,9 @@ export default function PansouSearch({
         <div className='flex items-center justify-center py-12'>
           <div className='text-center'>
             <AlertCircle className='mx-auto h-12 w-12 text-red-500 dark:text-red-400' />
-            <p className='mt-4 text-sm text-red-600 dark:text-red-400'>{error}</p>
+            <p className='mt-4 text-sm text-red-600 dark:text-red-400'>
+              {error}
+            </p>
             <button
               onClick={searchPansou}
               className='mt-4 inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors'
@@ -492,12 +582,13 @@ export default function PansouSearch({
     const cloudTypes = Object.keys(results.merged_by_type || {});
 
     // 过滤显示的网盘类型
-    const filteredCloudTypes = selectedType === 'all'
+    const filteredCloudTypes =
-      ? cloudTypes
+      selectedType === 'all'
-      : cloudTypes.filter(type => type === selectedType);
+        ? cloudTypes
+        : cloudTypes.filter((type) => type === selectedType);
 
     // 计算每种网盘类型的数量
-    const typeStats = cloudTypes.map(type => ({
+    const typeStats = cloudTypes.map((type) => ({
       type,
       count: results.merged_by_type?.[type]?.length || 0,
     }));
@@ -506,38 +597,58 @@ export default function PansouSearch({
       <>
         {/* 搜索结果统计 */}
         <div className='text-sm text-gray-600 dark:text-gray-400'>
-          找到 <span className='font-semibold text-green-600 dark:text-green-400'>{results.total}</span> 个资源
+          找到{' '}
+          <span className='font-semibold text-green-600 dark:text-green-400'>
+            {results.total}
+          </span>{' '}
+          个资源
         </div>
 
         {/* 网盘类型过滤器 */}
-        <div className='flex flex-wrap gap-2'>
+        <div className='space-y-2'>
-          <button
+          <h3 className='text-sm font-semibold text-gray-700 dark:text-gray-200'>
-            onClick={() => setSelectedType('all')}
+            网盘类型
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+          </h3>
-              selectedType === 'all'
+          <div className='relative'>
-                ? 'bg-green-600 text-white dark:bg-green-600'
+            <div
-                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+              ref={typeScrollContainerRef}
-            }`}
+              className='overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing'
-          >
+              onMouseDown={handleTypeMouseDown}
-            全部 ({results.total})
+              onMouseLeave={handleTypeMouseLeave}
-          </button>
+              onMouseUp={handleTypeMouseUp}
-          {typeStats.map(({ type, count }) => {
+              onMouseMove={handleTypeMouseMove}
-            const typeName = CLOUD_TYPE_NAMES[type] || type;
+            >
+              <div className='flex gap-2 min-w-min'>
+                <button
+                  onClick={() => setSelectedType('all')}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 ${
+                    selectedType === 'all'
+                      ? 'bg-green-600 text-white dark:bg-green-600'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                  }`}
+                >
+                  全部 ({results.total})
+                </button>
+                {typeStats.map(({ type, count }) => {
+                  const typeName = CLOUD_TYPE_NAMES[type] || type;
 
-            return (
+                  return (
-              <button
+                    <button
-                key={type}
+                      key={type}
-                onClick={() => setSelectedType(type)}
+                      onClick={() => setSelectedType(type)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 ${
-                  selectedType === type
+                        selectedType === type
-                    ? 'bg-green-600 text-white dark:bg-green-600'
+                          ? 'bg-green-600 text-white dark:bg-green-600'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-                }`}
+                      }`}
-              >
+                    >
-                {typeName} ({count})
+                      {typeName} ({count})
-              </button>
+                    </button>
-            );
+                  );
-          })}
+                })}
+              </div>
+            </div>
+          </div>
         </div>
 
         {/* 按网盘类型分类显示 */}
@@ -547,7 +658,8 @@ export default function PansouSearch({
           const sortedLinks = getSortedLinks(cloudType, links);
 
           const typeName = CLOUD_TYPE_NAMES[cloudType] || cloudType;
-          const typeColor = CLOUD_TYPE_COLORS[cloudType] || CLOUD_TYPE_COLORS.others;
+          const typeColor =
+            CLOUD_TYPE_COLORS[cloudType] || CLOUD_TYPE_COLORS.others;
           const checkable = CHECKABLE_CLOUD_TYPES.has(cloudType);
           const cloudCheckTask = getCloudCheckState(cloudType);
           const isCheckingThisType = cloudCheckTask?.status === 'running';
@@ -557,7 +669,9 @@ export default function PansouSearch({
             <div key={cloudType} className='space-y-3'>
               {/* 网盘类型标题 */}
               <div className='flex flex-wrap items-center gap-2'>
-                <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${typeColor}`}>
+                <span
+                  className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${typeColor}`}
+                >
                   {typeName}
                 </span>
                 <span className='text-xs text-gray-500 dark:text-gray-400'>
@@ -565,7 +679,9 @@ export default function PansouSearch({
                 </span>
                 {groupProgress && (
                   <span className='text-xs text-gray-500 dark:text-gray-400'>
-                    进度 {groupProgress.done}/{groupProgress.total} · 有效 {groupProgress.valid} · 失效 {groupProgress.invalid} · 未知 {groupProgress.unknown + groupProgress.rateLimited}
+                    进度 {groupProgress.done}/{groupProgress.total} · 有效{' '}
+                    {groupProgress.valid} · 失效 {groupProgress.invalid} · 未知{' '}
+                    {groupProgress.unknown + groupProgress.rateLimited}
                   </span>
                 )}
                 {checkable && (
@@ -620,7 +736,10 @@ export default function PansouSearch({
                         </div>
                         {link.password && (
                           <div className='text-xs text-gray-600 dark:text-gray-400 mt-1'>
-                            提取码: <span className='font-mono font-semibold'>{link.password}</span>
+                            提取码:{' '}
+                            <span className='font-mono font-semibold'>
+                              {link.password}
+                            </span>
                           </div>
                         )}
                       </div>
@@ -628,21 +747,37 @@ export default function PansouSearch({
                       {/* 操作按钮 */}
                       <div className='flex items-center gap-1 flex-shrink-0'>
                         {(() => {
-                          const checkResult = getCheckResultForUrl(cloudType, link.url);
+                          const checkResult = getCheckResultForUrl(
+                            cloudType,
+                            link.url
+                          );
                           if (!checkResult) return null;
                           return (
                             <span
-                              className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${CHECK_STATUS_STYLE[checkResult.status]}`}
+                              className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
-                              title={checkResult.reason || CHECK_STATUS_TEXT[checkResult.status]}
+                                CHECK_STATUS_STYLE[checkResult.status]
+                              }`}
+                              title={
+                                checkResult.reason ||
+                                CHECK_STATUS_TEXT[checkResult.status]
+                              }
                             >
                               {CHECK_STATUS_TEXT[checkResult.status]}
                             </span>
                           );
                         })()}
-                        {(cloudType === 'quark' || cloudType === 'mobile' || cloudType === 'baidu' || cloudType === 'tianyi' || cloudType === '123' || cloudType === 'uc' || cloudType === '115') && (
+                        {(cloudType === 'quark' ||
+                          cloudType === 'mobile' ||
+                          cloudType === 'baidu' ||
+                          cloudType === 'tianyi' ||
+                          cloudType === '123' ||
+                          cloudType === 'uc' ||
+                          cloudType === '115') && (
                           <>
                             <button
-                              onClick={() => handleNetdiskInstantPlay(cloudType, link)}
+                              onClick={() =>
+                                handleNetdiskInstantPlay(cloudType, link)
+                              }
                               disabled={playingUrl === link.url}
                               className='px-2 py-1 rounded-md bg-green-600 hover:bg-green-700 text-white text-xs transition-colors disabled:opacity-60'
                               title='播放'
@@ -656,21 +791,29 @@ export default function PansouSearch({
                                 className='px-2 py-1 rounded-md bg-purple-600 hover:bg-purple-700 text-white text-xs transition-colors disabled:opacity-60'
                                 title='转存到配置目录'
                               >
-                                {transferingUrl === link.url ? '转存中...' : '转存'}
+                                {transferingUrl === link.url
+                                  ? '转存中...'
+                                  : '转存'}
                               </button>
                             )}
                           </>
                         )}
                         <button
-                          onClick={() => handleCopy(
+                          onClick={() =>
-                            link.password ? `${link.url}\n提取码: ${link.password}` : link.url,
+                            handleCopy(
-                            link.url
+                              link.password
-                          )}
+                                ? `${link.url}\n提取码: ${link.password}`
+                                : link.url,
+                              link.url
+                            )
+                          }
                           className='p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors'
                           title='复制链接'
                         >
                           {copiedUrl === link.url ? (
-                            <span className='text-xs text-green-600 dark:text-green-400'>已复制</span>
+                            <span className='text-xs text-green-600 dark:text-green-400'>
+                              已复制
+                            </span>
                           ) : (
                             <Copy className='h-4 w-4 text-gray-600 dark:text-gray-400' />
                           )}
@@ -687,16 +830,23 @@ export default function PansouSearch({
 
                     {/* 来源和时间 */}
                     <div className='flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400'>
-                      {link.source && (
+                      {link.source && <span>来源: {link.source}</span>}
-                        <span>来源: {link.source}</span>
-                      )}
                       {link.datetime && (
-                        <span>{new Date(link.datetime).toLocaleDateString()}</span>
+                        <span>
+                          {new Date(link.datetime).toLocaleDateString()}
+                        </span>
                       )}
                       {(() => {
-                        const checkResult = getCheckResultForUrl(cloudType, link.url);
+                        const checkResult = getCheckResultForUrl(
+                          cloudType,
+                          link.url
+                        );
                         if (!checkResult?.reason) return null;
-                        return <span className='truncate'>检测结果: {checkResult.reason}</span>;
+                        return (
+                          <span className='truncate'>
+                            检测结果: {checkResult.reason}
+                          </span>
+                        );
                       })()}
                     </div>
 
@@ -726,9 +876,7 @@ export default function PansouSearch({
 
   return (
     <>
-      <div className='space-y-6'>
+      <div className='space-y-6'>{renderBody()}</div>
-        {renderBody()}
-      </div>
       {toast && <Toast {...toast} />}
     </>
   );