yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

网盘类型选项卡改为单行

Browse Source
This commit is contained in:
mtvpls
2026-05-12 12:16:43 +08:00
parent f56f45d85f
commit 7cf31e6a62
1 changed files with 232 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PansouSearch.tsx
+232 -84
View File
@@ -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',
quark: 'bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200',
aliyun:
'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',
pikpak: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-200',
'115':
'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',
rate_limited: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-200',
unknown:
'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'
: cloudType === 'tianyi'
? '/api/netdisk/tianyi/instant-play'
: cloudType === '115'
? '/api/netdisk/115/instant-play'
: cloudType === 'uc'
? '/api/netdisk/uc/instant-play'
: cloudType === '123'
? '/api/netdisk/123/instant-play'
: '/api/netdisk/quark/instant-play';
? '/api/netdisk/baidu/instant-play'
: cloudType === 'tianyi'
? '/api/netdisk/tianyi/instant-play'
: cloudType === '115'
? '/api/netdisk/115/instant-play'
: cloudType === 'uc'
? '/api/netdisk/uc/instant-play'
: cloudType === '123'
? '/api/netdisk/123/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'
? cloudTypes
: cloudTypes.filter(type => type === selectedType);
const filteredCloudTypes =
selectedType === 'all'
? 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'>
<button
onClick={() => setSelectedType('all')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
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;
<div className='space-y-2'>
<h3 className='text-sm font-semibold text-gray-700 dark:text-gray-200'>
网盘类型
</h3>
<div className='relative'>
<div
ref={typeScrollContainerRef}
className='overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing'
onMouseDown={handleTypeMouseDown}
onMouseLeave={handleTypeMouseLeave}
onMouseUp={handleTypeMouseUp}
onMouseMove={handleTypeMouseMove}
>
<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 (
<button
key={type}
onClick={() => setSelectedType(type)}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
selectedType === type
? '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'
}`}
>
{typeName} ({count})
</button>
);
})}
return (
<button
key={type}
onClick={() => setSelectedType(type)}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap flex-shrink-0 ${
selectedType === type
? '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'
}`}
>
{typeName} ({count})
</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]}`}
title={checkResult.reason || CHECK_STATUS_TEXT[checkResult.status]}
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
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(
link.password ? `${link.url}\n提取码: ${link.password}` : link.url,
link.url
)}
onClick={() =>
handleCopy(
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 && (
<span>来源: {link.source}</span>
)}
{link.source && <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'>
{renderBody()}
</div>
<div className='space-y-6'>{renderBody()}</div>
{toast && <Toast {...toast} />}
</>
);