work-agent 0.1.0

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

@@ -0,0 +1,284 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, Edit, History, Play, Pause, Trash2, Terminal, Zap } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import type { ScheduledTask } from '@/lib/db';
+
+export default function ScheduledTaskDetailPage() {
+	const params = useParams();
+	const router = useRouter();
+	const taskId = params.id as string;
+
+	const [task, setTask] = useState<ScheduledTask | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [executing, setExecuting] = useState(false);
+
+	useEffect(() => {
+		async function fetchTask() {
+			try {
+				const response = await fetch(`/api/scheduled-tasks/${taskId}`);
+				if (!response.ok) throw new Error('获取任务失败');
+
+				const data = await response.json();
+				setTask(data.task);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '加载失败');
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchTask();
+	}, [taskId]);
+
+	async function toggleTask() {
+		if (!task) return;
+
+		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();
+			setTask(data.task);
+		} catch (err) {
+			console.error(err);
+			alert('切换状态失败');
+		}
+	}
+
+	async function executeTask() {
+		if (!task) return;
+
+		try {
+			setExecuting(true);
+			const response = await fetch(`/api/scheduled-tasks/${taskId}/execute`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ userId: 'user' }),
+			});
+			if (!response.ok) {
+				const error = await response.json();
+				throw new Error(error.error || '执行失败');
+			}
+
+			// Reset state before navigation to avoid race condition
+			setExecuting(false);
+
+			// Show success and navigate to execution history
+			alert('任务已开始执行，正在跳转到执行历史...');
+			router.push(`/my/scheduled-tasks/${taskId}/executions`);
+		} catch (err) {
+			console.error(err);
+			alert(err instanceof Error ? err.message : '执行失败');
+			setExecuting(false);
+		}
+	}
+
+	async function deleteTask() {
+		if (!task || !confirm(`确定删除定时任务 "${task.title}" 吗？`)) return;
+
+		try {
+			const response = await fetch(`/api/scheduled-tasks/${taskId}?deletedBy=user`, {
+				method: 'DELETE',
+			});
+			if (!response.ok) throw new Error('删除失败');
+
+			router.push('/my/scheduled-tasks');
+		} catch (err) {
+			console.error(err);
+			alert('删除失败');
+		}
+	}
+
+	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>
+		);
+	}
+
+	const statusConfig = {
+		active: { label: '运行中', className: 'bg-green-500/10 text-green-700 border-green-500/20' },
+		paused: { label: '已暂停', className: 'bg-amber-500/10 text-amber-700 border-amber-500/20' },
+		disabled: { label: '已禁用', className: 'bg-gray-500/10 text-gray-700 border-gray-500/20' },
+	};
+
+	return (
+		<div className="p-6">
+			<div className="max-w-4xl mx-auto">
+				{/* 页面标题 */}
+				<div className="flex items-center justify-between mb-6">
+					<div className="flex items-center gap-4">
+						<Button variant="ghost" size="icon" asChild>
+							<Link href="/my/scheduled-tasks">
+								<ArrowLeft className="h-5 w-5" />
+							</Link>
+						</Button>
+						<div>
+							<h1 className="text-2xl font-bold">{task.title}</h1>
+							<p className="text-muted-foreground text-sm mt-1">{task.id}</p>
+						</div>
+					</div>
+					<div className="flex gap-2">
+						<Button
+							variant="outline"
+							size="icon"
+							onClick={toggleTask}
+							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="default"
+							size="icon"
+							onClick={executeTask}
+							disabled={executing}
+							title="立即执行"
+						>
+							{executing ? (
+								<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+							) : (
+								<Zap className="h-4 w-4" />
+							)}
+						</Button>
+						<Button variant="outline" size="icon" asChild title="执行历史">
+							<Link href={`/my/scheduled-tasks/${taskId}/executions`}>
+								<History className="h-4 w-4" />
+							</Link>
+						</Button>
+						<Button variant="outline" size="icon" asChild title="编辑">
+							<Link href={`/my/scheduled-tasks/${taskId}/edit`}>
+								<Edit className="h-4 w-4" />
+							</Link>
+						</Button>
+						<Button
+							variant="outline"
+							size="icon"
+							onClick={deleteTask}
+							className="text-destructive hover:text-destructive"
+							title="删除"
+						>
+							<Trash2 className="h-4 w-4" />
+						</Button>
+					</div>
+				</div>
+
+				<div className="grid gap-6">
+					{/* 基本信息卡片 */}
+					<Card>
+						<CardHeader>
+							<CardTitle>基本信息</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<dl className="grid grid-cols-2 gap-4">
+								<div>
+									<dt className="text-sm text-muted-foreground">状态</dt>
+									<dd className="mt-1">
+										<Badge className={statusConfig[task.status].className}>
+											{statusConfig[task.status].label}
+										</Badge>
+									</dd>
+								</div>
+								<div>
+									<dt className="text-sm text-muted-foreground">创建者</dt>
+									<dd className="mt-1">{task.createdBy}</dd>
+								</div>
+								<div>
+									<dt className="text-sm text-muted-foreground">创建时间</dt>
+									<dd className="mt-1">{new Date(task.createdAt).toLocaleString('zh-CN')}</dd>
+								</div>
+								<div>
+									<dt className="text-sm text-muted-foreground">更新时间</dt>
+									<dd className="mt-1">{new Date(task.updatedAt).toLocaleString('zh-CN')}</dd>
+								</div>
+								{task.description && (
+									<div className="col-span-2">
+										<dt className="text-sm text-muted-foreground">描述</dt>
+										<dd className="mt-1">{task.description}</dd>
+									</div>
+								)}
+							</dl>
+						</CardContent>
+					</Card>
+
+					{/* 命令配置卡片 */}
+					<Card>
+						<CardHeader>
+							<CardTitle className="flex items-center gap-2">
+								<Terminal className="h-5 w-5" />
+								执行命令
+							</CardTitle>
+							<CardDescription>定时任务将执行的命令</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm font-mono whitespace-pre-wrap">
+								{task.command}
+							</pre>
+						</CardContent>
+					</Card>
+
+					{/* 调度配置卡片 */}
+					<Card>
+						<CardHeader>
+							<CardTitle>调度配置</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<dl className="grid grid-cols-2 gap-4">
+								<div>
+									<dt className="text-sm text-muted-foreground">Cron 表达式</dt>
+									<dd className="mt-1">
+										<code className="bg-muted px-2 py-1 rounded text-sm font-mono">
+											{task.scheduleExpression}
+										</code>
+									</dd>
+								</div>
+								<div>
+									<dt className="text-sm text-muted-foreground">下次执行</dt>
+									<dd className="mt-1">
+										{task.nextRunAt ? (
+											new Date(task.nextRunAt).toLocaleString('zh-CN')
+										) : (
+											<span className="text-muted-foreground">未设置</span>
+										)}
+									</dd>
+								</div>
+								{task.lastRunAt && (
+									<div>
+										<dt className="text-sm text-muted-foreground">上次执行</dt>
+										<dd className="mt-1">{new Date(task.lastRunAt).toLocaleString('zh-CN')}</dd>
+									</div>
+								)}
+							</dl>
+						</CardContent>
+					</Card>
+				</div>
+			</div>
+		</div>
+	);
+}

