work-agent 0.1.0

package/app/my/scheduled-tasks/[id]/edit/page.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { ArrowLeft, Save, Terminal } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import type { ScheduledTask } from '@/lib/db';
+
+// Cron presets
+const CRON_PRESETS = {
+	hourly: { label: '每小时', expression: '0 * * * *' },
+	every_6_hours: { label: '每6小时', expression: '0 */6 * * *' },
+	daily_8am: { label: '每天上午8点', expression: '0 8 * * *' },
+	daily_9am: { label: '每天上午9点', expression: '0 9 * * *' },
+	daily_midnight: { label: '每天凌晨', expression: '0 0 * * *' },
+	weekly_monday_9am: { label: '每周一早上9点', expression: '0 9 * * 1' },
+	weekly_friday_6pm: { label: '每周五下午6点', expression: '0 18 * * 5' },
+	monthly_1st_midnight: { label: '每月1号凌晨', expression: '0 0 1 * *' },
+	monthly_15th_9am: { label: '每月15号上午9点', expression: '0 9 15 * *' },
+};
+
+export default function EditScheduledTaskPage() {
+	const router = useRouter();
+	const params = useParams();
+	const taskId = params.id as string;
+
+	const [loading, setLoading] = useState(true);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [task, setTask] = useState<ScheduledTask | null>(null);
+
+	// 表单状态
+	const [formData, setFormData] = useState({
+		title: '',
+		description: '',
+		command: '',
+		scheduleType: 'cron' as 'cron' | 'interval' | 'once',
+		scheduleExpression: '',
+		cronPreset: '',
+		status: 'active' as 'active' | 'paused' | 'disabled',
+	});
+
+	// 加载任务数据
+	useEffect(() => {
+		async function fetchTask() {
+			try {
+				const response = await fetch(`/api/scheduled-tasks/${taskId}`);
+				if (!response.ok) throw new Error('获取任务失败');
+
+				const data = await response.json();
+				const taskData = data.task as ScheduledTask;
+				setTask(taskData);
+
+				setFormData({
+					title: taskData.title,
+					description: taskData.description || '',
+					command: taskData.command,
+					scheduleType: taskData.scheduleType,
+					scheduleExpression: taskData.scheduleExpression,
+					cronPreset: '',
+					status: taskData.status,
+				});
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '加载失败');
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchTask();
+	}, [taskId]);
+
+	const handleInputChange = (field: string, value: string) => {
+		setFormData(prev => ({ ...prev, [field]: value }));
+
+		// 如果选择的是预设，同步更新 scheduleExpression
+		if (field === 'cronPreset' && value) {
+			const preset = CRON_PRESETS[value as keyof typeof CRON_PRESETS];
+			if (preset) {
+				setFormData(prev => ({ ...prev, scheduleExpression: preset.expression }));
+			}
+		}
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setSaving(true);
+		setError(null);
+
+		try {
+			const response = await fetch(`/api/scheduled-tasks/${taskId}`, {
+				method: 'PUT',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					...formData,
+					updatedBy: 'user',
+				}),
+			});
+
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '更新失败');
+			}
+
+			router.push(`/my/scheduled-tasks/${taskId}`);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '更新失败');
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-16">
+				<div className="flex flex-col items-center gap-4">
+					<div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+					<p className="text-muted-foreground">加载中...</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="p-6">
+			<div className="max-w-3xl mx-auto">
+				{/* 页面标题 */}
+				<div className="flex items-center gap-4 mb-6">
+					<Button variant="ghost" size="icon" asChild>
+						<Link href={`/my/scheduled-tasks/${taskId}`}>
+							<ArrowLeft className="h-5 w-5" />
+						</Link>
+					</Button>
+					<div>
+						<h1 className="text-2xl font-bold">编辑定时任务</h1>
+						<p className="text-muted-foreground text-sm mt-1">修改定时任务配置</p>
+					</div>
+				</div>
+
+				{error && (
+					<div className="bg-destructive/10 border border-destructive/20 rounded-xl p-4 mb-6">
+						<p className="text-destructive">❌ {error}</p>
+					</div>
+				)}
+
+				<form onSubmit={handleSubmit} className="space-y-6">
+					{/* 基本信息 */}
+					<Card>
+						<CardHeader>
+							<CardTitle>基本信息</CardTitle>
+							<CardDescription>设置定时任务的基本属性</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<Label htmlFor="title">任务标题 *</Label>
+								<Input
+									id="title"
+									value={formData.title}
+									onChange={(e) => handleInputChange('title', e.target.value)}
+									placeholder="例如：每天清理临时文件"
+									required
+								/>
+							</div>
+							<div>
+								<Label htmlFor="description">描述</Label>
+								<Textarea
+									id="description"
+									value={formData.description}
+									onChange={(e) => handleInputChange('description', e.target.value)}
+									placeholder="详细描述此定时任务的用途..."
+									rows={3}
+								/>
+							</div>
+							<div>
+								<Label htmlFor="status">状态 *</Label>
+								<Select value={formData.status} onValueChange={(v) => handleInputChange('status', v as 'active' | 'paused' | 'disabled')}>
+									<SelectTrigger id="status">
+										<SelectValue />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="active">运行中</SelectItem>
+										<SelectItem value="paused">已暂停</SelectItem>
+										<SelectItem value="disabled">已禁用</SelectItem>
+									</SelectContent>
+								</Select>
+							</div>
+						</CardContent>
+					</Card>
+
+					{/* 命令配置 */}
+					<Card>
+						<CardHeader>
+							<CardTitle className="flex items-center gap-2">
+								<Terminal className="h-5 w-5" />
+								命令配置
+							</CardTitle>
+							<CardDescription>设置要执行的命令</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<Label htmlFor="command">执行命令 *</Label>
+								<Textarea
+									id="command"
+									value={formData.command}
+									onChange={(e) => handleInputChange('command', e.target.value)}
+									placeholder="例如：rm -rf /tmp/*.log 或 kubectl get pods -n default"
+									rows={3}
+									required
+									className="font-mono"
+								/>
+								<p className="text-xs text-muted-foreground mt-1">
+									支持任意 shell 命令，危险命令会被自动拦截并创建工单
+								</p>
+							</div>
+						</CardContent>
+					</Card>
+
+					{/* 调度配置 */}
+					<Card>
+						<CardHeader>
+							<CardTitle>调度配置</CardTitle>
+							<CardDescription>设置任务执行的时间和频率</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<Label htmlFor="preset">常用预设</Label>
+								<Select value={formData.cronPreset} onValueChange={(v) => handleInputChange('cronPreset', v)}>
+									<SelectTrigger id="preset">
+										<SelectValue placeholder="选择预设..." />
+									</SelectTrigger>
+									<SelectContent>
+										{Object.entries(CRON_PRESETS).map(([key, preset]) => (
+											<SelectItem key={key} value={key}>
+												{preset.label}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+							<div>
+								<Label htmlFor="expression">Cron 表达式 *</Label>
+								<Input
+									id="expression"
+									value={formData.scheduleExpression}
+									onChange={(e) => handleInputChange('scheduleExpression', e.target.value)}
+									placeholder="0 9 * * *"
+									pattern="^(\S+\s+){4}\S+$"
+									required
+									className="font-mono"
+								/>
+								<p className="text-xs text-muted-foreground mt-1">
+									格式：分 时 日 月 周（例如：0 9 * * * 表示每天早上9点）
+								</p>
+							</div>
+							<div className="bg-muted rounded-lg p-3">
+								<p className="text-sm font-medium">Cron 表达式</p>
+								<p className="text-sm text-muted-foreground mt-1 font-mono">
+									{formData.scheduleExpression}
+								</p>
+							</div>
+						</CardContent>
+					</Card>
+
+					{/* 提交按钮 */}
+					<div className="flex gap-3">
+						<Button type="submit" disabled={saving}>
+							<Save className="mr-2 h-4 w-4" />
+							{saving ? '保存中...' : '保存修改'}
+						</Button>
+						<Button type="button" variant="outline" asChild>
+							<Link href={`/my/scheduled-tasks/${taskId}`}>取消</Link>
+						</Button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}

package/app/my/scheduled-tasks/[id]/executions/page.tsx

@@ -0,0 +1,275 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, CheckCircle, XCircle, Clock, AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { TaskExecution, ScheduledTask } from '@/lib/db';
+
+export default function TaskExecutionsPage() {
+	const params = useParams();
+	const router = useRouter();
+	const taskId = params.id as string;
+
+	const [task, setTask] = useState<ScheduledTask | null>(null);
+	const [executions, setExecutions] = useState<TaskExecution[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		async function fetchData() {
+			try {
+				// 并行获取任务和执行历史
+				const [taskRes, execRes] = await Promise.all([
+					fetch(`/api/scheduled-tasks/${taskId}`),
+					fetch(`/api/task-executions?taskId=${taskId}`),
+				]);
+
+				if (!taskRes.ok) throw new Error('获取任务失败');
+				if (!execRes.ok) throw new Error('获取执行历史失败');
+
+				const taskData = await taskRes.json();
+				const execData = await execRes.json();
+
+				setTask(taskData.task);
+				setExecutions(execData.executions);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '加载失败');
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchData();
+	}, [taskId]);
+
+	function StatusIcon({ status }: { status: TaskExecution['status'] }) {
+		switch (status) {
+			case 'completed':
+				return <CheckCircle className="h-4 w-4 text-green-600" />;
+			case 'failed':
+				return <XCircle className="h-4 w-4 text-destructive" />;
+			case 'running':
+				return <Clock className="h-4 w-4 text-blue-600 animate-pulse" />;
+			default:
+				return <AlertCircle className="h-4 w-4 text-muted-foreground" />;
+		}
+	}
+
+	function StatusBadge({ status }: { status: TaskExecution['status'] }) {
+		const config = {
+			pending: { label: '待执行', variant: 'secondary' as const, className: undefined as string | undefined },
+			running: { label: '执行中', variant: 'outline' as const, className: undefined as string | undefined },
+			completed: { label: '已完成', variant: 'default' as const, className: 'bg-green-500/10 text-green-700 border-green-500/20' },
+			failed: { label: '失败', variant: 'destructive' as const, className: undefined as string | undefined },
+		};
+		const { label, variant, className } = config[status] || config.pending;
+		return <Badge variant={variant} className={className}>{label}</Badge>;
+	}
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-16">
+				<div className="flex flex-col items-center gap-4">
+					<div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+					<p className="text-muted-foreground">加载中...</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (error || !task) {
+		return (
+			<div className="bg-destructive/10 border border-destructive/20 rounded-xl p-6">
+				<p className="text-destructive">❌ {error || '任务不存在'}</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="p-6">
+			<div className="max-w-5xl mx-auto">
+				{/* 页面标题 */}
+				<div className="flex items-center gap-4 mb-6">
+					<Button variant="ghost" size="icon" asChild>
+						<Link href={`/my/scheduled-tasks/${taskId}`}>
+							<ArrowLeft className="h-5 w-5" />
+						</Link>
+					</Button>
+					<div>
+						<h1 className="text-2xl font-bold">执行历史</h1>
+						<p className="text-muted-foreground text-sm mt-1">
+							{task.title} 的执行记录
+						</p>
+					</div>
+				</div>
+
+				{/* 统计卡片 */}
+				<div className="grid grid-cols-4 gap-4 mb-6">
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm font-medium text-muted-foreground">总执行次数</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="text-2xl font-bold">{executions.length}</div>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm font-medium text-muted-foreground">成功</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="text-2xl font-bold text-green-600">
+								{executions.filter(e => e.status === 'completed').length}
+							</div>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm font-medium text-muted-foreground">失败</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="text-2xl font-bold text-destructive">
+								{executions.filter(e => e.status === 'failed').length}
+							</div>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm font-medium text-muted-foreground">执行中</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="text-2xl font-bold text-blue-600">
+								{executions.filter(e => e.status === 'running').length}
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+
+				{/* 执行历史表格 */}
+				{executions.length === 0 ? (
+					<div className="text-center py-16 bg-card rounded-xl border shadow-sm">
+						<div className="text-6xl mb-4">📭</div>
+						<p className="text-muted-foreground text-lg">暂无执行记录</p>
+						<p className="text-muted-foreground/70 text-sm mt-2">
+							定时任务尚未执行过
+						</p>
+					</div>
+				) : (
+					<div className="bg-card rounded-xl border shadow-sm overflow-hidden">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>执行 ID</TableHead>
+									<TableHead>状态</TableHead>
+									<TableHead>开始时间</TableHead>
+									<TableHead>完成时间</TableHead>
+									<TableHead>耗时</TableHead>
+									<TableHead>关联工单</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{executions.map((execution) => {
+									const completedAt = execution.completedAt ? new Date(execution.completedAt) : null;
+									const startedAt = execution.startedAt ? new Date(execution.startedAt) : null;
+									const duration = completedAt && startedAt
+										? completedAt.getTime() - startedAt.getTime()
+										: null;
+
+									return (
+										<TableRow key={execution.id}>
+											<TableCell>
+												<span className="font-mono text-sm">
+													{execution.id.slice(-12)}
+												</span>
+											</TableCell>
+											<TableCell>
+												<div className="flex items-center gap-2">
+													<StatusIcon status={execution.status} />
+													<StatusBadge status={execution.status} />
+												</div>
+											</TableCell>
+											<TableCell>
+												{startedAt ? (
+													<span className="text-sm">
+														{startedAt.toLocaleString('zh-CN')}
+													</span>
+												) : (
+													<span className="text-sm text-muted-foreground">-</span>
+												)}
+											</TableCell>
+											<TableCell>
+												{completedAt ? (
+													<span className="text-sm">
+														{completedAt.toLocaleString('zh-CN')}
+													</span>
+												) : (
+													<span className="text-sm text-muted-foreground">-</span>
+												)}
+											</TableCell>
+											<TableCell>
+												{duration ? (
+													<span className="text-sm">
+														{duration < 1000
+															? `${duration}ms`
+															: `${(duration / 1000).toFixed(1)}s`}
+													</span>
+												) : (
+													<span className="text-sm text-muted-foreground">-</span>
+												)}
+											</TableCell>
+											<TableCell>
+												{execution.ticketId ? (
+													<Link
+														href={`/tickets/${execution.ticketId}`}
+														className="text-sm text-primary hover:underline"
+													>
+														{execution.ticketId.slice(-12)}
+													</Link>
+												) : (
+													<span className="text-sm text-muted-foreground">-</span>
+												)}
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+					</div>
+				)}
+
+				{/* 错误信息展示 */}
+				{executions.some(e => e.errorMessage) && (
+					<Card className="mt-6">
+						<CardHeader>
+							<CardTitle className="text-base">错误信息</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="space-y-3">
+								{executions
+									.filter(e => e.errorMessage)
+									.map((execution) => (
+										<div key={execution.id} className="bg-destructive/10 rounded-lg p-3">
+											<div className="flex items-center gap-2 mb-1">
+												<XCircle className="h-4 w-4 text-destructive" />
+												<span className="text-sm font-mono">
+													{execution.id.slice(-12)}
+												</span>
+											</div>
+											<p className="text-sm text-destructive pl-6">
+												{execution.errorMessage}
+											</p>
+										</div>
+									))}
+							</div>
+						</CardContent>
+					</Card>
+				)}
+			</div>
+		</div>
+	);
+}