feat: add Playwright browser download progress dialog component
This commit is contained in:
Misaka_Company
263
src/renderer/src/components/PlaywrightDownloadDialog.tsx
Normal file
263
src/renderer/src/components/PlaywrightDownloadDialog.tsx
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
import React, { useEffect, useState, useCallback } from 'react'
|
||||||
|
import { DownloadCloud, LoaderCircle, X } from 'lucide-react'
|
||||||
|
import Modal from './ui/Modal'
|
||||||
|
interface DownloadProgress {
|
||||||
|
percent: number // 0-100
|
||||||
|
downloadedBytes: number
|
||||||
|
totalBytes: number
|
||||||
|
currentFile: string
|
||||||
|
speed: number // bytes/s
|
||||||
|
eta?: number // seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PlaywrightDownloadDialogProps {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
onDownloadComplete: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlaywrightDownloadDialog({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onDownloadComplete
|
||||||
|
}: PlaywrightDownloadDialogProps): React.JSX.Element {
|
||||||
|
const [progress, setProgress] = useState<DownloadProgress | null>(null)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [isDownloading, setIsDownloading] = useState(false)
|
||||||
|
const [showCancelConfirm, setShowCancelConfirm] = useState(false)
|
||||||
|
|
||||||
|
// Format bytes to human-readable string
|
||||||
|
const formatBytes = useCallback((bytes: number): string => {
|
||||||
|
if (bytes === 0) return '0 B'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Format ETA to human-readable string
|
||||||
|
const formatETA = useCallback((seconds: number): string => {
|
||||||
|
if (seconds < 0 || !Number.isFinite(seconds)) return '计算中...'
|
||||||
|
if (seconds < 60) return `${Math.round(seconds)}秒`
|
||||||
|
const mins = Math.floor(seconds / 60)
|
||||||
|
const secs = Math.round(seconds % 60)
|
||||||
|
return `${mins}分${secs}秒`
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Subscribe to progress events
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return
|
||||||
|
|
||||||
|
const unsubscribe = window.electron.playwrightBrowser.onProgress((data) => {
|
||||||
|
setProgress(data)
|
||||||
|
setError(null)
|
||||||
|
})
|
||||||
|
|
||||||
|
return unsubscribe
|
||||||
|
}, [isOpen])
|
||||||
|
|
||||||
|
// Start download when dialog opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return
|
||||||
|
|
||||||
|
let mounted = true
|
||||||
|
setIsDownloading(true)
|
||||||
|
setError(null)
|
||||||
|
setProgress(null)
|
||||||
|
|
||||||
|
const startDownload = async () => {
|
||||||
|
try {
|
||||||
|
const result = await window.electron.playwrightBrowser.download()
|
||||||
|
if (mounted) {
|
||||||
|
if (result.success) {
|
||||||
|
setIsDownloading(false)
|
||||||
|
onDownloadComplete()
|
||||||
|
} else {
|
||||||
|
setError(result.error || '下载失败')
|
||||||
|
setIsDownloading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (mounted) {
|
||||||
|
setError(err instanceof Error ? err.message : '下载失败')
|
||||||
|
setIsDownloading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void startDownload()
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
mounted = false
|
||||||
|
}
|
||||||
|
}, [isOpen, onDownloadComplete])
|
||||||
|
|
||||||
|
const handleCancel = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
await window.electron.playwrightBrowser.cancel()
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to cancel download:', err)
|
||||||
|
} finally {
|
||||||
|
setShowCancelConfirm(false)
|
||||||
|
setIsDownloading(false)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}, [onClose])
|
||||||
|
|
||||||
|
const handleConfirmCancel = useCallback(() => {
|
||||||
|
void handleCancel()
|
||||||
|
}, [handleCancel])
|
||||||
|
|
||||||
|
const handleCancelDownloadClick = useCallback(() => {
|
||||||
|
setShowCancelConfirm(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleCloseConfirm = useCallback(() => {
|
||||||
|
setShowCancelConfirm(false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={isDownloading ? () => undefined : onClose}
|
||||||
|
title="下载 Playwright 浏览器"
|
||||||
|
size="lg"
|
||||||
|
disableBackdropClick={isDownloading}
|
||||||
|
disableEscapeKey={isDownloading}
|
||||||
|
showCloseButton={!isDownloading}
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Progress Section */}
|
||||||
|
{isDownloading && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-600">下载进度</span>
|
||||||
|
<span className="font-semibold text-blue-600">{progress?.percent ?? 0}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-3 w-full overflow-hidden rounded-full bg-slate-200">
|
||||||
|
<div
|
||||||
|
className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300 ease-out"
|
||||||
|
style={{ width: `${progress?.percent ?? 0}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Current File */}
|
||||||
|
{progress?.currentFile && (
|
||||||
|
<div className="rounded-lg bg-slate-50 px-4 py-3">
|
||||||
|
<div className="text-xs font-medium text-slate-500">当前文件</div>
|
||||||
|
<div
|
||||||
|
className="mt-1 truncate text-sm text-slate-700"
|
||||||
|
title={progress.currentFile}
|
||||||
|
>
|
||||||
|
{progress.currentFile}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="rounded-lg border border-slate-200 px-4 py-3">
|
||||||
|
<div className="text-xs text-slate-500">已下载</div>
|
||||||
|
<div className="mt-1 text-lg font-semibold text-slate-900">
|
||||||
|
{progress ? formatBytes(progress.downloadedBytes) : '0 B'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-lg border border-slate-200 px-4 py-3">
|
||||||
|
<div className="text-xs text-slate-500">总大小</div>
|
||||||
|
<div className="mt-1 text-lg font-semibold text-slate-900">
|
||||||
|
{progress ? formatBytes(progress.totalBytes) : '计算中...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-lg border border-slate-200 px-4 py-3">
|
||||||
|
<div className="text-xs text-slate-500">速度</div>
|
||||||
|
<div className="mt-1 text-lg font-semibold text-slate-900">
|
||||||
|
{progress?.speed ? `${formatBytes(progress.speed)}/秒` : '计算中...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-lg border border-slate-200 px-4 py-3">
|
||||||
|
<div className="text-xs text-slate-500">剩余时间</div>
|
||||||
|
<div className="mt-1 text-lg font-semibold text-slate-900">
|
||||||
|
{progress?.eta !== undefined ? formatETA(progress.eta) : '计算中...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cancel Button */}
|
||||||
|
<div className="flex justify-center pt-2">
|
||||||
|
<button
|
||||||
|
onClick={handleCancelDownloadClick}
|
||||||
|
className="inline-flex items-center gap-2 rounded-md border border-rose-200 bg-rose-50 px-4 py-2 text-sm text-rose-700 hover:bg-rose-100"
|
||||||
|
>
|
||||||
|
<X size={16} />
|
||||||
|
取消下载
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error Section */}
|
||||||
|
{error && (
|
||||||
|
<div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
||||||
|
<div className="font-medium">下载失败</div>
|
||||||
|
<div className="mt-1">{error}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Section (shown briefly before closing) */}
|
||||||
|
{!isDownloading && !error && progress?.percent === 100 && (
|
||||||
|
<div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DownloadCloud size={18} />
|
||||||
|
<span className="font-medium">下载完成</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-1">Playwright 浏览器已准备就绪。</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Initial Loading State */}
|
||||||
|
{isDownloading && !progress && (
|
||||||
|
<div className="flex flex-col items-center justify-center py-8">
|
||||||
|
<LoaderCircle size={48} className="animate-spin text-blue-500" />
|
||||||
|
<div className="mt-4 text-sm text-slate-600">正在初始化下载...</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* Cancel Confirmation Dialog */}
|
||||||
|
<Modal
|
||||||
|
isOpen={showCancelConfirm}
|
||||||
|
onClose={handleCloseConfirm}
|
||||||
|
title="确认取消"
|
||||||
|
size="md"
|
||||||
|
isAlertDialog
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
|
||||||
|
<div className="font-medium">确定要取消下载吗？</div>
|
||||||
|
<div className="mt-1">这将退出应用程序，您需要重新启动来继续下载。</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<button
|
||||||
|
onClick={handleCloseConfirm}
|
||||||
|
className="rounded-md border border-slate-200 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
继续下载
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleConfirmCancel}
|
||||||
|
className="inline-flex items-center gap-2 rounded-md bg-rose-600 px-4 py-2 text-sm font-medium text-white hover:bg-rose-700"
|
||||||
|
>
|
||||||
|
<X size={16} />
|
||||||
|
取消并退出
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user