589 lines
26 KiB
TypeScript
589 lines
26 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
||
import {
|
||
Target,
|
||
Activity,
|
||
RefreshCw,
|
||
Play,
|
||
Pause,
|
||
Shield,
|
||
TrendingUp,
|
||
TrendingDown,
|
||
Zap,
|
||
AlertTriangle,
|
||
CheckCircle,
|
||
Clock,
|
||
} from 'lucide-react'
|
||
import { Card, CardHeader, CardTitle, CardContent, Button, Input } from '../components/common'
|
||
import { useConfig } from '../hooks/useConfig'
|
||
import type { DashboardStats } from '../types'
|
||
|
||
interface PoolStatus {
|
||
target: number
|
||
current: number
|
||
deficit: number
|
||
last_check: string
|
||
auto_add: boolean
|
||
min_interval: number
|
||
last_auto_add: string
|
||
polling_enabled: boolean
|
||
polling_interval: number
|
||
}
|
||
|
||
interface HealthCheckResult {
|
||
account_id: number
|
||
email: string
|
||
status: string
|
||
checked_at: string
|
||
error?: string
|
||
auto_paused?: boolean
|
||
}
|
||
|
||
interface AutoAddLog {
|
||
timestamp: string
|
||
target: number
|
||
current: number
|
||
deficit: number
|
||
action: string
|
||
success: number
|
||
failed: number
|
||
message: string
|
||
}
|
||
|
||
export default function Monitor() {
|
||
const { config } = useConfig()
|
||
const [stats, setStats] = useState<DashboardStats | null>(null)
|
||
const [poolStatus, setPoolStatus] = useState<PoolStatus | null>(null)
|
||
const [healthResults, setHealthResults] = useState<HealthCheckResult[]>([])
|
||
const [autoAddLogs, setAutoAddLogs] = useState<AutoAddLog[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [refreshing, setRefreshing] = useState(false)
|
||
const [checkingHealth, setCheckingHealth] = useState(false)
|
||
const [autoPauseEnabled, setAutoPauseEnabled] = useState(false)
|
||
|
||
// 配置表单状态
|
||
const [targetInput, setTargetInput] = useState(50)
|
||
const [autoAdd, setAutoAdd] = useState(false)
|
||
const [minInterval, setMinInterval] = useState(300)
|
||
const [pollingEnabled, setPollingEnabled] = useState(false)
|
||
const [pollingInterval, setPollingInterval] = useState(60)
|
||
|
||
const backendUrl = config.s2a.apiBase.replace(/\/api.*$/, '').replace(/:8080/, ':8088')
|
||
|
||
// 获取号池状态
|
||
const fetchPoolStatus = useCallback(async () => {
|
||
try {
|
||
const res = await fetch(`${backendUrl}/api/pool/status`)
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (data.code === 0) {
|
||
setPoolStatus(data.data)
|
||
setTargetInput(data.data.target)
|
||
setAutoAdd(data.data.auto_add)
|
||
setMinInterval(data.data.min_interval)
|
||
setPollingEnabled(data.data.polling_enabled)
|
||
setPollingInterval(data.data.polling_interval)
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('获取号池状态失败:', e)
|
||
}
|
||
}, [backendUrl])
|
||
|
||
// 刷新 S2A 统计
|
||
const refreshStats = useCallback(async () => {
|
||
setRefreshing(true)
|
||
try {
|
||
const res = await fetch(`${backendUrl}/api/pool/refresh`, { method: 'POST' })
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (data.code === 0) {
|
||
setStats(data.data)
|
||
}
|
||
}
|
||
await fetchPoolStatus()
|
||
} catch (e) {
|
||
console.error('刷新统计失败:', e)
|
||
}
|
||
setRefreshing(false)
|
||
}, [backendUrl, fetchPoolStatus])
|
||
|
||
// 设置目标
|
||
const handleSetTarget = async () => {
|
||
setLoading(true)
|
||
try {
|
||
await fetch(`${backendUrl}/api/pool/target`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
target: targetInput,
|
||
auto_add: autoAdd,
|
||
min_interval: minInterval,
|
||
}),
|
||
})
|
||
await fetchPoolStatus()
|
||
} catch (e) {
|
||
console.error('设置目标失败:', e)
|
||
}
|
||
setLoading(false)
|
||
}
|
||
|
||
// 控制轮询
|
||
const handleTogglePolling = async () => {
|
||
setLoading(true)
|
||
try {
|
||
await fetch(`${backendUrl}/api/pool/polling`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
enabled: !pollingEnabled,
|
||
interval: pollingInterval,
|
||
}),
|
||
})
|
||
setPollingEnabled(!pollingEnabled)
|
||
await fetchPoolStatus()
|
||
} catch (e) {
|
||
console.error('控制轮询失败:', e)
|
||
}
|
||
setLoading(false)
|
||
}
|
||
|
||
// 健康检查
|
||
const handleHealthCheck = async (autoPause: boolean = false) => {
|
||
setCheckingHealth(true)
|
||
try {
|
||
await fetch(`${backendUrl}/api/health-check/start`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ auto_pause: autoPause }),
|
||
})
|
||
// 等待一会儿再获取结果
|
||
setTimeout(async () => {
|
||
const res = await fetch(`${backendUrl}/api/health-check/results`)
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (data.code === 0) {
|
||
setHealthResults(data.data || [])
|
||
}
|
||
}
|
||
setCheckingHealth(false)
|
||
}, 5000)
|
||
} catch (e) {
|
||
console.error('健康检查失败:', e)
|
||
setCheckingHealth(false)
|
||
}
|
||
}
|
||
|
||
// 获取自动补号日志
|
||
const fetchAutoAddLogs = async () => {
|
||
try {
|
||
const res = await fetch(`${backendUrl}/api/auto-add/logs`)
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (data.code === 0) {
|
||
setAutoAddLogs(data.data || [])
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('获取日志失败:', e)
|
||
}
|
||
}
|
||
|
||
// 初始化
|
||
useEffect(() => {
|
||
fetchPoolStatus()
|
||
refreshStats()
|
||
fetchAutoAddLogs()
|
||
}, [fetchPoolStatus, refreshStats])
|
||
|
||
// 计算健康状态
|
||
const healthySummary = healthResults.reduce(
|
||
(acc, r) => {
|
||
if (r.status === 'active' && !r.error) acc.healthy++
|
||
else acc.unhealthy++
|
||
return acc
|
||
},
|
||
{ healthy: 0, unhealthy: 0 }
|
||
)
|
||
|
||
const deficit = poolStatus ? Math.max(0, poolStatus.target - poolStatus.current) : 0
|
||
const healthPercent = poolStatus && poolStatus.target > 0
|
||
? Math.min(100, (poolStatus.current / poolStatus.target) * 100)
|
||
: 0
|
||
|
||
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">号池监控</h1>
|
||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||
实时监控号池状态，自动补号管理
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={refreshStats}
|
||
disabled={refreshing}
|
||
icon={<RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 状态概览卡片 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{/* 当前/目标 */}
|
||
<Card className="stat-card card-hover">
|
||
<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 animate-countUp">
|
||
{poolStatus?.current ?? '-'} / {poolStatus?.target ?? '-'}
|
||
</p>
|
||
</div>
|
||
<div className="h-12 w-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
|
||
<Target className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<div className="h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full progress-gradient rounded-full transition-all duration-500"
|
||
style={{ width: `${healthPercent}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 需补充 */}
|
||
<Card className="stat-card card-hover">
|
||
<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 animate-countUp ${deficit > 0 ? 'text-orange-500' : 'text-green-500'
|
||
}`}>
|
||
{deficit}
|
||
</p>
|
||
</div>
|
||
<div className={`h-12 w-12 rounded-xl flex items-center justify-center ${deficit > 0 ? 'bg-orange-100 dark:bg-orange-900/30' : 'bg-green-100 dark:bg-green-900/30'
|
||
}`}>
|
||
{deficit > 0 ? (
|
||
<TrendingDown className="h-6 w-6 text-orange-500" />
|
||
) : (
|
||
<TrendingUp className="h-6 w-6 text-green-500" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
{deficit > 0 && (
|
||
<p className="mt-2 text-xs text-orange-500 flex items-center gap-1">
|
||
<AlertTriangle className="h-3 w-3" />
|
||
低于目标
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 轮询状态 */}
|
||
<Card className="stat-card card-hover">
|
||
<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">
|
||
{pollingEnabled ? '运行中' : '已停止'}
|
||
</p>
|
||
</div>
|
||
<div className={`h-12 w-12 rounded-xl flex items-center justify-center ${pollingEnabled ? 'bg-green-100 dark:bg-green-900/30' : 'bg-slate-100 dark:bg-slate-800'
|
||
}`}>
|
||
{pollingEnabled ? (
|
||
<Activity className="h-6 w-6 text-green-500 animate-pulse" />
|
||
) : (
|
||
<Pause className="h-6 w-6 text-slate-400" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
{pollingEnabled && (
|
||
<p className="mt-2 text-xs text-slate-500 flex items-center gap-1">
|
||
<Clock className="h-3 w-3" />
|
||
每 {pollingInterval} 秒刷新
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 自动补号 */}
|
||
<Card className="stat-card card-hover">
|
||
<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">
|
||
{autoAdd ? '已启用' : '已禁用'}
|
||
</p>
|
||
</div>
|
||
<div className={`h-12 w-12 rounded-xl flex items-center justify-center ${autoAdd ? 'bg-purple-100 dark:bg-purple-900/30' : 'bg-slate-100 dark:bg-slate-800'
|
||
}`}>
|
||
<Zap className={`h-6 w-6 ${autoAdd ? 'text-purple-500' : 'text-slate-400'}`} />
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 配置面板 */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* 目标设置 */}
|
||
<Card className="glass-card">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Target className="h-5 w-5 text-blue-500" />
|
||
号池目标设置
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<Input
|
||
label="目标账号数"
|
||
type="number"
|
||
min={1}
|
||
max={1000}
|
||
value={targetInput}
|
||
onChange={(e) => setTargetInput(Number(e.target.value))}
|
||
hint="期望保持的活跃账号数量"
|
||
/>
|
||
<div className="flex items-center gap-3">
|
||
<input
|
||
type="checkbox"
|
||
id="autoAdd"
|
||
checked={autoAdd}
|
||
onChange={(e) => setAutoAdd(e.target.checked)}
|
||
className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
|
||
/>
|
||
<label htmlFor="autoAdd" className="text-sm text-slate-700 dark:text-slate-300">
|
||
启用自动补号
|
||
</label>
|
||
</div>
|
||
<Input
|
||
label="最小间隔 (秒)"
|
||
type="number"
|
||
min={60}
|
||
max={3600}
|
||
value={minInterval}
|
||
onChange={(e) => setMinInterval(Number(e.target.value))}
|
||
hint="两次自动补号的最小间隔"
|
||
disabled={!autoAdd}
|
||
/>
|
||
<Button onClick={handleSetTarget} loading={loading} className="w-full">
|
||
保存设置
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 轮询控制 */}
|
||
<Card className="glass-card">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Activity className="h-5 w-5 text-green-500" />
|
||
实时监控设置
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<Input
|
||
label="轮询间隔 (秒)"
|
||
type="number"
|
||
min={10}
|
||
max={300}
|
||
value={pollingInterval}
|
||
onChange={(e) => setPollingInterval(Number(e.target.value))}
|
||
hint="自动刷新号池状态的间隔时间"
|
||
/>
|
||
<div className="p-4 rounded-lg bg-slate-50 dark:bg-slate-800/50">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium text-slate-900 dark:text-slate-100">监控状态</p>
|
||
<p className="text-sm text-slate-500">
|
||
{pollingEnabled ? '正在实时监控号池状态' : '监控已暂停'}
|
||
</p>
|
||
</div>
|
||
<div className={`status-dot ${pollingEnabled ? 'online' : 'offline'}`} />
|
||
</div>
|
||
</div>
|
||
<Button
|
||
onClick={handleTogglePolling}
|
||
loading={loading}
|
||
variant={pollingEnabled ? 'outline' : 'primary'}
|
||
className="w-full"
|
||
icon={pollingEnabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
||
>
|
||
{pollingEnabled ? '停止监控' : '启动监控'}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 健康检查 */}
|
||
<Card className="glass-card">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Shield className="h-5 w-5 text-purple-500" />
|
||
账号健康检查
|
||
</CardTitle>
|
||
<div className="flex items-center gap-2">
|
||
<label className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
|
||
<input
|
||
type="checkbox"
|
||
checked={autoPauseEnabled}
|
||
onChange={(e) => setAutoPauseEnabled(e.target.checked)}
|
||
className="h-4 w-4 rounded border-slate-300 text-purple-600 focus:ring-purple-500"
|
||
/>
|
||
自动暂停问题账号
|
||
</label>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleHealthCheck(autoPauseEnabled)}
|
||
disabled={checkingHealth}
|
||
loading={checkingHealth}
|
||
icon={<Shield className="h-4 w-4" />}
|
||
>
|
||
{checkingHealth ? '检查中...' : '开始检查'}
|
||
</Button>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{healthResults.length > 0 ? (
|
||
<>
|
||
{/* 统计 */}
|
||
<div className="flex gap-4 mb-4">
|
||
<div className="flex items-center gap-2 text-green-600">
|
||
<CheckCircle className="h-4 w-4" />
|
||
<span>健康: {healthySummary.healthy}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-red-500">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<span>异常: {healthySummary.unhealthy}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 结果列表 */}
|
||
<div className="max-h-64 overflow-y-auto space-y-2">
|
||
{healthResults.map((result) => (
|
||
<div
|
||
key={result.account_id}
|
||
className={`flex items-center justify-between p-3 rounded-lg ${result.error
|
||
? 'bg-red-50 dark:bg-red-900/20'
|
||
: 'bg-green-50 dark:bg-green-900/20'
|
||
}`}
|
||
>
|
||
<div>
|
||
<p className="font-medium text-slate-900 dark:text-slate-100">
|
||
{result.email}
|
||
</p>
|
||
<p className="text-xs text-slate-500">ID: {result.account_id}</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className={`text-sm font-medium ${result.error ? 'text-red-500' : 'text-green-600'
|
||
}`}>
|
||
{result.status}
|
||
</p>
|
||
{result.error && (
|
||
<p className="text-xs text-red-400">{result.error}</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="text-center py-8 text-slate-500">
|
||
<Shield className="h-12 w-12 mx-auto mb-3 opacity-30" />
|
||
<p>点击"开始检查"验证所有账号状态</p>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* S2A 实时统计 */}
|
||
{stats && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>S2A 实时统计</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="text-center p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20">
|
||
<p className="text-2xl font-bold text-blue-600">{stats.total_accounts}</p>
|
||
<p className="text-sm text-slate-500">总账号</p>
|
||
</div>
|
||
<div className="text-center p-4 rounded-lg bg-green-50 dark:bg-green-900/20">
|
||
<p className="text-2xl font-bold text-green-600">{stats.normal_accounts}</p>
|
||
<p className="text-sm text-slate-500">正常</p>
|
||
</div>
|
||
<div className="text-center p-4 rounded-lg bg-red-50 dark:bg-red-900/20">
|
||
<p className="text-2xl font-bold text-red-500">{stats.error_accounts}</p>
|
||
<p className="text-sm text-slate-500">错误</p>
|
||
</div>
|
||
<div className="text-center p-4 rounded-lg bg-orange-50 dark:bg-orange-900/20">
|
||
<p className="text-2xl font-bold text-orange-500">{stats.ratelimit_accounts}</p>
|
||
<p className="text-sm text-slate-500">限流</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 自动补号日志 */}
|
||
{autoAddLogs.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Clock className="h-5 w-5 text-slate-500" />
|
||
操作日志
|
||
</CardTitle>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={fetchAutoAddLogs}
|
||
icon={<RefreshCw className="h-4 w-4" />}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="max-h-64 overflow-y-auto space-y-2">
|
||
{[...autoAddLogs].reverse().slice(0, 20).map((log, idx) => (
|
||
<div
|
||
key={idx}
|
||
className={`flex items-center justify-between p-3 rounded-lg text-sm ${log.action.includes('trigger') || log.action.includes('decrease')
|
||
? 'bg-orange-50 dark:bg-orange-900/20'
|
||
: log.action.includes('increase')
|
||
? 'bg-green-50 dark:bg-green-900/20'
|
||
: 'bg-slate-50 dark:bg-slate-800/50'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-xs text-slate-400">
|
||
{new Date(log.timestamp).toLocaleTimeString()}
|
||
</span>
|
||
<span className="font-medium text-slate-900 dark:text-slate-100">
|
||
{log.message}
|
||
</span>
|
||
</div>
|
||
<div className="text-xs text-slate-500">
|
||
{log.current} / {log.target}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|