401 lines
12 KiB
TypeScript
401 lines
12 KiB
TypeScript
'use client';
|
||
|
||
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Clock,
|
||
Plus,
|
||
Trash2,
|
||
Play,
|
||
RefreshCw,
|
||
Loader2,
|
||
AlertCircle,
|
||
X,
|
||
} from 'lucide-react';
|
||
import {
|
||
listCronJobs,
|
||
addCronJob,
|
||
removeCronJob,
|
||
toggleCronJob,
|
||
runCronJob,
|
||
} from '@/lib/api';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from '@/components/ui/table';
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from '@/components/ui/select';
|
||
import type { CronJob } from '@/types';
|
||
|
||
export default function CronPage() {
|
||
const [jobs, setJobs] = useState<CronJob[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [showAdd, setShowAdd] = useState(false);
|
||
|
||
const loadJobs = async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const data = await listCronJobs(true);
|
||
setJobs(data);
|
||
} catch (err: any) {
|
||
setError(err.message || '加载任务失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadJobs();
|
||
}, []);
|
||
|
||
const handleToggle = async (jobId: string, enabled: boolean) => {
|
||
try {
|
||
await toggleCronJob(jobId, enabled);
|
||
loadJobs();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleDelete = async (jobId: string) => {
|
||
try {
|
||
await removeCronJob(jobId);
|
||
loadJobs();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleRun = async (jobId: string) => {
|
||
try {
|
||
await runCronJob(jobId);
|
||
loadJobs();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleAdd = async (params: {
|
||
name: string;
|
||
message: string;
|
||
every_seconds?: number;
|
||
cron_expr?: string;
|
||
}) => {
|
||
try {
|
||
await addCronJob(params);
|
||
setShowAdd(false);
|
||
loadJobs();
|
||
} catch (err: any) {
|
||
setError(err.message);
|
||
}
|
||
};
|
||
|
||
const formatTime = (ms: number | null) => {
|
||
if (!ms) return '-';
|
||
return new Date(ms).toLocaleString(undefined, {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center py-20">
|
||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||
<Clock className="w-6 h-6" />
|
||
定时任务
|
||
</h1>
|
||
<div className="flex items-center gap-2">
|
||
<Button onClick={loadJobs} variant="outline" size="sm">
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
刷新
|
||
</Button>
|
||
<Button onClick={() => setShowAdd(true)} size="sm">
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
新建任务
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{error && (
|
||
<Card className="border-destructive">
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center gap-2 text-destructive text-sm">
|
||
<AlertCircle className="w-4 h-4" />
|
||
{error}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Add Job Form */}
|
||
{showAdd && (
|
||
<AddJobForm
|
||
onAdd={handleAdd}
|
||
onCancel={() => setShowAdd(false)}
|
||
/>
|
||
)}
|
||
|
||
{/* Jobs Table */}
|
||
<Card>
|
||
<CardContent className="p-0">
|
||
{jobs.length === 0 ? (
|
||
<div className="py-12 text-center text-muted-foreground">
|
||
<Clock className="w-10 h-10 mx-auto mb-3 opacity-30" />
|
||
<p className="font-medium">暂无定时任务</p>
|
||
<p className="text-sm mt-1">新建一个任务，让智能体按计划自动执行。</p>
|
||
</div>
|
||
) : (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-16">启用</TableHead>
|
||
<TableHead>名称</TableHead>
|
||
<TableHead>计划</TableHead>
|
||
<TableHead>消息</TableHead>
|
||
<TableHead>上次运行</TableHead>
|
||
<TableHead>下次运行</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead className="w-24">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{jobs.map((job) => (
|
||
<TableRow key={job.id}>
|
||
<TableCell>
|
||
<Switch
|
||
checked={job.enabled}
|
||
onCheckedChange={(checked) =>
|
||
handleToggle(job.id, checked)
|
||
}
|
||
/>
|
||
</TableCell>
|
||
<TableCell className="font-medium">
|
||
<div>
|
||
<span>{job.name}</span>
|
||
<span className="text-xs text-muted-foreground ml-2">
|
||
{job.id}
|
||
</span>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<code className="text-xs bg-muted px-1.5 py-0.5 rounded">
|
||
{job.schedule_display}
|
||
</code>
|
||
</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm truncate max-w-[200px] block">
|
||
{job.message}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="text-xs text-muted-foreground">
|
||
{formatTime(job.last_run_at_ms)}
|
||
</TableCell>
|
||
<TableCell className="text-xs text-muted-foreground">
|
||
{formatTime(job.next_run_at_ms)}
|
||
</TableCell>
|
||
<TableCell>
|
||
{job.last_status === 'ok' && (
|
||
<Badge variant="default" className="text-xs bg-green-600">
|
||
OK
|
||
</Badge>
|
||
)}
|
||
{job.last_status === 'error' && (
|
||
<Badge variant="destructive" className="text-xs">
|
||
错误
|
||
</Badge>
|
||
)}
|
||
{!job.last_status && (
|
||
<span className="text-xs text-muted-foreground">
|
||
-
|
||
</span>
|
||
)}
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className="flex items-center gap-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7"
|
||
onClick={() => handleRun(job.id)}
|
||
title="立即执行"
|
||
>
|
||
<Play className="w-3.5 h-3.5" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7 text-destructive hover:text-destructive"
|
||
onClick={() => handleDelete(job.id)}
|
||
title="删除"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AddJobForm({
|
||
onAdd,
|
||
onCancel,
|
||
}: {
|
||
onAdd: (params: {
|
||
name: string;
|
||
message: string;
|
||
every_seconds?: number;
|
||
cron_expr?: string;
|
||
}) => void;
|
||
onCancel: () => void;
|
||
}) {
|
||
const [name, setName] = useState('');
|
||
const [message, setMessage] = useState('');
|
||
const [scheduleType, setScheduleType] = useState<'every' | 'cron'>('every');
|
||
const [everySeconds, setEverySeconds] = useState('3600');
|
||
const [cronExpr, setCronExpr] = useState('0 9 * * *');
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!name.trim() || !message.trim()) return;
|
||
|
||
const params: any = { name: name.trim(), message: message.trim() };
|
||
if (scheduleType === 'every') {
|
||
params.every_seconds = parseInt(everySeconds, 10) || 3600;
|
||
} else {
|
||
params.cron_expr = cronExpr.trim();
|
||
}
|
||
onAdd(params);
|
||
};
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader className="pb-4">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-base">新建定时任务</CardTitle>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={onCancel}>
|
||
<X className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name">任务名称</Label>
|
||
<Input
|
||
id="name"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="例如：日报汇总"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="schedule-type">调度类型</Label>
|
||
<Select
|
||
value={scheduleType}
|
||
onValueChange={(v) => setScheduleType(v as 'every' | 'cron')}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="every">固定间隔（每 N 秒）</SelectItem>
|
||
<SelectItem value="cron">Cron 表达式</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{scheduleType === 'every' ? (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="every">间隔（秒）</Label>
|
||
<Input
|
||
id="every"
|
||
type="number"
|
||
value={everySeconds}
|
||
onChange={(e) => setEverySeconds(e.target.value)}
|
||
min="10"
|
||
placeholder="3600"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{parseInt(everySeconds, 10) >= 3600
|
||
? `约 ${Math.floor(parseInt(everySeconds, 10) / 3600)} 小时 ${Math.floor((parseInt(everySeconds, 10) % 3600) / 60)} 分`
|
||
: parseInt(everySeconds, 10) >= 60
|
||
? `约 ${Math.floor(parseInt(everySeconds, 10) / 60)} 分 ${parseInt(everySeconds, 10) % 60} 秒`
|
||
: ''}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="cron">Cron 表达式</Label>
|
||
<Input
|
||
id="cron"
|
||
value={cronExpr}
|
||
onChange={(e) => setCronExpr(e.target.value)}
|
||
placeholder="0 9 * * *"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
格式：分钟 小时 日 月 周
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="message">发送给智能体的消息</Label>
|
||
<Input
|
||
id="message"
|
||
value={message}
|
||
onChange={(e) => setMessage(e.target.value)}
|
||
placeholder="例如：检查我的邮件并生成摘要"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2">
|
||
<Button type="button" variant="outline" onClick={onCancel}>
|
||
取消
|
||
</Button>
|
||
<Button type="submit" disabled={!name.trim() || !message.trim()}>
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
创建任务
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|