work-agent 0.1.0

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

@@ -0,0 +1,416 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { 
+	LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+	BarChart, Bar, Legend 
+} from 'recharts';
+import { 
+	MessageSquare, Users, Terminal, Wrench, FileText, 
+	Search, Download, RefreshCw
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+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';
+
+interface StatisticsData {
+	period: string;
+	overview: {
+		totalSessions: number;
+		activeUsers: number;
+		totalMessages: number;
+		totalSkillCalls: number;
+		aiGeneratedTickets: number;
+	};
+	trends: { date: string; sessionCount: number; userCount: number }[];
+	userStats: { userId: string; sessionCount: number; messageCount: number; skillCallCount: number; lastActiveAt: string }[];
+	skillStats: { skillName: string; callCount: number; successCount: number; failCount: number; successRate: number; lastCalledAt: string }[];
+	knowledgeStats: { documentId: string; title: string; category: string; 引用次数: number }[];
+	sessions: { sessionId: string; userId: string; createdAt: string; lastAccessedAt: string; messageCount: number; title?: string }[];
+}
+
+export default function StatisticsPage() {
+	const [data, setData] = useState<StatisticsData | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [period, setPeriod] = useState<'7d' | '30d' | 'all'>('7d');
+	const [searchQuery, setSearchQuery] = useState('');
+	const [sessionSearch, setSessionSearch] = useState('');
+
+	useEffect(() => {
+		fetchStatistics();
+	}, [period]);
+
+	async function fetchStatistics() {
+		setLoading(true);
+		try {
+			const response = await fetch(`/api/statistics?period=${period}`);
+			const result = await response.json();
+			setData(result);
+		} catch (err) {
+			console.error('Failed to fetch statistics:', err);
+		} finally {
+			setLoading(false);
+		}
+	}
+
+	async function clearCache() {
+		await fetch('/api/statistics', { method: 'POST' });
+		fetchStatistics();
+	}
+
+	const filteredUserStats = data?.userStats.filter(u => 
+		u.userId.toLowerCase().includes(searchQuery.toLowerCase())
+	) || [];
+
+	const filteredSessions = data?.sessions.filter(s => 
+		s.sessionId.toLowerCase().includes(sessionSearch.toLowerCase()) ||
+		(s.userId && s.userId.toLowerCase().includes(sessionSearch.toLowerCase())) ||
+		(s.title && s.title.toLowerCase().includes(sessionSearch.toLowerCase()))
+	) || [];
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-64">
+				<RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	return (
+		<div className="p-6">
+			<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>
+				<div className="flex items-center gap-3">
+					<Select value={period} onValueChange={(v) => setPeriod(v as '7d' | '30d' | 'all')}>
+						<SelectTrigger className="w-36">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="7d">最近7天</SelectItem>
+							<SelectItem value="30d">最近30天</SelectItem>
+							<SelectItem value="all">全部历史</SelectItem>
+						</SelectContent>
+					</Select>
+					<Button variant="outline" size="sm" onClick={clearCache}>
+						<RefreshCw className="h-4 w-4 mr-2" />
+						刷新
+					</Button>
+				</div>
+			</div>
+
+			{/* 概览统计卡片 */}
+			<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
+				<StatCard 
+					title="总会话数" 
+					value={data?.overview.totalSessions || 0} 
+					icon={MessageSquare}
+				/>
+				<StatCard 
+					title="活跃用户" 
+					value={data?.overview.activeUsers || 0} 
+					icon={Users}
+				/>
+				<StatCard 
+					title="总会话消息" 
+					value={data?.overview.totalMessages || 0} 
+					icon={FileText}
+				/>
+				<StatCard 
+					title="技能调用" 
+					value={data?.overview.totalSkillCalls || 0} 
+					icon={Terminal}
+				/>
+				<StatCard 
+					title="AI生成工单" 
+					value={data?.overview.aiGeneratedTickets || 0} 
+					icon={Wrench}
+				/>
+			</div>
+
+			{/* 趋势图表 */}
+			<Card className="mb-6">
+				<CardHeader>
+					<CardTitle className="text-lg">趋势分析</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="h-72">
+						<ResponsiveContainer width="100%" height="100%">
+							<LineChart data={data?.trends || []}>
+								<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+								<XAxis 
+									dataKey="date" 
+									tickFormatter={(v) => v.slice(5)} 
+									className="text-xs"
+								/>
+								<YAxis className="text-xs" />
+								<Tooltip 
+									labelFormatter={(v) => v}
+									contentStyle={{ 
+										backgroundColor: 'white', 
+										border: '1px solid #e5e7eb',
+										borderRadius: '6px'
+									}}
+								/>
+								<Legend />
+								<Line 
+									type="monotone" 
+									dataKey="sessionCount" 
+									name="会话数"
+									stroke="#3b82f6" 
+									strokeWidth={2}
+									dot={{ fill: '#3b82f6', r: 3 }}
+								/>
+								<Line 
+									type="monotone" 
+									dataKey="userCount" 
+									name="用户数"
+									stroke="#10b981" 
+									strokeWidth={2}
+									dot={{ fill: '#10b981', r: 3 }}
+								/>
+							</LineChart>
+						</ResponsiveContainer>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* 技能使用和知识引用 */}
+			<div className="grid md:grid-cols-2 gap-6 mb-6">
+				{/* 技能使用排行 */}
+				<Card>
+					<CardHeader>
+						<CardTitle className="text-lg">技能使用排行</CardTitle>
+					</CardHeader>
+					<CardContent>
+						{data?.skillStats && data.skillStats.length > 0 ? (
+							<div className="h-64">
+								<ResponsiveContainer width="100%" height="100%">
+									<BarChart data={data.skillStats.slice(0, 8)} layout="vertical">
+										<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+										<XAxis type="number" className="text-xs" />
+										<YAxis 
+											type="category" 
+											dataKey="skillName" 
+											width={80}
+											className="text-xs"
+											tickFormatter={(v) => v.length > 8 ? v.slice(0, 8) + '...' : v}
+										/>
+										<Tooltip />
+										<Bar dataKey="callCount" name="调用次数" fill="#6366f1" radius={[0, 4, 4, 0]} />
+									</BarChart>
+								</ResponsiveContainer>
+							</div>
+						) : (
+							<div className="h-32 flex items-center justify-center text-muted-foreground">
+								暂无技能调用数据
+							</div>
+						)}
+						{/* 技能详细列表 */}
+						<div className="mt-4 space-y-2 max-h-48 overflow-auto">
+							{data?.skillStats.slice(0, 10).map((skill, i) => (
+								<div key={skill.skillName} className="flex items-center justify-between text-sm p-2 rounded hover:bg-muted/50">
+									<div className="flex items-center gap-2">
+										<span className="text-muted-foreground">{i + 1}.</span>
+										<span className="font-medium">{skill.skillName}</span>
+									</div>
+									<div className="flex items-center gap-3">
+										<span className="text-muted-foreground">{skill.callCount}次</span>
+										<Badge variant={skill.successRate >= 80 ? 'default' : skill.successRate >= 50 ? 'outline' : 'destructive'}>
+											{skill.successRate}% 成功
+										</Badge>
+									</div>
+								</div>
+							))}
+						</div>
+					</CardContent>
+				</Card>
+
+				{/* 知识引用排行 */}
+				<Card>
+					<CardHeader>
+						<CardTitle className="text-lg">知识引用排行</CardTitle>
+					</CardHeader>
+					<CardContent>
+						{data?.knowledgeStats && data.knowledgeStats.length > 0 ? (
+							<div className="h-64">
+								<ResponsiveContainer width="100%" height="100%">
+									<BarChart data={data.knowledgeStats.slice(0, 8)} layout="vertical">
+										<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+										<XAxis type="number" className="text-xs" />
+										<YAxis 
+											type="category" 
+											dataKey="title" 
+											width={80}
+											className="text-xs"
+											tickFormatter={(v) => v.length > 8 ? v.slice(0, 8) + '...' : v}
+										/>
+										<Tooltip />
+										<Bar dataKey="引用次数" name="引用次数" fill="#f59e0b" radius={[0, 4, 4, 0]} />
+									</BarChart>
+								</ResponsiveContainer>
+							</div>
+						) : (
+							<div className="h-32 flex items-center justify-center text-muted-foreground">
+								暂无知识引用数据
+							</div>
+						)}
+						<div className="mt-4 space-y-2 max-h-48 overflow-auto">
+							{data?.knowledgeStats.slice(0, 10).map((knowledge, i) => (
+								<div key={knowledge.documentId} className="flex items-center justify-between text-sm p-2 rounded hover:bg-muted/50">
+									<div className="flex items-center gap-2 flex-1 min-w-0">
+										<span className="text-muted-foreground">{i + 1}.</span>
+										<span className="font-medium truncate">{knowledge.title}</span>
+										<Badge variant="outline" className="text-xs">{knowledge.category}</Badge>
+									</div>
+									<span className="text-muted-foreground ml-2">{knowledge.引用次数}次</span>
+								</div>
+							))}
+							{(!data?.knowledgeStats || data.knowledgeStats.length === 0) && (
+								<p className="text-center text-muted-foreground py-4">暂无知识引用数据</p>
+							)}
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			{/* 用户使用统计 */}
+			<Card className="mb-6">
+				<CardHeader>
+					<CardTitle className="text-lg">用户使用统计</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="flex items-center gap-3 mb-4">
+						<div className="relative flex-1 max-w-sm">
+							<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+							<Input 
+								placeholder="搜索用户..." 
+								value={searchQuery}
+								onChange={(e) => setSearchQuery(e.target.value)}
+								className="pl-9"
+							/>
+						</div>
+					</div>
+					<div className="overflow-x-auto">
+						<table className="w-full">
+							<thead>
+								<tr className="border-b">
+									<th className="text-left py-2 px-3 font-medium text-sm text-muted-foreground">用户ID</th>
+									<th className="text-right py-2 px-3 font-medium text-sm text-muted-foreground">会话数</th>
+									<th className="text-right py-2 px-3 font-medium text-sm text-muted-foreground">消息数</th>
+									<th className="text-right py-2 px-3 font-medium text-sm text-muted-foreground">技能调用</th>
+									<th className="text-right py-2 px-3 font-medium text-sm text-muted-foreground">最近活跃</th>
+								</tr>
+							</thead>
+							<tbody>
+								{filteredUserStats.slice(0, 10).map((user) => (
+									<tr key={user.userId} className="border-b hover:bg-muted/50">
+										<td className="py-2 px-3 font-medium">{user.userId}</td>
+										<td className="text-right py-2 px-3">{user.sessionCount}</td>
+										<td className="text-right py-2 px-3">{user.messageCount}</td>
+										<td className="text-right py-2 px-3">{user.skillCallCount}</td>
+										<td className="text-right py-2 px-3 text-muted-foreground text-sm">
+											{user.lastActiveAt ? new Date(user.lastActiveAt).toLocaleDateString('zh-CN') : '-'}
+										</td>
+									</tr>
+								))}
+								{filteredUserStats.length === 0 && (
+									<tr>
+										<td colSpan={5} className="text-center py-8 text-muted-foreground">
+											暂无用户数据
+										</td>
+									</tr>
+								)}
+							</tbody>
+						</table>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* 会话详情列表 */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-lg">会话详情列表</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="flex items-center gap-3 mb-4">
+						<div className="relative flex-1 max-w-sm">
+							<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+							<Input 
+								placeholder="搜索会话ID/用户/标题..." 
+								value={sessionSearch}
+								onChange={(e) => setSessionSearch(e.target.value)}
+								className="pl-9"
+							/>
+						</div>
+						<Badge variant="outline">
+							共 {filteredSessions.length} 条
+						</Badge>
+					</div>
+					<div className="overflow-x-auto">
+						<table className="w-full">
+							<thead>
+								<tr className="border-b">
+									<th className="text-left py-2 px-3 font-medium text-sm text-muted-foreground">会话ID</th>
+									<th className="text-left py-2 px-3 font-medium text-sm text-muted-foreground">用户</th>
+									<th className="text-left py-2 px-3 font-medium text-sm text-muted-foreground">标题</th>
+									<th className="text-right py-2 px-3 font-medium text-sm text-muted-foreground">消息数</th>
+									<th className="text-left py-2 px-3 font-medium text-sm text-muted-foreground">创建时间</th>
+									<th className="text-left py-2 px-3 font-medium text-sm text-muted-foreground">最近活跃</th>
+								</tr>
+							</thead>
+							<tbody>
+								{filteredSessions.slice(0, 20).map((session) => (
+									<tr key={session.sessionId} className="border-b hover:bg-muted/50">
+										<td className="py-2 px-3 font-mono text-xs">{session.sessionId.slice(0, 12)}...</td>
+										<td className="py-2 px-3 text-sm">{session.userId || '-'}</td>
+										<td className="py-2 px-3 text-sm truncate max-w-xs">{session.title || '-'}</td>
+										<td className="text-right py-2 px-3">{session.messageCount}</td>
+										<td className="py-2 px-3 text-muted-foreground text-sm">
+											{new Date(session.createdAt).toLocaleDateString('zh-CN')}
+										</td>
+										<td className="py-2 px-3 text-muted-foreground text-sm">
+											{new Date(session.lastAccessedAt).toLocaleDateString('zh-CN')}
+										</td>
+									</tr>
+								))}
+								{filteredSessions.length === 0 && (
+									<tr>
+										<td colSpan={6} className="text-center py-8 text-muted-foreground">
+											暂无会话数据
+										</td>
+									</tr>
+								)}
+							</tbody>
+						</table>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
+
+function StatCard({ title, value, icon: Icon }: { title: string; value: number; icon: any }) {
+	return (
+		<Card>
+			<CardContent className="p-4">
+				<div className="flex items-center justify-between">
+					<div>
+						<p className="text-sm text-muted-foreground">{title}</p>
+						<p className="text-2xl font-bold mt-1">{value.toLocaleString()}</p>
+					</div>
+					<div className="h-10 w-10 bg-muted rounded-full flex items-center justify-center">
+						<Icon className="h-5 w-5 text-muted-foreground" />
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}