work-agent 0.1.0

package/components/ticket-list.tsx

@@ -0,0 +1,366 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Terminal, Wrench, CheckCircle, XCircle, Clock, Zap, Trash2 } from 'lucide-react';
+import type { Ticket } 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';
+
+export function TicketList({ status }: { status?: string }) {
+	const [tickets, setTickets] = useState<Ticket[]>([]);
+	const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	// 搜索和筛选状态
+	const [searchQuery, setSearchQuery] = useState('');
+	const [statusFilter, setStatusFilter] = useState(status || 'all');
+	const [typeFilter, setTypeFilter] = useState('all');
+
+	useEffect(() => {
+		async function fetchTickets() {
+			try {
+				const response = await fetch('/api/tickets');
+				if (!response.ok) throw new Error('获取工单失败');
+
+				const data = await response.json();
+				setTickets(data.tickets);
+				setFilteredTickets(data.tickets);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : '未知错误');
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchTickets();
+	}, []);
+
+	// 筛选和搜索逻辑
+	useEffect(() => {
+		let filtered = tickets;
+
+		// 状态筛选
+		if (statusFilter !== 'all') {
+			filtered = filtered.filter(t => t.status === statusFilter);
+		}
+
+		// 类型筛选
+		if (typeFilter !== 'all') {
+			filtered = filtered.filter(t => t.type === typeFilter);
+		}
+
+		// 搜索
+		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) ||
+				t.skillName?.toLowerCase().includes(query) ||
+				t.scriptContent?.toLowerCase().includes(query)
+			);
+		}
+
+		setFilteredTickets(filtered);
+	}, [tickets, statusFilter, typeFilter, searchQuery]);
+
+	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) {
+		return (
+			<div className="bg-destructive/10 border border-destructive/20 rounded-xl p-6">
+				<p className="text-destructive">❌ {error}</p>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4">
+			{/* 搜索和筛选栏 */}
+			<div className="bg-card rounded-xl border shadow-sm 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="搜索工单标题、描述、ID、集群或资源名称..."
+							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="draft">草稿</SelectItem>
+								<SelectItem value="pending">待审核</SelectItem>
+								<SelectItem value="approved">已批准</SelectItem>
+								<SelectItem value="executing">执行中</SelectItem>
+								<SelectItem value="completed">已完成</SelectItem>
+								<SelectItem value="failed">失败</SelectItem>
+								<SelectItem value="rejected">已拒绝</SelectItem>
+							</SelectContent>
+						</Select>
+						<Select value={typeFilter} onValueChange={setTypeFilter}>
+							<SelectTrigger className="w-[140px]">
+								<SelectValue placeholder="所有类型" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="all">所有类型</SelectItem>
+								<SelectItem value="bash-execute">💻 Bash 命令</SelectItem>
+								<SelectItem value="skill-script">🛠️ Skill 脚本</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+				{filteredTickets.length !== tickets.length && (
+					<p className="text-sm text-muted-foreground mt-2">
+						找到 {filteredTickets.length} 个工单（共 {tickets.length} 个）
+					</p>
+				)}
+			</div>
+
+			{/* 工单表格 */}
+			{filteredTickets.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">
+						{searchQuery || statusFilter !== 'all' || typeFilter !== 'all'
+							? '没有符合条件的工单，请调整筛选条件'
+							: '点击上方"新建工单"创建第一个工单'}
+					</p>
+				</div>
+			) : (
+				<div className="bg-card rounded-xl border shadow-sm overflow-hidden">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>工单</TableHead>
+								<TableHead>状态</TableHead>
+								<TableHead>类型</TableHead>
+								<TableHead>优先级</TableHead>
+								<TableHead>风险等级</TableHead>
+								<TableHead>创建时间</TableHead>
+								<TableHead className="text-right">操作</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{filteredTickets.map((ticket) => (
+								<TableRow key={ticket.id}>
+									<TableCell>
+										<div className="flex items-start gap-3">
+											<TypeIcon type={ticket.type} />
+											<div className="flex-1 min-w-0">
+												<Link
+													href={`/tickets/${ticket.id}`}
+													className="font-medium hover:text-primary transition-colors block truncate"
+												>
+													{ticket.title}
+												</Link>
+												<p className="text-xs text-muted-foreground truncate">{ticket.id}</p>
+											</div>
+										</div>
+									</TableCell>
+									<TableCell>
+										<StatusBadge status={ticket.status} />
+									</TableCell>
+									<TableCell>
+										<TypeBadge type={ticket.type} />
+									</TableCell>
+									<TableCell>
+										<PriorityBadge priority={ticket.priority} />
+									</TableCell>
+									<TableCell>
+										<RiskBadge risk={ticket.riskLevel} />
+									</TableCell>
+									<TableCell>
+										<span className="text-sm text-muted-foreground">
+											{new Date(ticket.createdAt).toLocaleDateString('zh-CN')}
+										</span>
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex items-center justify-end gap-1">
+											{ticket.status === 'approved' && (
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={async () => {
+														if (!confirm(`确定执行工单 "${ticket.title}" 吗？`)) return;
+														try {
+															const response = await fetch(`/api/tickets/${ticket.id}/execute`, {
+																method: 'POST',
+																headers: { 'Content-Type': 'application/json' },
+																body: JSON.stringify({ ticketId: ticket.id }),
+															});
+															if (response.ok) {
+																const data = await response.json();
+																setTickets(tickets.map(t => t.id === ticket.id ? data.ticket : t));
+															}
+														} catch (err) {
+															console.error(err);
+														}
+													}}
+													className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
+													title="执行工单"
+												>
+													<Zap className="h-4 w-4" />
+												</Button>
+											)}
+											{ticket.status === 'pending' && (
+												<>
+													<Button
+														variant="ghost"
+														size="icon"
+														onClick={async () => {
+															if (!confirm(`批准工单 "${ticket.title}"？`)) return;
+															try {
+																const response = await fetch(`/api/tickets/${ticket.id}/approve`, {
+																	method: 'POST',
+																	headers: { 'Content-Type': 'application/json' },
+																	body: JSON.stringify({ action: 'approve', approver: 'user', comment: '' }),
+																});
+																if (response.ok) {
+																	const data = await response.json();
+																	setTickets(tickets.map(t => t.id === ticket.id ? data.ticket : t));
+																}
+															} catch (err) {
+																console.error(err);
+															}
+														}}
+														className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
+														title="批准"
+													>
+														✓
+													</Button>
+													<Button
+														variant="ghost"
+														size="icon"
+														onClick={async () => {
+															if (!confirm(`拒绝工单 "${ticket.title}"？`)) return;
+															try {
+																const response = await fetch(`/api/tickets/${ticket.id}/approve`, {
+																	method: 'POST',
+																	headers: { 'Content-Type': 'application/json' },
+																	body: JSON.stringify({ action: 'reject', approver: 'user', comment: '' }),
+																});
+																if (response.ok) {
+																	const data = await response.json();
+																	setTickets(tickets.map(t => t.id === ticket.id ? data.ticket : t));
+																}
+															} catch (err) {
+																console.error(err);
+															}
+														}}
+														className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+														title="拒绝"
+													>
+														✗
+													</Button>
+												</>
+											)}
+											<Button
+												variant="ghost"
+												size="icon"
+												asChild
+												className="h-8 w-8"
+											>
+												<Link href={`/tickets/${ticket.id}`} title="查看详情">
+													→
+												</Link>
+											</Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+			)}
+		</div>
+	);
+}
+
+// 工单类型图标组件
+function TypeIcon({ type }: { type: Ticket['type'] }) {
+	const iconMap: Record<string, typeof Terminal> = {
+		'bash-execute': Terminal,
+		'skill-script': Wrench,
+	};
+	const Icon = iconMap[type] || Terminal;
+	return <Icon className="h-5 w-5 text-muted-foreground flex-shrink-0" />;
+}
+
+// 类型徽章组件
+function TypeBadge({ type }: { type: Ticket['type'] }) {
+	const config: Record<string, { label: string; variant: 'secondary' | 'outline' | 'default' | 'destructive' }> = {
+		'bash-execute': { label: 'Bash', variant: 'secondary' },
+		'skill-script': { label: 'Skill', variant: 'outline' },
+	};
+	const { label, variant } = config[type] || { label: type, variant: 'secondary' };
+	return <Badge variant={variant}>{label}</Badge>;
+}
+
+// 状态徽章组件
+function StatusBadge({ status }: { status: Ticket['status'] }) {
+	const config = {
+		draft: { label: '草稿', variant: 'secondary' as const },
+		pending: { label: '待审核', variant: 'outline' as const },
+		approved: { label: '已批准', variant: 'default' as const },
+		rejected: { label: '已拒绝', variant: 'destructive' as const },
+		executing: { label: '执行中', variant: 'outline' as const },
+		completed: { label: '已完成', variant: 'default' as const },
+		failed: { label: '失败', variant: 'destructive' as const },
+		deleted: { label: '已删除', variant: 'secondary' as const },
+	};
+	const { label, variant } = config[status] || config.draft;
+	return <Badge variant={variant}>{label}</Badge>;
+}
+
+// 优先级徽章组件
+function PriorityBadge({ priority }: { priority: Ticket['priority'] }) {
+	const config: Record<string, { label: string; variant: 'secondary' | 'outline' | 'default' | 'destructive' }> = {
+		low: { label: '低', variant: 'secondary' },
+		medium: { label: '中', variant: 'outline' },
+		high: { label: '高', variant: 'destructive' },
+		critical: { label: '极高', variant: 'destructive' },
+	};
+	const { label, variant } = config[priority] || config.medium;
+	return <Badge variant={variant}>{label}</Badge>;
+}
+
+// 风险等级徽章组件
+function RiskBadge({ risk }: { risk: Ticket['riskLevel'] }) {
+	const config: Record<string, { label: string; variant: 'secondary' | 'outline' | 'default' | 'destructive' }> = {
+		low: { label: '低风险', variant: 'secondary' },
+		medium: { label: '中风险', variant: 'outline' },
+		high: { label: '高风险', variant: 'destructive' },
+		critical: { label: '极高风险', variant: 'destructive' },
+	};
+	const { label, variant } = config[risk] || config.medium;
+	return <Badge variant={variant}>{label}</Badge>;
+}

package/components/top-nav.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import {
+	Bot,
+	ClipboardList,
+	CheckCircle,
+	FileText,
+	Settings,
+	BookOpen,
+	Clock,
+	Package,
+	User,
+	LogOut,
+	Shield,
+	Sparkles,
+} from 'lucide-react';
+
+export function TopNav() {
+	const pathname = usePathname() || '';
+	const [role, setRole] = useState<'admin' | 'guest'>('guest');
+	const [username, setUsername] = useState('');
+	const [avatar, setAvatar] = useState('');
+
+	useEffect(() => {
+		const savedRole = localStorage.getItem('role');
+		if (savedRole === 'admin') {
+			setRole('admin');
+		}
+		
+		const savedUsername = localStorage.getItem('username');
+		if (savedUsername) {
+			setUsername(savedUsername);
+		}
+
+		const savedAvatar = localStorage.getItem('feishuAvatar');
+		if (savedAvatar) {
+			setAvatar(savedAvatar);
+		}
+	}, []);
+
+	const handleLogout = () => {
+		localStorage.removeItem('userId');
+		localStorage.removeItem('username');
+		localStorage.removeItem('role');
+		window.location.href = '/login';
+	};
+
+	const isActive = (path: string) => {
+		if (path === '/') return pathname === '/';
+		return pathname.startsWith(path);
+	};
+
+	const navItems = [
+		{ href: '/', label: 'AI助手', icon: Sparkles },
+		{ href: '/market', label: '市场', icon: Package },
+		{ href: '/my/knowledge', label: '我的', icon: User },
+		{ 
+			href: role === 'admin' ? '/tickets' : '/', 
+			label: '系统', 
+			icon: Settings,
+			adminOnly: true 
+		},
+	];
+
+	return (
+		<header className="bg-white border-b h-12 flex items-center px-4 gap-1 justify-between">
+			<div className="flex items-center gap-1">
+				<Link href="/" className="flex items-center gap-2 mr-6 no-underline">
+					<div className="w-7 h-7 rounded-md bg-blue-600 flex items-center justify-center">
+						<Bot className="h-4 w-4 text-white" />
+					</div>
+					<span className="font-semibold text-sm text-gray-900">智能工作助手</span>
+				</Link>
+
+				{navItems.map((item) => {
+					const Icon = item.icon;
+					// 管理员显示所有，非管理员隐藏系统
+					if (item.adminOnly && role !== 'admin') return null;
+					
+					return (
+						<Link
+							key={item.href}
+							href={item.href}
+							className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm no-underline ${
+								isActive(item.href)
+									? 'bg-blue-600 text-white'
+									: 'text-gray-600 hover:bg-gray-100'
+							}`}
+						>
+							<Icon className="h-4 w-4" />
+							{item.label}
+						</Link>
+					);
+				})}
+			</div>
+
+			<div className="flex items-center gap-3">
+				<div className="flex items-center gap-2 px-2 py-1 bg-gray-50 rounded text-xs">
+					{avatar ? (
+						<img 
+							src={avatar} 
+							alt={username}
+							className="w-5 h-5 rounded-full object-cover"
+						/>
+					) : role === 'admin' ? (
+						<Shield className="h-3 w-3 text-blue-600" />
+					) : (
+						<User className="h-3 w-3 text-gray-500" />
+					)}
+					<span className="text-gray-700">{username}</span>
+					{role === 'admin' && (
+						<>
+							<span className="text-gray-400">|</span>
+							<span className="text-blue-600 font-medium">管理员</span>
+						</>
+					)}
+				</div>
+				<button
+					onClick={handleLogout}
+					className="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+					title="退出登录"
+				>
+					<LogOut className="h-3 w-3" />
+					退出
+				</button>
+			</div>
+		</header>
+	);
+}

package/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }