feat: Initialize core application structure with backend configuration, database, API, and a comprehensive frontend UI for account pooling and management.
This commit is contained in:
322
frontend/src/pages/Cleaner.tsx
Normal file
322
frontend/src/pages/Cleaner.tsx
Normal file
@@ -0,0 +1,322 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Trash2, Clock, Loader2, Save, RefreshCw, CheckCircle, XCircle, ToggleLeft, ToggleRight, AlertTriangle } from 'lucide-react'
|
||||
import { Card, CardHeader, CardTitle, CardContent, Button } from '../components/common'
|
||||
|
||||
interface CleanerStatus {
|
||||
running: boolean
|
||||
enabled: boolean
|
||||
interval: number
|
||||
last_clean_time: string
|
||||
}
|
||||
|
||||
export default function Cleaner() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [cleanEnabled, setCleanEnabled] = useState(false)
|
||||
const [cleanInterval, setCleanInterval] = useState(3600)
|
||||
const [savingClean, setSavingClean] = useState(false)
|
||||
const [cleaning, setCleaning] = useState(false)
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null)
|
||||
const [status, setStatus] = useState<CleanerStatus | null>(null)
|
||||
|
||||
// 加载清理设置
|
||||
const fetchCleanerSettings = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/s2a/cleaner/settings')
|
||||
const data = await res.json()
|
||||
if (data.code === 0 && data.data) {
|
||||
setCleanEnabled(data.data.enabled || false)
|
||||
setCleanInterval(data.data.interval || 3600)
|
||||
setStatus(data.data.status || null)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch cleaner settings:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchCleanerSettings()
|
||||
}, [])
|
||||
|
||||
// 保存清理设置
|
||||
const handleSaveCleanerSettings = async () => {
|
||||
setSavingClean(true)
|
||||
setMessage(null)
|
||||
try {
|
||||
const res = await fetch('/api/s2a/cleaner/settings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
enabled: cleanEnabled,
|
||||
interval: cleanInterval,
|
||||
}),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.code === 0) {
|
||||
setMessage({ type: 'success', text: '清理设置已保存' })
|
||||
// 刷新状态
|
||||
fetchCleanerSettings()
|
||||
} else {
|
||||
setMessage({ type: 'error', text: data.message || '保存失败' })
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: 'error', text: '网络错误' })
|
||||
} finally {
|
||||
setSavingClean(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 手动清理错误账号
|
||||
const handleCleanNow = async () => {
|
||||
if (!confirm('确认立即清理所有错误账号？\n\n此操作将删除 S2A 号池中所有状态为"错误"的账号。')) return
|
||||
setCleaning(true)
|
||||
setMessage(null)
|
||||
try {
|
||||
const res = await fetch('/api/s2a/clean-errors', { method: 'POST' })
|
||||
const data = await res.json()
|
||||
if (data.code === 0) {
|
||||
setMessage({ type: 'success', text: data.data.message || '清理完成' })
|
||||
// 刷新状态
|
||||
fetchCleanerSettings()
|
||||
} else {
|
||||
setMessage({ type: 'error', text: data.message || '清理失败' })
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: 'error', text: '网络错误' })
|
||||
} finally {
|
||||
setCleaning(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间间隔
|
||||
const formatInterval = (seconds: number): string => {
|
||||
if (seconds < 60) return `${seconds} 秒`
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)} 分钟`
|
||||
return `${Math.floor(seconds / 3600)} 小时`
|
||||
}
|
||||
|
||||
// 格式化上次清理时间
|
||||
const formatLastCleanTime = (timeStr: string): string => {
|
||||
if (!timeStr || timeStr === '0001-01-01T00:00:00Z') return '从未执行'
|
||||
try {
|
||||
const date = new Date(timeStr)
|
||||
return date.toLocaleString('zh-CN')
|
||||
} catch {
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
|
||||
<Trash2 className="h-7 w-7 text-red-500" />
|
||||
定期清理
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">自动清理 S2A 号池中的错误账号</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchCleanerSettings}
|
||||
icon={<RefreshCw className="h-4 w-4" />}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSaveCleanerSettings}
|
||||
disabled={savingClean}
|
||||
icon={savingClean ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||
>
|
||||
{savingClean ? '保存中...' : '保存设置'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
{message && (
|
||||
<div className={`p-3 rounded-lg text-sm flex items-center gap-2 ${message.type === 'success'
|
||||
? 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}`}>
|
||||
{message.type === 'success' ? (
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4" />
|
||||
)}
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* 清理状态 */}
|
||||
<Card className="stat-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">清理服务</p>
|
||||
<p className={`text-2xl font-bold ${cleanEnabled ? 'text-green-600' : 'text-slate-400'}`}>
|
||||
{cleanEnabled ? '已启用' : '已禁用'}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`h-12 w-12 rounded-xl flex items-center justify-center ${cleanEnabled ? 'bg-green-100 dark:bg-green-900/30' : 'bg-slate-100 dark:bg-slate-800'
|
||||
}`}>
|
||||
{cleanEnabled ? (
|
||||
<CheckCircle className="h-6 w-6 text-green-500" />
|
||||
) : (
|
||||
<XCircle className="h-6 w-6 text-slate-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 清理间隔 */}
|
||||
<Card className="stat-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">清理间隔</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{formatInterval(cleanInterval)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-12 w-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
|
||||
<Clock className="h-6 w-6 text-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 上次清理 */}
|
||||
<Card className="stat-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">上次清理</p>
|
||||
<p className="text-lg font-medium text-slate-900 dark:text-slate-100">
|
||||
{status ? formatLastCleanTime(status.last_clean_time) : '从未执行'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-12 w-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
|
||||
<Trash2 className="h-6 w-6 text-purple-500" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 清理设置 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trash2 className="h-5 w-5 text-red-500" />
|
||||
清理设置
|
||||
</CardTitle>
|
||||
<button
|
||||
onClick={() => setCleanEnabled(!cleanEnabled)}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{cleanEnabled ? (
|
||||
<>
|
||||
<ToggleRight className="h-6 w-6 text-green-500" />
|
||||
<span className="text-green-600 dark:text-green-400">已启用</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ToggleLeft className="h-6 w-6 text-slate-400" />
|
||||
<span className="text-slate-500">已禁用</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* 清理间隔选择 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
清理间隔
|
||||
</label>
|
||||
<select
|
||||
value={cleanInterval}
|
||||
onChange={(e) => setCleanInterval(Number(e.target.value))}
|
||||
disabled={!cleanEnabled}
|
||||
className={`w-full px-4 py-3 text-sm rounded-xl border transition-colors
|
||||
bg-white dark:bg-slate-800
|
||||
text-slate-900 dark:text-slate-100
|
||||
border-slate-300 dark:border-slate-600
|
||||
focus:border-blue-500 focus:ring-blue-500
|
||||
focus:outline-none focus:ring-2
|
||||
${!cleanEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<option value={300}>5 分钟</option>
|
||||
<option value={600}>10 分钟</option>
|
||||
<option value={1800}>30 分钟</option>
|
||||
<option value={3600}>1 小时</option>
|
||||
<option value={7200}>2 小时</option>
|
||||
<option value={14400}>4 小时</option>
|
||||
<option value={21600}>6 小时</option>
|
||||
<option value={43200}>12 小时</option>
|
||||
<option value={86400}>24 小时</option>
|
||||
</select>
|
||||
<p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
|
||||
每隔指定时间自动清理 S2A 中的错误账号
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 手动清理 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
手动清理
|
||||
</label>
|
||||
<Button
|
||||
onClick={handleCleanNow}
|
||||
disabled={cleaning}
|
||||
variant="outline"
|
||||
icon={cleaning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
||||
className="w-full h-12 text-red-500 hover:text-red-600 border-red-300 hover:border-red-400 dark:border-red-800 dark:hover:border-red-600"
|
||||
>
|
||||
{cleaning ? '清理中...' : '立即清理所有错误账号'}
|
||||
</Button>
|
||||
<p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
|
||||
立即执行一次清理操作，删除所有错误账号
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 说明信息 */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<AlertTriangle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
|
||||
<div className="space-y-2">
|
||||
<p className="font-medium text-slate-700 dark:text-slate-300">功能说明</p>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
<li>定期清理功能会自动删除 S2A 号池中状态为"error"的账号</li>
|
||||
<li>清理操作是<strong>不可逆</strong>的，删除的账号无法恢复</li>
|
||||
<li>建议设置合理的清理间隔，避免过于频繁的清理操作</li>
|
||||
<li>清理日志可在"号池监控"页面的实时日志中查看</li>
|
||||
<li>启用后需要点击"保存设置"才会生效</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user