package/app/my/scheduled-tasks/new/page.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } 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 { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+// 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 NewScheduledTaskPage() {
+	const router = useRouter();
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	// 表单状态
+	const [formData, setFormData] = useState({
+		title: '',
+		description: '',
+		command: '',
+		scheduleType: 'cron' as 'cron' | 'interval' | 'once',
+		scheduleExpression: CRON_PRESETS.daily_9am.expression,
+		cronPreset: '',
+	});
+
+	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();
+		setLoading(true);
+		setError(null);
+
+		try {
+			const response = await fetch('/api/scheduled-tasks', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					...formData,
+					createdBy: 'user',
+				}),
+			});
+
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '创建失败');
+			}
+
+			const data = await response.json();
+			router.push(`/my/scheduled-tasks/${data.task.id}`);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '创建失败');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	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">
+							<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>
+						</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={loading}>
+							<Save className="mr-2 h-4 w-4" />
+							{loading ? '创建中...' : '创建定时任务'}
+						</Button>
+						<Button type="button" variant="outline" asChild>
+							<Link href="/my/scheduled-tasks">取消</Link>
+						</Button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}

package/app/my/scheduled-tasks/page.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { Plus } from 'lucide-react';
+import { ScheduledTaskList } from '@/components/scheduled-task-list';
+import { Button } from '@/components/ui/button';
+
+export default function ScheduledTasksPage() {
+	return (
+		<div className="p-6">
+			<div className="max-w-7xl mx-auto">
+				<div className="flex items-center justify-between mb-6">
+					<div>
+						<h1 className="text-2xl font-bold">定时任务</h1>
+						<p className="text-muted-foreground text-sm mt-1">配置和管理定时执行的命令任务</p>
+					</div>
+					<Button asChild>
+						<Link href="/my/scheduled-tasks/new">
+							<Plus className="mr-2 h-4 w-4" />
+							新建定时任务
+						</Link>
+					</Button>
+				</div>
+
+				<ScheduledTaskList />
+			</div>
+		</div>
+	);
+}