671 lines
23 KiB
Plaintext
671 lines
23 KiB
Plaintext
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { useToast } from '@/hooks/useToast'
|
||
import ToastBubble from './ToastBubble'
|
||
|
||
interface NetworkDiagnoseModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
}
|
||
|
||
interface TestResult {
|
||
type: 'download' | 'upload' | 'storage' | 'preview-image' | 'preview-video' | 'preview-audio' | 'dns' | 'connection'
|
||
status: 'testing' | 'success' | 'error' | 'warning'
|
||
speed?: number
|
||
message?: string
|
||
details?: {
|
||
dnsTime?: number
|
||
connectTime?: number
|
||
ttfb?: number // Time To First Byte
|
||
downloadTime?: number
|
||
totalTime?: number
|
||
fileSize?: number
|
||
url?: string
|
||
}
|
||
}
|
||
|
||
export default function NetworkDiagnoseModal({ isOpen, onClose }: NetworkDiagnoseModalProps) {
|
||
const [testing, setTesting] = useState(false)
|
||
const [results, setResults] = useState<TestResult[]>([])
|
||
const [copied, setCopied] = useState(false)
|
||
const { toast, showToast } = useToast()
|
||
|
||
// 格式化速度
|
||
const formatSpeed = (bytesPerSecond: number) => {
|
||
if (bytesPerSecond < 1024) return `${bytesPerSecond.toFixed(2)} B/s`
|
||
if (bytesPerSecond < 1024 * 1024) return `${(bytesPerSecond / 1024).toFixed(2)} KB/s`
|
||
return `${(bytesPerSecond / 1024 / 1024).toFixed(2)} MB/s`
|
||
}
|
||
|
||
// 下载测速
|
||
const testDownloadSpeed = async (): Promise<TestResult> => {
|
||
try {
|
||
const testFileSize = 1024 * 1024 // 1MB
|
||
const startTime = Date.now()
|
||
|
||
const response = await fetch('/api/network/test-download', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ size: testFileSize })
|
||
})
|
||
|
||
if (!response.ok) throw new Error('下载测试失败')
|
||
|
||
const blob = await response.blob()
|
||
const endTime = Date.now()
|
||
const duration = (endTime - startTime) / 1000 // 秒
|
||
const speed = blob.size / duration // 字节/秒
|
||
|
||
return {
|
||
type: 'download',
|
||
status: 'success',
|
||
speed,
|
||
message: `下载速度: ${formatSpeed(speed)}`
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'download',
|
||
status: 'error',
|
||
message: '下载测试失败'
|
||
}
|
||
}
|
||
}
|
||
|
||
// 上传测速
|
||
const testUploadSpeed = async (): Promise<TestResult> => {
|
||
try {
|
||
const testData = new Blob([new ArrayBuffer(1024 * 1024)]) // 1MB
|
||
const formData = new FormData()
|
||
formData.append('file', testData, 'test.bin')
|
||
|
||
const startTime = Date.now()
|
||
|
||
const response = await fetch('/api/network/test-upload', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
|
||
if (!response.ok) throw new Error('上传测试失败')
|
||
|
||
const endTime = Date.now()
|
||
const duration = (endTime - startTime) / 1000 // 秒
|
||
const speed = testData.size / duration // 字节/秒
|
||
|
||
return {
|
||
type: 'upload',
|
||
status: 'success',
|
||
speed,
|
||
message: `上传速度: ${formatSpeed(speed)}`
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'upload',
|
||
status: 'error',
|
||
message: '上传测试失败'
|
||
}
|
||
}
|
||
}
|
||
|
||
// 存储连通性测试
|
||
const testStorageConnectivity = async (): Promise<TestResult> => {
|
||
try {
|
||
const response = await fetch('/api/network/test-storage')
|
||
|
||
if (!response.ok) throw new Error('存储连通性测试失败')
|
||
|
||
const data = await response.json()
|
||
|
||
return {
|
||
type: 'storage',
|
||
status: 'success',
|
||
message: data.message || '存储服务连接正常'
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'storage',
|
||
status: 'error',
|
||
message: '存储服务连接失败'
|
||
}
|
||
}
|
||
}
|
||
|
||
// 预览图片加载测试
|
||
const testPreviewImageLoad = async (): Promise<TestResult> => {
|
||
try {
|
||
// 获取一个真实的预览图片URL
|
||
const response = await fetch('/api/materials?pageSize=1&materialType=3D场景')
|
||
if (!response.ok) throw new Error('获取素材失败')
|
||
|
||
const data = await response.json()
|
||
const materials = data.materials || data
|
||
if (!materials || materials.length === 0) {
|
||
return {
|
||
type: 'preview-image',
|
||
status: 'warning',
|
||
message: '没有可测试的预览图片'
|
||
}
|
||
}
|
||
|
||
const imageUrl = materials[0].previewUrl
|
||
if (!imageUrl) {
|
||
return {
|
||
type: 'preview-image',
|
||
status: 'warning',
|
||
message: '素材没有预览图'
|
||
}
|
||
}
|
||
|
||
// 使用Performance API测量加载时间
|
||
const startTime = performance.now()
|
||
const img = new Image()
|
||
|
||
await new Promise((resolve, reject) => {
|
||
img.onload = resolve
|
||
img.onerror = reject
|
||
img.src = imageUrl
|
||
})
|
||
|
||
const endTime = performance.now()
|
||
const loadTime = endTime - startTime
|
||
|
||
// 估算文件大小（通过fetch获取）
|
||
const sizeResponse = await fetch(imageUrl, { method: 'HEAD' })
|
||
const fileSize = parseInt(sizeResponse.headers.get('content-length') || '0')
|
||
const speed = fileSize > 0 ? (fileSize / (loadTime / 1000)) : 0
|
||
|
||
return {
|
||
type: 'preview-image',
|
||
status: loadTime > 3000 ? 'warning' : 'success',
|
||
speed,
|
||
message: `加载时间: ${(loadTime / 1000).toFixed(2)}秒 ${fileSize > 0 ? `(${formatSpeed(speed)})` : ''}`,
|
||
details: {
|
||
totalTime: loadTime,
|
||
fileSize,
|
||
url: imageUrl
|
||
}
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'preview-image',
|
||
status: 'error',
|
||
message: `预览图片加载失败: ${error instanceof Error ? error.message : '未知错误'}`
|
||
}
|
||
}
|
||
}
|
||
|
||
// 预览视频加载测试
|
||
const testPreviewVideoLoad = async (): Promise<TestResult> => {
|
||
try {
|
||
// 获取一个真实的视频素材
|
||
const response = await fetch('/api/materials?pageSize=1&materialType=主图视频')
|
||
if (!response.ok) throw new Error('获取视频素材失败')
|
||
|
||
const data = await response.json()
|
||
const materials = data.materials || data
|
||
if (!materials || materials.length === 0) {
|
||
return {
|
||
type: 'preview-video',
|
||
status: 'warning',
|
||
message: '没有可测试的视频素材'
|
||
}
|
||
}
|
||
|
||
const videoUrl = materials[0].videoPreviewClipUrl || materials[0].videoPreview540Url || materials[0].videoSourceUrl
|
||
if (!videoUrl) {
|
||
return {
|
||
type: 'preview-video',
|
||
status: 'warning',
|
||
message: '视频素材没有预览URL'
|
||
}
|
||
}
|
||
|
||
const startTime = performance.now()
|
||
|
||
// 测试视频元数据加载（首字节时间）
|
||
const video = document.createElement('video')
|
||
video.preload = 'metadata'
|
||
|
||
await new Promise((resolve, reject) => {
|
||
video.onloadedmetadata = resolve
|
||
video.onerror = reject
|
||
video.src = videoUrl
|
||
})
|
||
|
||
const metadataTime = performance.now() - startTime
|
||
|
||
// 获取文件大小
|
||
const sizeResponse = await fetch(videoUrl, { method: 'HEAD' })
|
||
const fileSize = parseInt(sizeResponse.headers.get('content-length') || '0')
|
||
|
||
return {
|
||
type: 'preview-video',
|
||
status: metadataTime > 5000 ? 'warning' : 'success',
|
||
message: `元数据加载: ${(metadataTime / 1000).toFixed(2)}秒 ${fileSize > 0 ? `(文件: ${(fileSize / 1024 / 1024).toFixed(2)}MB)` : ''}`,
|
||
details: {
|
||
ttfb: metadataTime,
|
||
totalTime: metadataTime,
|
||
fileSize,
|
||
url: videoUrl
|
||
}
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'preview-video',
|
||
status: 'error',
|
||
message: `视频加载失败: ${error instanceof Error ? error.message : '未知错误'}`
|
||
}
|
||
}
|
||
}
|
||
|
||
// 音频文件加载测试
|
||
const testPreviewAudioLoad = async (): Promise<TestResult> => {
|
||
try {
|
||
// 获取一个真实的音频素材
|
||
const response = await fetch('/api/materials?pageSize=1&materialType=音乐')
|
||
if (!response.ok) throw new Error('获取音频素材失败')
|
||
|
||
const data = await response.json()
|
||
const materials = data.materials || data
|
||
if (!materials || materials.length === 0) {
|
||
return {
|
||
type: 'preview-audio',
|
||
status: 'warning',
|
||
message: '没有可测试的音频素材'
|
||
}
|
||
}
|
||
|
||
const audioUrl = materials[0].zipFileName
|
||
if (!audioUrl) {
|
||
return {
|
||
type: 'preview-audio',
|
||
status: 'warning',
|
||
message: '音频素材没有URL'
|
||
}
|
||
}
|
||
|
||
const startTime = performance.now()
|
||
|
||
// 测试音频元数据加载
|
||
const audio = new Audio()
|
||
audio.preload = 'metadata'
|
||
|
||
await new Promise((resolve, reject) => {
|
||
audio.onloadedmetadata = resolve
|
||
audio.onerror = reject
|
||
audio.src = audioUrl
|
||
})
|
||
|
||
const metadataTime = performance.now() - startTime
|
||
|
||
// 获取文件大小
|
||
const sizeResponse = await fetch(audioUrl, { method: 'HEAD' })
|
||
const fileSize = parseInt(sizeResponse.headers.get('content-length') || '0')
|
||
|
||
return {
|
||
type: 'preview-audio',
|
||
status: metadataTime > 3000 ? 'warning' : 'success',
|
||
message: `元数据加载: ${(metadataTime / 1000).toFixed(2)}秒 ${fileSize > 0 ? `(文件: ${(fileSize / 1024 / 1024).toFixed(2)}MB)` : ''}`,
|
||
details: {
|
||
ttfb: metadataTime,
|
||
totalTime: metadataTime,
|
||
fileSize,
|
||
url: audioUrl
|
||
}
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'preview-audio',
|
||
status: 'error',
|
||
message: `音频加载失败: ${error instanceof Error ? error.message : '未知错误'}`
|
||
}
|
||
}
|
||
}
|
||
|
||
// DNS和连接测试
|
||
const testDNSAndConnection = async (): Promise<TestResult> => {
|
||
try {
|
||
const testUrl = `${window.location.origin}/api/network-status`
|
||
|
||
// 使用Resource Timing API获取详细的网络时序
|
||
const startMark = `dns-test-${Date.now()}`
|
||
performance.mark(startMark)
|
||
|
||
const startTime = performance.now()
|
||
const response = await fetch(testUrl, { cache: 'no-store' })
|
||
const endTime = performance.now()
|
||
|
||
if (!response.ok) throw new Error('连接测试失败')
|
||
|
||
// 尝试获取Resource Timing信息
|
||
const entries = performance.getEntriesByType('resource') as PerformanceResourceTiming[]
|
||
const entry = entries.find(e => e.name.includes('/api/network-status'))
|
||
|
||
let dnsTime = 0
|
||
let connectTime = 0
|
||
let ttfb = 0
|
||
|
||
if (entry) {
|
||
dnsTime = entry.domainLookupEnd - entry.domainLookupStart
|
||
connectTime = entry.connectEnd - entry.connectStart
|
||
ttfb = entry.responseStart - entry.requestStart
|
||
}
|
||
|
||
const totalTime = endTime - startTime
|
||
|
||
return {
|
||
type: 'connection',
|
||
status: totalTime > 1000 ? 'warning' : 'success',
|
||
message: `总耗时: ${totalTime.toFixed(0)}ms`,
|
||
details: {
|
||
dnsTime: dnsTime > 0 ? dnsTime : undefined,
|
||
connectTime: connectTime > 0 ? connectTime : undefined,
|
||
ttfb: ttfb > 0 ? ttfb : undefined,
|
||
totalTime
|
||
}
|
||
}
|
||
} catch (error) {
|
||
return {
|
||
type: 'connection',
|
||
status: 'error',
|
||
message: `连接测试失败: ${error instanceof Error ? error.message : '未知错误'}`
|
||
}
|
||
}
|
||
}
|
||
|
||
// 开始诊断
|
||
const startDiagnose = async () => {
|
||
setTesting(true)
|
||
setResults([])
|
||
|
||
// 1. DNS和连接测试
|
||
setResults([{ type: 'connection', status: 'testing' }])
|
||
const connectionResult = await testDNSAndConnection()
|
||
setResults([connectionResult])
|
||
|
||
// 2. 下载测速
|
||
setResults(prev => [...prev, { type: 'download', status: 'testing' }])
|
||
const downloadResult = await testDownloadSpeed()
|
||
setResults(prev => [...prev.slice(0, -1), downloadResult])
|
||
|
||
// 3. 上传测速
|
||
setResults(prev => [...prev, { type: 'upload', status: 'testing' }])
|
||
const uploadResult = await testUploadSpeed()
|
||
setResults(prev => [...prev.slice(0, -1), uploadResult])
|
||
|
||
// 4. 存储连通性
|
||
setResults(prev => [...prev, { type: 'storage', status: 'testing' }])
|
||
const storageResult = await testStorageConnectivity()
|
||
setResults(prev => [...prev.slice(0, -1), storageResult])
|
||
|
||
// 5. 预览图片加载测试
|
||
setResults(prev => [...prev, { type: 'preview-image', status: 'testing' }])
|
||
const imageResult = await testPreviewImageLoad()
|
||
setResults(prev => [...prev.slice(0, -1), imageResult])
|
||
|
||
// 6. 预览视频加载测试
|
||
setResults(prev => [...prev, { type: 'preview-video', status: 'testing' }])
|
||
const videoResult = await testPreviewVideoLoad()
|
||
setResults(prev => [...prev.slice(0, -1), videoResult])
|
||
|
||
// 7. 音频文件加载测试
|
||
setResults(prev => [...prev, { type: 'preview-audio', status: 'testing' }])
|
||
const audioResult = await testPreviewAudioLoad()
|
||
setResults(prev => [...prev.slice(0, -1), audioResult])
|
||
|
||
setTesting(false)
|
||
}
|
||
|
||
// 复制结果（包含完整的诊断信息，用于AI分析）
|
||
const copyResults = async () => {
|
||
if (results.length === 0) return
|
||
|
||
// 生成详细的诊断报告
|
||
const timestamp = new Date().toLocaleString('zh-CN')
|
||
const report = [
|
||
'=== 网络诊断报告 ===',
|
||
`时间: ${timestamp}`,
|
||
`浏览器: ${navigator.userAgent}`,
|
||
`当前URL: ${window.location.href}`,
|
||
'',
|
||
'=== 测试结果 ===',
|
||
...results.map(r => {
|
||
const typeMap: Record<string, string> = {
|
||
'download': '下载测速',
|
||
'upload': '上传测速',
|
||
'storage': '存储连通性',
|
||
'preview-image': '预览图片加载',
|
||
'preview-video': '预览视频加载',
|
||
'preview-audio': '音频文件加载',
|
||
'connection': 'DNS和连接测试'
|
||
}
|
||
const typeText = typeMap[r.type] || r.type
|
||
|
||
const statusText = r.status === 'success' ? '✓ 成功' : r.status === 'error' ? '✗ 失败' : r.status === 'warning' ? '⚠ 警告' : '⋯ 测试中'
|
||
|
||
let detailsText = ''
|
||
if (r.details) {
|
||
const details = []
|
||
if (r.details.dnsTime) details.push(`DNS解析: ${r.details.dnsTime.toFixed(0)}ms`)
|
||
if (r.details.connectTime) details.push(`TCP连接: ${r.details.connectTime.toFixed(0)}ms`)
|
||
if (r.details.ttfb) details.push(`首字节时间: ${r.details.ttfb.toFixed(0)}ms`)
|
||
if (r.details.totalTime) details.push(`总耗时: ${r.details.totalTime.toFixed(0)}ms`)
|
||
if (r.details.fileSize) details.push(`文件大小: ${(r.details.fileSize / 1024 / 1024).toFixed(2)}MB`)
|
||
if (r.details.url) details.push(`URL: ${r.details.url}`)
|
||
if (details.length > 0) {
|
||
detailsText = '\n 详细信息: ' + details.join(', ')
|
||
}
|
||
}
|
||
|
||
return `${typeText}: ${statusText}\n ${r.message || '测试中...'}${detailsText}`
|
||
}),
|
||
'',
|
||
'=== 网络环境信息 ===',
|
||
`在线状态: ${navigator.onLine ? '在线' : '离线'}`,
|
||
`连接类型: ${(navigator as any).connection?.effectiveType || '未知'}`,
|
||
`下行速度: ${(navigator as any).connection?.downlink || '未知'} Mbps`,
|
||
`RTT延迟: ${(navigator as any).connection?.rtt || '未知'} ms`,
|
||
'',
|
||
'=== 性能分析 ===',
|
||
...results.filter(r => r.status === 'warning' || r.status === 'error').map(r => {
|
||
const typeMap: Record<string, string> = {
|
||
'preview-image': '预览图片',
|
||
'preview-video': '预览视频',
|
||
'preview-audio': '音频文件',
|
||
'connection': '网络连接'
|
||
}
|
||
const typeText = typeMap[r.type] || r.type
|
||
return `⚠ ${typeText}加载较慢或失败，可能影响用户体验`
|
||
}),
|
||
'',
|
||
'提示: 请将此报告提供给技术支持以便快速定位问题'
|
||
].join('\n')
|
||
|
||
try {
|
||
await navigator.clipboard.writeText(report)
|
||
setCopied(true)
|
||
setTimeout(() => setCopied(false), 2000)
|
||
} catch (error) {
|
||
console.error('复制失败，尝试降级方案:', error)
|
||
// 降级方案：使用传统方法复制
|
||
const textarea = document.createElement('textarea')
|
||
textarea.value = report
|
||
textarea.style.position = 'fixed'
|
||
textarea.style.left = '-999999px'
|
||
textarea.style.top = '-999999px'
|
||
document.body.appendChild(textarea)
|
||
textarea.focus()
|
||
textarea.select()
|
||
try {
|
||
const successful = document.execCommand('copy')
|
||
if (successful) {
|
||
setCopied(true)
|
||
setTimeout(() => setCopied(false), 2000)
|
||
}
|
||
} catch (err) {
|
||
console.error('降级复制也失败:', err)
|
||
showToast('复制失败，请手动复制结果', { variant: 'error' })
|
||
}
|
||
document.body.removeChild(textarea)
|
||
}
|
||
}
|
||
|
||
const getStatusIcon = (status: string) => {
|
||
switch (status) {
|
||
case 'testing':
|
||
return (
|
||
<svg className="w-5 h-5 text-blue-500 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||
</svg>
|
||
)
|
||
case 'success':
|
||
return (
|
||
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)
|
||
case 'warning':
|
||
return (
|
||
<svg className="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
)
|
||
case 'error':
|
||
return (
|
||
<svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
)
|
||
default:
|
||
return null
|
||
}
|
||
}
|
||
|
||
const getTypeText = (type: string) => {
|
||
switch (type) {
|
||
case 'download':
|
||
return '下载测速'
|
||
case 'upload':
|
||
return '上传测速'
|
||
case 'storage':
|
||
return '存储连通性'
|
||
case 'preview-image':
|
||
return '预览图片加载'
|
||
case 'preview-video':
|
||
return '预览视频加载'
|
||
case 'preview-audio':
|
||
return '音频文件加载'
|
||
case 'connection':
|
||
return 'DNS和连接'
|
||
default:
|
||
return ''
|
||
}
|
||
}
|
||
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||
<div className="bg-white dark:bg-gray-800 rounded-2xl max-w-md w-full shadow-2xl">
|
||
{/* Header */}
|
||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">网络诊断</h2>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-2xl leading-none"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
||
测试网络连接速度和存储服务状态
|
||
</p>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-6 space-y-4 max-h-[60vh] overflow-y-auto">
|
||
{results.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<svg className="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<p className="text-gray-500 dark:text-gray-400 mb-2">
|
||
点击下方按钮开始诊断
|
||
</p>
|
||
<p className="text-xs text-gray-400 dark:text-gray-500">
|
||
将测试网络速度、预览文件加载等性能指标
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{results.map((result, index) => (
|
||
<div
|
||
key={index}
|
||
className={`flex items-start gap-3 p-4 rounded-xl transition-all ${
|
||
result.status === 'warning'
|
||
? 'bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800'
|
||
: result.status === 'error'
|
||
? 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
|
||
: 'bg-gray-50 dark:bg-gray-700'
|
||
}`}
|
||
>
|
||
<div className="flex-shrink-0 mt-0.5">
|
||
{getStatusIcon(result.status)}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||
{getTypeText(result.type)}
|
||
</p>
|
||
<p className="text-xs text-gray-600 dark:text-gray-300 mt-1">
|
||
{result.message || '测试中...'}
|
||
</p>
|
||
{result.details && (
|
||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400 space-y-0.5">
|
||
{result.details.dnsTime !== undefined && (
|
||
<div>DNS解析: {result.details.dnsTime.toFixed(0)}ms</div>
|
||
)}
|
||
{result.details.connectTime !== undefined && (
|
||
<div>TCP连接: {result.details.connectTime.toFixed(0)}ms</div>
|
||
)}
|
||
{result.details.ttfb !== undefined && (
|
||
<div>首字节时间: {result.details.ttfb.toFixed(0)}ms</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="p-6 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||
<button
|
||
onClick={startDiagnose}
|
||
disabled={testing}
|
||
className="w-full btn-primary disabled:opacity-50"
|
||
>
|
||
{testing ? '诊断中...' : results.length > 0 ? '重新诊断' : '开始诊断'}
|
||
</button>
|
||
|
||
{results.length > 0 && !testing && (
|
||
<button
|
||
onClick={copyResults}
|
||
className="w-full py-3 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||
>
|
||
{copied ? '已复制' : '复制结果'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 统一的Toast提示 */}
|
||
{toast && toast.show && (
|
||
<ToastBubble message={toast.message} variant={toast.variant} />
|
||
)}
|
||
</div>
|
||
)
|
||
}
|