work-agent 0.1.0

package/components/ticket-detail-content.tsx

@@ -0,0 +1,383 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { Ticket } from '@/lib/db';
+import { Button } from '@/components/ui/button';
+
+interface TicketDetailContentProps {
+	ticket: Ticket;
+	onApprove?: () => void;
+	onReject?: () => void;
+	onExecute?: () => void;
+	loading?: boolean;
+	showActions?: boolean;
+}
+
+interface AuditLog {
+	id: string;
+	action: string;
+	userId: string;
+	timestamp: Date;
+	status: 'success' | 'failure';
+	details?: unknown;
+}
+
+const ACTION_LABELS: Record<string, string> = {
+	'ticket_created': '工单创建',
+	'ticket_executed': '工单执行',
+	'ticket_execution_failed': '执行失败',
+	'ticket_execution_error': '执行异常',
+	'status_transition': '状态变更',
+	'ticket_approve': '工单审批',
+	'execution_failed': '执行失败',
+	'scheduled_task_created': '定时任务创建',
+	'scheduled_task_start': '任务开始',
+	'scheduled_task_complete': '任务完成',
+	'scheduled_task_failed': '任务失败',
+	'blocked_automated_execution': '自动执行被拦截',
+	'blocked_automated_approval': '自动审批被拦截',
+	'ticket_deleted': '工单删除',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+	'draft': '草稿',
+	'pending': '待审核',
+	'approved': '已批准',
+	'rejected': '已拒绝',
+	'executing': '执行中',
+	'completed': '已完成',
+	'failed': '失败',
+};
+
+function formatAuditAction(action: string): string {
+	return ACTION_LABELS[action] || action;
+}
+
+function formatAuditDetails(action: string, details: unknown): string {
+	if (!details || typeof details !== 'object') return '';
+	
+	const d = details as Record<string, unknown>;
+	
+	switch (action) {
+		case 'ticket_executed':
+			if (d.output) return `输出: ${String(d.output).substring(0, 200)}${String(d.output).length > 200 ? '...' : ''}`;
+			if (d.executionTime) return `耗时: ${d.executionTime}ms`;
+			return '';
+		case 'ticket_execution_failed':
+		case 'ticket_execution_error':
+			return d.error ? `错误: ${d.error}` : '';
+		case 'status_transition': {
+			const from = d.from ? STATUS_LABELS[String(d.from)] || String(d.from) : '';
+			const to = d.to ? STATUS_LABELS[String(d.to)] || String(d.to) : '';
+			return `从 "${from}" → "${to}"`;
+		}
+		case 'scheduled_task_start':
+			return d.command ? `命令: ${d.command}` : '';
+		case 'scheduled_task_complete':
+			return d.output ? `输出: ${String(d.output).substring(0, 100)}` : '';
+		case 'scheduled_task_failed':
+			return d.error ? `错误: ${d.error}` : '';
+		default:
+			return '';
+	}
+}
+
+export function TicketDetailContent({
+	ticket,
+	onApprove,
+	onReject,
+	onExecute,
+	loading = false,
+	showActions = true,
+}: TicketDetailContentProps) {
+	const [comment, setComment] = useState('');
+	const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
+	const [loadingLogs, setLoadingLogs] = useState(false);
+
+	useEffect(() => {
+		async function fetchAuditLogs() {
+			setLoadingLogs(true);
+			try {
+				const response = await fetch(`/api/audit?ticketId=${ticket.id}&limit=20`);
+				if (response.ok) {
+					const data = await response.json();
+					setAuditLogs(data.logs || []);
+				}
+			} catch (error) {
+				console.error('Failed to fetch audit logs:', error);
+			} finally {
+				setLoadingLogs(false);
+			}
+		}
+		fetchAuditLogs();
+	}, [ticket.id]);
+
+	const getRiskBadge = (risk: string) => {
+		const config: Record<string, { label: string; className: string }> = {
+			low: { label: '低风险', className: 'bg-green-100 text-green-800 border-green-200' },
+			medium: { label: '中风险', className: 'bg-yellow-100 text-yellow-800 border-yellow-200' },
+			high: { label: '高风险', className: 'bg-orange-100 text-orange-800 border-orange-200' },
+			critical: { label: '极高风险', className: 'bg-red-100 text-red-800 border-red-200' },
+		};
+		const { label, className } = config[risk] || config.medium;
+		return <span className={`px-2 py-0.5 rounded-full text-xs border ${className}`}>{label}</span>;
+	};
+
+	const getTypeEmoji = (type: string) => {
+		const emojis: Record<string, string> = {
+			'bash-execute': '💻',
+			'skill-script': '🛠️',
+			'deploy': '🚀',
+			'scale': '📊',
+			'update': '🔄',
+			'delete': '🗑️',
+			'rollback': '⏪',
+		};
+		return emojis[type] || '📋';
+	};
+
+	const getStatusBadge = (status: string) => {
+		const config: Record<string, { label: string; className: string }> = {
+			draft: { label: '草稿', className: 'bg-gray-100 text-gray-800' },
+			pending: { label: '待审核', className: 'bg-yellow-100 text-yellow-800' },
+			approved: { label: '已批准', className: 'bg-green-100 text-green-800' },
+			rejected: { label: '已拒绝', className: 'bg-red-100 text-red-800' },
+			executing: { label: '执行中', className: 'bg-blue-100 text-blue-800' },
+			completed: { label: '已完成', className: 'bg-green-100 text-green-800' },
+			failed: { label: '失败', className: 'bg-red-100 text-red-800' },
+		};
+		const { label, className } = config[status] || config.pending;
+		return <span className={`px-2 py-0.5 rounded-full text-xs ${className}`}>{label}</span>;
+	};
+
+	return (
+		<div className="space-y-4">
+			{/* 标题 */}
+			<div className="flex items-start justify-between gap-4">
+				<div className="flex items-center gap-3">
+					<span className="text-2xl">{getTypeEmoji(ticket.type)}</span>
+					<div>
+						<h2 className="text-xl font-bold">{ticket.title}</h2>
+						<p className="text-xs text-muted-foreground">ID: {ticket.id}</p>
+					</div>
+				</div>
+				{getStatusBadge(ticket.status)}
+			</div>
+
+			{/* 风险等级 */}
+			{ticket.riskLevel && (
+				<div className="flex items-center gap-2">
+					<span className="text-sm text-muted-foreground">风险等级:</span>
+					{getRiskBadge(ticket.riskLevel)}
+				</div>
+			)}
+
+			{/* 核心信息卡片 */}
+			<div className="bg-muted/50 rounded-lg p-4 space-y-4">
+				{/* 命令执行 */}
+				{ticket.command && (
+					<div>
+						<h4 className="text-xs font-medium text-muted-foreground mb-1">执行命令</h4>
+						<div className="bg-gray-900 rounded px-3 py-2 font-mono text-sm overflow-x-auto max-w-full">
+							<pre className="whitespace-pre-wrap break-all text-green-400">{ticket.command}</pre>
+						</div>
+					</div>
+				)}
+
+				{/* Skill 脚本 */}
+				{ticket.scriptContent && (
+					<div>
+						<h4 className="text-xs font-medium text-muted-foreground mb-1">
+							Skill: {ticket.skillName || '未知'}
+						</h4>
+						<div className="bg-gray-900 rounded px-3 py-2 font-mono text-sm max-h-48 overflow-y-auto max-w-full">
+							<pre className="whitespace-pre-wrap break-all text-green-400">{ticket.scriptContent}</pre>
+						</div>
+					</div>
+				)}
+
+				{/* 受影响资源 */}
+				{ticket.affectedResources && ticket.affectedResources.length > 0 && (
+					<div>
+						<h4 className="text-xs font-medium text-muted-foreground mb-1">受影响资源</h4>
+						<div className="flex flex-wrap gap-1">
+							{ticket.affectedResources.map((resource, idx) => (
+								<span key={idx} className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs">
+									{resource}
+								</span>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+
+			{/* 描述/审批意见 */}
+			{ticket.description && (
+				<div className="text-sm text-muted-foreground bg-muted/30 p-3 rounded">
+					{ticket.description}
+				</div>
+			)}
+
+			{/* 执行结果 */}
+			{ticket.status === 'completed' && ticket.output && (
+				<div className="bg-green-50 border border-green-200 rounded-lg p-4">
+					<h4 className="text-xs font-medium text-green-800 mb-1">执行结果</h4>
+					<div className="bg-gray-900 rounded px-3 py-2 font-mono text-sm max-h-48 overflow-y-auto max-w-full">
+						<pre className="whitespace-pre-wrap break-all text-green-400">{ticket.output}</pre>
+					</div>
+				</div>
+			)}
+
+			{ticket.status === 'failed' && ticket.error && (
+				<div className="bg-red-50 border border-red-200 rounded-lg p-4">
+					<h4 className="text-xs font-medium text-red-800 mb-1">执行失败</h4>
+					<div className="text-red-700 text-sm">{ticket.error}</div>
+				</div>
+			)}
+
+				{/* 时间信息 */}
+				<div className="text-xs text-muted-foreground">
+					创建时间: {new Date(ticket.createdAt).toLocaleString('zh-CN')}
+				</div>
+
+			{/* 审批记录 */}
+			{ticket.approvals && ticket.approvals.length > 0 && (
+				<div className="border-t pt-4">
+					<h4 className="text-sm font-medium mb-2">审批记录</h4>
+					<div className="space-y-2">
+						{ticket.approvals.map((approval, idx) => (
+							<div key={idx} className="text-sm bg-muted/30 p-2 rounded">
+								<div className="flex items-center justify-between">
+									<span className="font-medium">{approval.approver}</span>
+									<span className={`text-xs px-2 py-0.5 rounded ${
+										approval.decision === 'approved' 
+											? 'bg-green-100 text-green-800' 
+											: 'bg-red-100 text-red-800'
+									}`}>
+										{approval.decision === 'approved' ? '已批准' : '已拒绝'}
+									</span>
+								</div>
+								{approval.comment && (
+									<div className="text-muted-foreground mt-1">{approval.comment}</div>
+								)}
+								<div className="text-xs text-muted-foreground mt-1">
+									{new Date(approval.timestamp).toLocaleString('zh-CN')}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+
+			{/* 审计日志 */}
+			{(auditLogs.length > 0 || loadingLogs) && (
+				<div className="border-t pt-4">
+					<h4 className="text-sm font-medium mb-2">审计日志</h4>
+					{loadingLogs ? (
+						<div className="text-xs text-muted-foreground">加载中...</div>
+					) : (
+						<div className="space-y-2 max-h-48 overflow-y-auto">
+							{[...auditLogs].reverse().map((log) => {
+								const details = formatAuditDetails(log.action, log.details);
+								return (
+									<div key={log.id} className="text-xs bg-muted/30 p-2 rounded">
+										<div className="flex items-center gap-2">
+											<span className={`w-2 h-2 rounded-full ${log.status === 'success' ? 'bg-green-500' : 'bg-red-500'}`}></span>
+											<span className="font-medium">{formatAuditAction(log.action)}</span>
+											<span className="text-muted-foreground">· {log.userId}</span>
+										</div>
+										{details && (
+											<div className="mt-1 text-muted-foreground font-mono text-xs bg-gray-100 p-1 rounded truncate">
+												{details}
+											</div>
+										)}
+										<div className="text-muted-foreground mt-1">
+											{new Date(log.timestamp).toLocaleString('zh-CN')}
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			)}
+
+			{/* 操作按钮 */}
+			{showActions && (
+				<div className="border-t pt-4 space-y-2">
+					{ticket.status === 'pending' && (
+						<>
+							<textarea
+								value={comment}
+								onChange={(e) => setComment(e.target.value)}
+								placeholder="审批意见（可选）"
+								className="w-full px-3 py-2 border rounded-lg text-sm bg-background"
+								rows={2}
+							/>
+							<div className="flex gap-2">
+								<Button
+									onClick={onApprove}
+									disabled={loading}
+									className="flex-1"
+									size="sm"
+								>
+									{loading ? (
+										<span className="flex items-center justify-center gap-2">
+											<span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+											处理中...
+										</span>
+									) : (
+										'✓ 批准'
+									)}
+								</Button>
+								<Button
+									variant="destructive"
+									onClick={onReject}
+									disabled={loading}
+									className="flex-1"
+									size="sm"
+								>
+									{loading ? (
+										<span className="flex items-center justify-center gap-2">
+											<span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+											处理中...
+										</span>
+									) : (
+										'✗ 拒绝'
+									)}
+								</Button>
+							</div>
+						</>
+					)}
+
+					{ticket.status === 'approved' && (
+						<Button
+							onClick={onExecute}
+							disabled={loading}
+							className="w-full"
+							size="sm"
+						>
+							{loading ? (
+								<span className="flex items-center justify-center gap-2">
+									<span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+									执行中...
+								</span>
+							) : (
+								'▶️ 执行工单'
+							)}
+						</Button>
+					)}
+
+					{ticket.status === 'executing' && (
+						<div className="text-center py-2 text-muted-foreground">
+							<span className="inline-flex items-center gap-2">
+								<span className="w-2 h-2 rounded-full bg-blue-600 animate-pulse"></span>
+								执行中...
+							</span>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}