work-agent 0.1.0

package/components/scheduled-task-list.tsx

@@ -0,0 +1,356 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Terminal, Trash2, Clock, History, Play, Pause, Calendar, AlertCircle } from 'lucide-react';
+import type { ScheduledTask } from '@/lib/db';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import {
+	Card,
+	CardContent,
+} from '@/components/ui/card';
+
+export function ScheduledTaskList() {
+	const pathname = usePathname();
+	// 根据当前路由判断使用哪个路径前缀
+	// 管理员路由 (/scheduled-tasks) 使用空字符串
+	// 用户路由 (/my/scheduled-tasks) 使用 '/my'
+	const basePath = pathname.startsWith('/scheduled-tasks') ? '' : '/my';
+
+	const [tasks, setTasks] = useState<ScheduledTask[]>([]);
+	const [filteredTasks, setFilteredTasks] = useState<ScheduledTask[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	// 搜索和筛选状态
+	const [searchQuery, setSearchQuery] = useState('');
+	const [statusFilter, setStatusFilter] = useState('all');
+
+	async function fetchTasks() {
+		try {
+			const response = await fetch('/api/scheduled-tasks');
+			if (!response.ok) throw new Error('获取定时任务失败');
+
+			const data = await response.json();
+			setTasks(data.tasks);
+			setFilteredTasks(data.tasks);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	useEffect(() => {
+		fetchTasks();
+	}, []);
+
+	// 筛选和搜索逻辑
+	useEffect(() => {
+		let filtered = tasks;
+
+		// 状态筛选
+		if (statusFilter !== 'all') {
+			filtered = filtered.filter(t => t.status === statusFilter);
+		}
+
+		// 搜索
+		if (searchQuery) {
+			const query = searchQuery.toLowerCase();
+			filtered = filtered.filter(t =>
+				t.title.toLowerCase().includes(query) ||
+				t.description?.toLowerCase().includes(query) ||
+				t.id.toLowerCase().includes(query) ||
+				t.command.toLowerCase().includes(query)
+			);
+		}
+
+		setFilteredTasks(filtered);
+	}, [tasks, statusFilter, searchQuery]);
+
+	// 切换任务状态
+	async function toggleTask(taskId: string, _currentStatus: string) {
+		try {
+			const response = await fetch(`/api/scheduled-tasks/${taskId}/toggle`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ userId: 'user' }),
+			});
+			if (!response.ok) throw new Error('切换状态失败');
+
+			const data = await response.json();
+			setTasks(tasks.map(t => t.id === taskId ? data.task : t));
+		} catch (err) {
+			console.error(err);
+			alert('切换状态失败');
+		}
+	}
+
+	// 删除任务
+	async function deleteTask(taskId: string, title: string) {
+		if (!confirm(`确定删除定时任务 "${title}" 吗？`)) return;
+
+		try {
+			const response = await fetch(`/api/scheduled-tasks/${taskId}?deletedBy=user`, {
+				method: 'DELETE',
+			});
+			if (!response.ok) throw new Error('删除失败');
+
+			setTasks(tasks.filter(t => t.id !== taskId));
+		} catch (err) {
+			console.error(err);
+			alert('删除失败');
+		}
+	}
+
+	if (loading) {
+		return (
+			<Card>
+				<CardContent className="flex items-center justify-center py-16">
+					<div className="flex flex-col items-center gap-4">
+						<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+						<p className="text-muted-foreground text-sm">加载中...</p>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (error) {
+		return (
+			<Card className="border-destructive">
+				<CardContent className="p-6">
+					<div className="flex items-center gap-3">
+						<AlertCircle className="w-5 h-5 text-destructive flex-shrink-0" />
+						<div>
+							<p className="text-destructive font-medium">{error}</p>
+							<p className="text-sm text-muted-foreground mt-1">请检查网络连接后重试</p>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<div className="space-y-4">
+			{/* 搜索和筛选栏 */}
+			<Card>
+				<CardContent className="p-4">
+					<div className="flex flex-col md:flex-row gap-4">
+						<div className="flex-1">
+							<Input
+								type="text"
+								value={searchQuery}
+								onChange={(e) => setSearchQuery(e.target.value)}
+								placeholder="搜索任务标题、描述、命令..."
+								className="w-full"
+							/>
+						</div>
+						<div className="flex gap-2">
+							<Select value={statusFilter} onValueChange={setStatusFilter}>
+								<SelectTrigger className="w-[140px]">
+									<SelectValue placeholder="所有状态" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="all">所有状态</SelectItem>
+									<SelectItem value="active">运行中</SelectItem>
+									<SelectItem value="paused">已暂停</SelectItem>
+									<SelectItem value="disabled">已禁用</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+					{filteredTasks.length !== tasks.length && (
+						<p className="text-sm text-muted-foreground mt-3">
+							找到 <span className="font-medium text-foreground">{filteredTasks.length}</span> 个任务（共 {tasks.length} 个）
+						</p>
+					)}
+				</CardContent>
+			</Card>
+
+			{/* 任务表格 */}
+			{filteredTasks.length === 0 ? (
+				<Card>
+					<CardContent className="flex flex-col items-center justify-center py-16">
+						<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+							<Clock className="w-8 h-8 text-muted-foreground" />
+						</div>
+						<h3 className="text-lg font-medium mb-2">暂无定时任务</h3>
+						<p className="text-muted-foreground text-center">
+							{searchQuery || statusFilter !== 'all'
+								? '没有符合条件的任务，请调整筛选条件'
+								: '点击上方"新建定时任务"创建第一个定时任务，或通过对话让 AI 创建'}
+						</p>
+					</CardContent>
+				</Card>
+			) : (
+				<Card>
+					<div className="overflow-x-auto">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead className="w-[220px]">任务</TableHead>
+									<TableHead className="w-[200px]">命令</TableHead>
+									<TableHead>调度</TableHead>
+									<TableHead>状态</TableHead>
+									<TableHead>下次执行</TableHead>
+									<TableHead className="text-right">操作</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{filteredTasks.map((task) => (
+									<TableRow key={task.id}>
+										<TableCell>
+											<div className="flex items-start gap-3">
+												<div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${
+													task.status === 'active'
+														? 'bg-green-500/10'
+														: task.status === 'paused'
+															? 'bg-amber-500/10'
+															: 'bg-muted'
+												}`}>
+													<Terminal className={`w-4 h-4 ${
+														task.status === 'active'
+															? 'text-green-600 dark:text-green-400'
+															: task.status === 'paused'
+																? 'text-amber-600 dark:text-amber-400'
+																: 'text-muted-foreground'
+													}`} />
+												</div>
+												<div className="min-w-0">
+													<Link
+														href={`${basePath}/scheduled-tasks/${task.id}`}
+														className="font-medium hover:text-primary transition-colors block truncate"
+													>
+														{task.title}
+													</Link>
+													{task.description && (
+														<p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{task.description}</p>
+													)}
+												</div>
+											</div>
+										</TableCell>
+										<TableCell>
+											<code className="text-xs bg-muted px-2 py-1 rounded font-mono block truncate max-w-[200px]" title={task.command}>
+												{task.command}
+											</code>
+										</TableCell>
+										<TableCell>
+											<div className="flex items-center gap-1.5 text-sm">
+												<Calendar className="w-3.5 h-3.5 text-muted-foreground" />
+												<code className="text-xs font-mono">{task.scheduleExpression}</code>
+											</div>
+										</TableCell>
+										<TableCell>
+											<StatusBadge status={task.status} />
+										</TableCell>
+										<TableCell>
+											{task.nextRunAt ? (
+												<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+													<Clock className="w-3.5 h-3.5" />
+													<span>{formatNextRunTime(task.nextRunAt)}</span>
+												</div>
+											) : (
+												<span className="text-sm text-muted-foreground">-</span>
+											)}
+										</TableCell>
+										<TableCell className="text-right">
+											<div className="flex items-center justify-end gap-1">
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={() => toggleTask(task.id, task.status)}
+													className="h-8 w-8"
+													title={task.status === 'active' ? '暂停' : '启动'}
+												>
+													{task.status === 'active' ? (
+														<Pause className="h-4 w-4 text-amber-600" />
+													) : (
+														<Play className="h-4 w-4 text-green-600" />
+													)}
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													asChild
+													className="h-8 w-8"
+													title="执行历史"
+												>
+													<Link href={`${basePath}/scheduled-tasks/${task.id}/executions`}>
+														<History className="h-4 w-4" />
+													</Link>
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													asChild
+													className="h-8 w-8"
+													title="编辑"
+												>
+													<Link href={`${basePath}/scheduled-tasks/${task.id}/edit`}>
+														<Terminal className="h-4 w-4" />
+													</Link>
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={() => deleteTask(task.id, task.title)}
+													className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+													title="删除"
+												>
+													<Trash2 className="h-4 w-4" />
+												</Button>
+											</div>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					</div>
+				</Card>
+			)}
+		</div>
+	);
+}
+
+// 状态徽章组件
+function StatusBadge({ status }: { status: ScheduledTask['status'] }) {
+	const config = {
+		active: { label: '运行中', className: 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20' },
+		paused: { label: '已暂停', className: 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20' },
+		disabled: { label: '已禁用', className: 'bg-muted text-muted-foreground' },
+	};
+	const { label, className } = config[status] || config.paused;
+	return <Badge variant="outline" className={className}>{label}</Badge>;
+}
+
+// 格式化下次执行时间
+function formatNextRunTime(date: Date | string): string {
+	const now = new Date();
+	const targetDate = typeof date === 'string' ? new Date(date) : date;
+	const diff = targetDate.getTime() - now.getTime();
+
+	if (diff < 60000) return '即将执行';
+	if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟后`;
+	if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时后`;
+	if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天后`;
+
+	return targetDate.toLocaleDateString('zh-CN', {
+		month: 'short',
+		day: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit',
+	});
+}