work-agent 0.1.0

package/app/(admin)/tickets/[id]/page.tsx

@@ -0,0 +1,348 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import type { Ticket } from '@/lib/db';
+import { TicketDetailContent } from '@/components/ticket-detail-content';
+
+export default function TicketDetailPage() {
+	const params = useParams();
+	const ticketId = params.id as string;
+
+	const [ticket, setTicket] = useState<Ticket | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [approving, setApproving] = useState(false);
+	const [executing, setExecuting] = useState(false);
+	const [submitting, setSubmitting] = useState(false);
+	const [comment, setComment] = useState('');
+	const [isOperationLoading, setIsOperationLoading] = useState(false);
+	const [deleting, setDeleting] = useState(false);
+
+	useEffect(() => {
+		async function fetchTicket() {
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}`);
+				if (!response.ok) {
+					if (response.status === 404) throw new Error('工单不存在');
+					throw new Error('获取工单失败');
+				}
+				const data = await response.json();
+				setTicket(data.ticket);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '未知错误');
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchTicket();
+	}, [ticketId]);
+
+	// Auto-refresh for executing tickets
+	useEffect(() => {
+		if (ticket?.status !== 'executing') return;
+
+		const interval = setInterval(async () => {
+			try {
+				const response = await fetch(`/api/tickets/${ticketId}`);
+				if (response.ok) {
+					const data = await response.json();
+					setTicket(data.ticket);
+				}
+			} catch (err) {
+				console.error('Failed to refresh ticket:', err);
+			}
+		}, 2000); // Poll every 2 seconds
+
+		return () => clearInterval(interval);
+	}, [ticketId, ticket?.status]);
+
+	const handleApprove = async () => {
+		setApproving(true);
+		setIsOperationLoading(true);
+		setError(null);
+		try {
+			const response = await fetch(`/api/tickets/${ticketId}/approve`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					action: 'approve',
+					approver: 'user',
+					comment,
+				}),
+			});
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '操作失败');
+			}
+			const data = await response.json();
+			setTicket(data.ticket);
+			setComment('');
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+		} finally {
+			setApproving(false);
+			setIsOperationLoading(false);
+		}
+	};
+
+	const handleReject = async () => {
+		setApproving(true);
+		setIsOperationLoading(true);
+		setError(null);
+		try {
+			const response = await fetch(`/api/tickets/${ticketId}/approve`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					action: 'reject',
+					approver: 'user',
+					comment,
+				}),
+			});
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '操作失败');
+			}
+			const data = await response.json();
+			setTicket(data.ticket);
+			setComment('');
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+		} finally {
+			setApproving(false);
+			setIsOperationLoading(false);
+		}
+	};
+
+	const handleSubmit = async () => {
+		setSubmitting(true);
+		setError(null);
+		try {
+			const response = await fetch(`/api/tickets/${ticketId}`, {
+				method: 'PUT',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ status: 'pending' }),
+			});
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '操作失败');
+			}
+			const data = await response.json();
+			setTicket(data.ticket);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+		} finally {
+			setSubmitting(false);
+		}
+	};
+
+	const handleExecute = async () => {
+		setExecuting(true);
+		setIsOperationLoading(true);
+		setError(null);
+
+		// Immediately update UI to show executing state
+		setTicket(prev => prev ? { ...prev, status: 'executing' as const } : null);
+
+		try {
+			const response = await fetch(`/api/tickets/${ticketId}/execute`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ ticketId }),
+			});
+			const data = await response.json();
+			if (!response.ok) {
+				throw new Error(data.error || '执行失败');
+			}
+			// Update with the latest ticket data from server
+			if (data.ticket) {
+				setTicket(data.ticket);
+			}
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+			// Refresh ticket to get current state on error
+			try {
+				const refreshResponse = await fetch(`/api/tickets/${ticketId}`);
+				if (refreshResponse.ok) {
+					const refreshData = await refreshResponse.json();
+					setTicket(refreshData.ticket);
+				}
+			} catch (refreshErr) {
+				// Ignore refresh errors
+			}
+		} finally {
+			setExecuting(false);
+			setIsOperationLoading(false);
+		}
+	};
+
+	const handleDelete = async () => {
+		if (!confirm('确定要删除这个草稿工单吗？此操作不可恢复。')) {
+			return;
+		}
+
+		setDeleting(true);
+		setError(null);
+		try {
+			const response = await fetch(`/api/tickets/${ticketId}`, {
+				method: 'DELETE',
+			});
+			if (!response.ok) {
+				const data = await response.json();
+				throw new Error(data.error || '删除失败');
+			}
+			window.location.href = '/tickets';
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+			setDeleting(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<div className="w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+			</div>
+		);
+	}
+
+	if (error || !ticket) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<div className="bg-red-50 border border-red-200 rounded-xl p-8 max-w-md">
+					<p className="text-red-800 text-center">{error || '工单不存在'}</p>
+					<Link href="/tickets" className="block mt-4 text-center text-blue-600 hover:underline">
+						← 返回工单列表
+					</Link>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="p-6">
+			<div className="max-w-4xl mx-auto">
+				<Link href="/tickets" className="inline-flex items-center text-blue-600 hover:underline text-sm mb-6">
+					← 返回工单列表
+				</Link>
+
+				{/* 草稿状态的特殊处理 */}
+				{ticket.status === 'draft' && (
+					<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-4">
+						<h3 className="text-lg font-semibold text-slate-900 mb-4">草稿操作</h3>
+						<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-4">
+							<p className="text-sm text-slate-700">
+								<span className="font-medium">📝 草稿状态</span>
+								<br />
+								<span className="text-xs text-slate-600">此工单尚未提交审核。您可以编辑命令、提交审核或删除工单。</span>
+							</p>
+						</div>
+						<div className="flex gap-3">
+							<Link
+								href={`/tickets/new?edit=${ticketId}`}
+								className="flex-1 px-4 py-3 bg-slate-600 text-white rounded-lg hover:bg-slate-700 text-center text-sm font-medium transition-colors"
+							>
+								✏️ 编辑命令
+							</Link>
+							<button
+								onClick={handleSubmit}
+								disabled={submitting}
+								className="flex-1 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium transition-colors flex items-center justify-center gap-2"
+							>
+								{submitting ? (
+									<>
+										<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+										提交中...
+									</>
+								) : (
+									<>
+										<span>📤</span>
+										提交审核
+									</>
+								)}
+							</button>
+						</div>
+						<div className="mt-3">
+							<button
+								onClick={handleDelete}
+								disabled={deleting}
+								className="w-full px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg hover:bg-red-100 disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium transition-colors flex items-center justify-center gap-2"
+							>
+								{deleting ? (
+									<>
+										<div className="w-4 h-4 border-2 border-red-600 border-t-transparent rounded-full animate-spin"></div>
+										删除中...
+									</>
+								) : (
+									<>
+										<span>🗑️</span>
+										删除工单
+									</>
+								)}
+							</button>
+						</div>
+					</div>
+				)}
+
+				{/* 执行状态的显示 */}
+				{(ticket.status === 'executing' || ticket.status === 'completed' || ticket.status === 'failed') && (
+					<div className={`rounded-lg p-4 mb-4 ${
+						ticket.status === 'executing' ? 'bg-blue-50 border border-blue-200' :
+						ticket.status === 'completed' ? 'bg-green-50 border border-green-200' :
+						'bg-red-50 border border-red-200'
+					}`}>
+						<div className="flex items-center gap-3">
+							{ticket.status === 'executing' && (
+								<div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+							)}
+							{ticket.status === 'completed' && <span className="text-2xl">✅</span>}
+							{ticket.status === 'failed' && <span className="text-2xl">❌</span>}
+							<div>
+								<p className={`font-medium ${
+									ticket.status === 'executing' ? 'text-blue-900' :
+									ticket.status === 'completed' ? 'text-green-900' :
+									'text-red-900'
+								}`}>
+									{ticket.status === 'executing' && '正在执行...'}
+									{ticket.status === 'completed' && '执行完成'}
+									{ticket.status === 'failed' && '执行失败'}
+								</p>
+								<p className={`text-sm mt-1 ${
+									ticket.status === 'executing' ? 'text-blue-700' :
+									ticket.status === 'completed' ? 'text-green-700' :
+									'text-red-700'
+								}`}>
+									{ticket.status === 'executing' && '正在对 Kubernetes 集群执行操作，请稍候...'}
+									{ticket.status === 'completed' && '工单已成功执行，集群已更新。'}
+									{ticket.status === 'failed' && '执行过程中发生错误，请检查审计日志获取详细信息。'}
+								</p>
+							</div>
+						</div>
+						{(ticket.status === 'completed' || ticket.status === 'failed') && (
+							<Link
+								href="/audit"
+								className="mt-4 block text-center text-sm text-blue-600 hover:text-blue-700"
+							>
+								查看审计日志 →
+							</Link>
+						)}
+					</div>
+				)}
+
+				{/* 主要内容区域使用 TicketDetailContent */}
+				<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+					<TicketDetailContent
+						ticket={ticket}
+						onApprove={handleApprove}
+						onReject={handleReject}
+						onExecute={handleExecute}
+						loading={approving || executing || isOperationLoading}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}

package/app/(admin)/tickets/new/page.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import { useState, useEffect, Suspense } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import type { Ticket } from '@/lib/db';
+
+function NewTicketPageContent() {
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const editId = searchParams.get('edit');
+	const [loading, setLoading] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [initializing, setInitializing] = useState(!!editId);
+	const [formData, setFormData] = useState<{
+		type: 'bash-execute' | 'skill-script';
+		title: string;
+		description: string;
+		priority: 'low' | 'medium' | 'high' | 'critical';
+		command: string;
+		commandType: string;
+		skillName: string;
+		scriptContent: string;
+		scriptPath: string;
+	}>({
+		type: 'bash-execute',
+		title: '',
+		description: '',
+		priority: 'medium',
+		command: '',
+		commandType: 'kubectl',
+		skillName: '',
+		scriptContent: '',
+		scriptPath: '',
+	});
+
+	useEffect(() => {
+		async function loadTicket() {
+			if (!editId) return;
+
+			try {
+				const response = await fetch(`/api/tickets/${editId}`);
+				if (!response.ok) throw new Error('加载工单失败');
+
+				const data = await response.json();
+				const ticket: Ticket = data.ticket;
+
+				setFormData({
+					type: ticket.type,
+					title: ticket.title,
+					description: ticket.description || '',
+					priority: ticket.priority,
+					command: ticket.command || '',
+					commandType: ticket.commandType || 'kubectl',
+					skillName: ticket.skillName || '',
+					scriptContent: ticket.scriptContent || '',
+					scriptPath: ticket.scriptPath || '',
+				});
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '加载工单失败');
+			} finally {
+				setInitializing(false);
+			}
+		}
+
+		loadTicket();
+	}, [editId]);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setSaving(true);
+		setError(null);
+
+		try {
+			if (editId) {
+				const response = await fetch(`/api/tickets/${editId}`, {
+					method: 'PUT',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(formData),
+				});
+
+				if (!response.ok) {
+					const data = await response.json();
+					throw new Error(data.error || '保存工单失败');
+				}
+
+				router.push(`/tickets/${editId}`);
+			} else {
+				const response = await fetch('/api/tickets', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({
+						...formData,
+						status: 'draft',
+						createdBy: 'user',
+					}),
+				});
+
+				if (!response.ok) {
+					const data = await response.json();
+					throw new Error(data.error || '创建工单失败');
+				}
+
+				router.push('/tickets');
+			}
+		} catch (err) {
+			setError(err instanceof Error ? err.message : '未知错误');
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	return (
+		<>
+			{(saving || initializing) && (
+				<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+					<div className="bg-white rounded-xl p-8 flex flex-col items-center gap-4">
+						<div className="w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+						<p className="text-slate-700">{saving ? '保存中...' : '加载中...'}</p>
+					</div>
+				</div>
+			)}
+			<div className="p-6">
+				<div className="max-w-3xl mx-auto">
+					<Link href={editId ? `/tickets/${editId}` : '/tickets'} className="inline-flex items-center text-blue-600 hover:underline text-sm mb-6">
+						← 返回工单详情
+					</Link>
+
+					<div className="mb-6">
+						<h1 className="text-2xl font-bold text-slate-900">{editId ? '编辑命令' : '创建新工单'}</h1>
+						<p className="text-slate-500 text-sm mt-1">{editId ? '修改命令内容后保存' : '填写以下信息创建新的操作工单'}</p>
+					</div>
+
+					<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+						{error && (
+							<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+								<p className="text-red-800 text-sm">❌ {error}</p>
+							</div>
+						)}
+
+						<form onSubmit={handleSubmit} className="space-y-6">
+							<div className="grid grid-cols-2 gap-4">
+								<div>
+									<label htmlFor="type" className="block text-sm font-medium text-slate-700 mb-2">
+										执行类型 <span className="text-red-500">*</span>
+									</label>
+									<select
+										id="type"
+										value={formData.type}
+										onChange={(e) => setFormData({ ...formData, type: e.target.value as 'bash-execute' | 'skill-script' })}
+										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+										required
+									>
+										<option value="bash-execute">💻 Bash 命令</option>
+										<option value="skill-script">🛠️ Skill 脚本</option>
+									</select>
+								</div>
+
+								<div>
+									<label htmlFor="priority" className="block text-sm font-medium text-slate-700 mb-2">
+										优先级
+									</label>
+									<select
+										id="priority"
+										value={formData.priority}
+										onChange={(e) => setFormData({ ...formData, priority: e.target.value as 'low' | 'medium' | 'high' | 'critical' })}
+										className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+									>
+										<option value="low">🟢 低风险</option>
+										<option value="medium">🟡 中风险</option>
+										<option value="high">🟠 高风险</option>
+										<option value="critical">🔴 极高风险</option>
+									</select>
+								</div>
+							</div>
+
+							<div>
+								<label htmlFor="title" className="block text-sm font-medium text-slate-700 mb-2">
+									工单标题 <span className="text-red-500">*</span>
+								</label>
+								<input
+									id="title"
+									type="text"
+									value={formData.title}
+									onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+									className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+									placeholder="例如：查看集群状态"
+									required
+								/>
+							</div>
+
+							<div>
+								<label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-2">
+									描述
+								</label>
+								<textarea
+									id="description"
+									value={formData.description}
+									onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+									className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+									rows={3}
+									placeholder="描述这次操作的详细信息和目的..."
+								/>
+							</div>
+
+							{formData.type === 'bash-execute' && (
+								<>
+									<div>
+										<label htmlFor="commandType" className="block text-sm font-medium text-slate-700 mb-2">
+											命令类型
+										</label>
+										<select
+											id="commandType"
+											value={formData.commandType}
+											onChange={(e) => setFormData({ ...formData, commandType: e.target.value })}
+											className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+										>
+											<option value="kubectl">kubectl</option>
+											<option value="docker">docker</option>
+											<option value="git">git</option>
+											<option value="other">其他</option>
+										</select>
+									</div>
+
+									<div>
+										<label htmlFor="command" className="block text-sm font-medium text-slate-700 mb-2">
+											执行命令 <span className="text-red-500">*</span>
+										</label>
+										<textarea
+											id="command"
+											value={formData.command}
+											onChange={(e) => setFormData({ ...formData, command: e.target.value })}
+											className="w-full h-32 px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+											placeholder="例如：kubectl get pods -n default"
+											required
+										/>
+									</div>
+								</>
+							)}
+
+							{formData.type === 'skill-script' && (
+								<>
+									<div>
+										<label htmlFor="skillName" className="block text-sm font-medium text-slate-700 mb-2">
+											Skill 名称 <span className="text-red-500">*</span>
+										</label>
+										<input
+											id="skillName"
+											type="text"
+											value={formData.skillName}
+											onChange={(e) => setFormData({ ...formData, skillName: e.target.value })}
+											className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+											placeholder="例如：k8s-ops"
+											required
+										/>
+									</div>
+
+									<div>
+										<label htmlFor="scriptContent" className="block text-sm font-medium text-slate-700 mb-2">
+											脚本内容 <span className="text-red-500">*</span>
+										</label>
+										<textarea
+											id="scriptContent"
+											value={formData.scriptContent}
+											onChange={(e) => setFormData({ ...formData, scriptContent: e.target.value })}
+											className="w-full h-48 px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+											placeholder="#!/bin/bash&#10;echo 'Hello World'"
+											required
+										/>
+									</div>
+								</>
+							)}
+
+							<div className="flex gap-3 pt-4 border-t border-gray-100">
+								<button
+									type="submit"
+									disabled={saving}
+									className="flex-1 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors"
+								>
+									{saving ? '保存中...' : (editId ? '保存修改' : '创建工单')}
+								</button>
+								<button
+									type="button"
+									onClick={() => router.push(editId ? `/tickets/${editId}` : '/tickets')}
+									className="px-4 py-2.5 border border-gray-200 text-slate-700 rounded-lg hover:bg-gray-50 font-medium transition-colors"
+								>
+									取消
+								</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default function NewTicketPage() {
+	return (
+		<Suspense fallback={
+			<div className="flex items-center justify-center h-full">
+				<div className="text-slate-500">加载中...</div>
+			</div>
+		}>
+			<NewTicketPageContent />
+		</Suspense>
+	);
+}

package/app/(admin)/tickets/page.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { Plus } from 'lucide-react';
+import { TicketList } from '@/components/ticket-list';
+import { Button } from '@/components/ui/button';
+
+export default function TicketsPage() {
+	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">创建和管理 Kubernetes 操作工单</p>
+					</div>
+					<Button asChild>
+						<Link href="/tickets/new">
+							<Plus className="mr-2 h-4 w-4" />
+							新建工单
+						</Link>
+					</Button>
+				</div>
+
+			<TicketList />
+		</div>
+	</div>
+	);
+}