901763fae0
Fix CSS issue and create missing documentation files Add new data platform and mobile optimization features Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
443 lines
19 KiB
TypeScript
443 lines
19 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Progress } from "@/components/ui/progress"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import {
|
||
Brain,
|
||
TrendingUp,
|
||
AlertTriangle,
|
||
Zap,
|
||
Filter,
|
||
RefreshCw,
|
||
Download,
|
||
ChevronRight,
|
||
ChevronDown,
|
||
} from "lucide-react"
|
||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||
|
||
export default function AIAnalysisPage() {
|
||
const [timeRange, setTimeRange] = useState("today")
|
||
const [expandedSections, setExpandedSections] = useState({
|
||
overview: true,
|
||
trends: true,
|
||
anomaly: false,
|
||
predictions: false,
|
||
})
|
||
|
||
// AI分析数据
|
||
const aiData = {
|
||
overview: {
|
||
totalInsights: 156,
|
||
trendsIdentified: 23,
|
||
anomaliesDetected: 3,
|
||
predictionsGenerated: 89,
|
||
accuracy: 94.2,
|
||
modelPerformance: 97.8,
|
||
},
|
||
trendAnalysis: [
|
||
{
|
||
trend: "用户活跃度上升趋势",
|
||
confidence: 95.8,
|
||
impact: "高",
|
||
timeframe: "未来7天",
|
||
description: "基于用户行为模式分析，预测用户活跃度将持续上升",
|
||
recommendation: "增加内容推送频率，优化用户体验",
|
||
},
|
||
{
|
||
trend: "移动端使用增长",
|
||
confidence: 89.2,
|
||
impact: "中高",
|
||
timeframe: "未来14天",
|
||
description: "移动端用户访问量呈现明显增长趋势",
|
||
recommendation: "优化移动端界面，提升响应速度",
|
||
},
|
||
{
|
||
trend: "高价值用户转化提升",
|
||
confidence: 92.5,
|
||
impact: "高",
|
||
timeframe: "未来30天",
|
||
description: "高价值用户转化率预计将显著提升",
|
||
recommendation: "制定针对性营销策略，加强用户维护",
|
||
},
|
||
],
|
||
anomalyDetection: [
|
||
{
|
||
type: "流量异常",
|
||
severity: "中等",
|
||
detected: "今天 13:45",
|
||
description: "检测到异常流量峰值，比平时高出45%",
|
||
status: "已处理",
|
||
action: "已启动自动扩容机制",
|
||
},
|
||
{
|
||
type: "用户行为异常",
|
||
severity: "低",
|
||
detected: "今天 11:20",
|
||
description: "部分用户群体行为模式发生变化",
|
||
status: "监控中",
|
||
action: "持续观察用户行为变化",
|
||
},
|
||
{
|
||
type: "数据质量异常",
|
||
severity: "高",
|
||
detected: "今天 09:15",
|
||
description: "数据源同步出现延迟，影响实时分析",
|
||
status: "已修复",
|
||
action: "已重新同步数据，恢复正常",
|
||
},
|
||
],
|
||
predictiveModels: [
|
||
{
|
||
model: "用户流失预测模型",
|
||
accuracy: 94.2,
|
||
lastTrained: "今天 06:00",
|
||
predictions: 1245,
|
||
status: "运行中",
|
||
description: "预测用户流失风险，准确率达94.2%",
|
||
},
|
||
{
|
||
model: "价值提升预测模型",
|
||
accuracy: 91.8,
|
||
lastTrained: "今天 05:30",
|
||
predictions: 856,
|
||
status: "运行中",
|
||
description: "预测用户价值提升潜力，指导运营策略",
|
||
},
|
||
{
|
||
model: "内容推荐模型",
|
||
accuracy: 87.5,
|
||
lastTrained: "今天 04:45",
|
||
predictions: 2341,
|
||
status: "运行中",
|
||
description: "个性化内容推荐，提升用户参与度",
|
||
},
|
||
],
|
||
}
|
||
|
||
const toggleSection = (section: string) => {
|
||
setExpandedSections((prev) => ({
|
||
...prev,
|
||
[section]: !prev[section],
|
||
}))
|
||
}
|
||
|
||
const getImpactColor = (impact: string) => {
|
||
switch (impact) {
|
||
case "高":
|
||
return "bg-red-100 text-red-800"
|
||
case "中高":
|
||
return "bg-orange-100 text-orange-800"
|
||
case "中":
|
||
return "bg-yellow-100 text-yellow-800"
|
||
case "低":
|
||
return "bg-green-100 text-green-800"
|
||
default:
|
||
return "bg-gray-100 text-gray-800"
|
||
}
|
||
}
|
||
|
||
const getSeverityColor = (severity: string) => {
|
||
switch (severity) {
|
||
case "高":
|
||
return "bg-red-100 text-red-800"
|
||
case "中等":
|
||
return "bg-yellow-100 text-yellow-800"
|
||
case "低":
|
||
return "bg-green-100 text-green-800"
|
||
default:
|
||
return "bg-gray-100 text-gray-800"
|
||
}
|
||
}
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case "运行中":
|
||
return "bg-green-100 text-green-800"
|
||
case "已处理":
|
||
return "bg-blue-100 text-blue-800"
|
||
case "监控中":
|
||
return "bg-yellow-100 text-yellow-800"
|
||
case "已修复":
|
||
return "bg-green-100 text-green-800"
|
||
default:
|
||
return "bg-gray-100 text-gray-800"
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
|
||
{/* 页面标题和工具栏 */}
|
||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||
<div>
|
||
<h1 className="text-2xl md:text-3xl font-bold">AI分析</h1>
|
||
<p className="text-sm md:text-base text-muted-foreground mt-1">智能数据洞察与预测分析</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Select value={timeRange} onValueChange={setTimeRange}>
|
||
<SelectTrigger className="w-[120px] text-sm">
|
||
<SelectValue placeholder="时间范围" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="today">今日</SelectItem>
|
||
<SelectItem value="week">本周</SelectItem>
|
||
<SelectItem value="month">本月</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
|
||
<Filter className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
|
||
<RefreshCw className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
|
||
<Download className="mr-2 h-4 w-4" />
|
||
导出
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* AI分析概览 */}
|
||
<Collapsible
|
||
open={expandedSections.overview}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer py-3 md:py-4">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<Brain className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
|
||
<div className="text-left">
|
||
<CardTitle className="text-base md:text-lg">AI分析概览</CardTitle>
|
||
<CardDescription className="text-xs md:text-sm">智能分析引擎运行状态</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.overview ? (
|
||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
|
||
<div className="bg-purple-50 p-3 rounded-lg text-center">
|
||
<div className="text-lg md:text-2xl font-bold text-purple-600">{aiData.overview.totalInsights}</div>
|
||
<div className="text-xs text-purple-700">AI洞察</div>
|
||
</div>
|
||
<div className="bg-blue-50 p-3 rounded-lg text-center">
|
||
<div className="text-lg md:text-2xl font-bold text-blue-600">{aiData.overview.trendsIdentified}</div>
|
||
<div className="text-xs text-blue-700">趋势识别</div>
|
||
</div>
|
||
<div className="bg-orange-50 p-3 rounded-lg text-center">
|
||
<div className="text-lg md:text-2xl font-bold text-orange-600">
|
||
{aiData.overview.anomaliesDetected}
|
||
</div>
|
||
<div className="text-xs text-orange-700">异常检测</div>
|
||
</div>
|
||
<div className="bg-green-50 p-3 rounded-lg text-center">
|
||
<div className="text-lg md:text-2xl font-bold text-green-600">
|
||
{aiData.overview.predictionsGenerated}
|
||
</div>
|
||
<div className="text-xs text-green-700">预测生成</div>
|
||
</div>
|
||
<div className="bg-indigo-50 p-3 rounded-lg text-center">
|
||
<div className="text-lg md:text-2xl font-bold text-indigo-600">{aiData.overview.accuracy}%</div>
|
||
<div className="text-xs text-indigo-700">预测准确率</div>
|
||
</div>
|
||
<div className="bg-pink-50 p-3 rounded-lg text-center">
|
||
<div className="text-lg md:text-2xl font-bold text-pink-600">{aiData.overview.modelPerformance}%</div>
|
||
<div className="text-xs text-pink-700">模型性能</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* 趋势识别 */}
|
||
<Collapsible
|
||
open={expandedSections.trends}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, trends: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer py-3 md:py-4">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<TrendingUp className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
|
||
<div className="text-left">
|
||
<CardTitle className="text-base md:text-lg">趋势识别</CardTitle>
|
||
<CardDescription className="text-xs md:text-sm">AI驱动的趋势预测分析</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.trends ? (
|
||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="space-y-3">
|
||
{aiData.trendAnalysis.map((trend, index) => (
|
||
<div key={index} className="bg-white border rounded-lg p-3 md:p-4">
|
||
<div className="flex flex-col md:flex-row md:items-start justify-between gap-3">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h3 className="font-medium text-sm md:text-base">{trend.trend}</h3>
|
||
<Badge className={getImpactColor(trend.impact)}>{trend.impact}影响</Badge>
|
||
</div>
|
||
<p className="text-xs md:text-sm text-gray-600 mb-2">{trend.description}</p>
|
||
<p className="text-xs text-blue-600 font-medium">建议: {trend.recommendation}</p>
|
||
</div>
|
||
<div className="flex flex-col md:items-end gap-2">
|
||
<div className="text-right">
|
||
<div className="text-sm font-bold text-green-600">{trend.confidence}%</div>
|
||
<div className="text-xs text-gray-500">置信度</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-sm font-medium">{trend.timeframe}</div>
|
||
<div className="text-xs text-gray-500">预测时间</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<div className="flex justify-between text-xs mb-1">
|
||
<span>置信度</span>
|
||
<span>{trend.confidence}%</span>
|
||
</div>
|
||
<Progress value={trend.confidence} className="h-1.5" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* 异常检测 */}
|
||
<Collapsible
|
||
open={expandedSections.anomaly}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, anomaly: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer py-3 md:py-4">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<AlertTriangle className="h-4 w-4 md:h-5 md:w-5 text-orange-600" />
|
||
<div className="text-left">
|
||
<CardTitle className="text-base md:text-lg">异常检测</CardTitle>
|
||
<CardDescription className="text-xs md:text-sm">智能异常监控与预警</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.anomaly ? (
|
||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="space-y-3">
|
||
{aiData.anomalyDetection.map((anomaly, index) => (
|
||
<div key={index} className="bg-white border rounded-lg p-3 md:p-4">
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h3 className="font-medium text-sm md:text-base">{anomaly.type}</h3>
|
||
<Badge className={getSeverityColor(anomaly.severity)}>{anomaly.severity}</Badge>
|
||
<Badge className={getStatusColor(anomaly.status)}>{anomaly.status}</Badge>
|
||
</div>
|
||
<p className="text-xs md:text-sm text-gray-600 mb-2">{anomaly.description}</p>
|
||
<p className="text-xs text-blue-600 font-medium">处理措施: {anomaly.action}</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-sm font-medium">{anomaly.detected}</div>
|
||
<div className="text-xs text-gray-500">检测时间</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
|
||
{/* 预测模型 */}
|
||
<Collapsible
|
||
open={expandedSections.predictions}
|
||
onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, predictions: open }))}
|
||
>
|
||
<Card className="border-none shadow-md">
|
||
<CollapsibleTrigger className="w-full">
|
||
<CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
|
||
<div className="flex justify-between items-center">
|
||
<div className="flex items-center gap-3">
|
||
<Zap className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
|
||
<div className="text-left">
|
||
<CardTitle className="text-base md:text-lg">预测模型</CardTitle>
|
||
<CardDescription className="text-xs md:text-sm">机器学习预测模型管理</CardDescription>
|
||
</div>
|
||
</div>
|
||
{expandedSections.predictions ? (
|
||
<ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
<CardContent className="p-4">
|
||
<div className="space-y-3">
|
||
{aiData.predictiveModels.map((model, index) => (
|
||
<div key={index} className="bg-white border rounded-lg p-3 md:p-4">
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<h3 className="font-medium text-sm md:text-base">{model.model}</h3>
|
||
<Badge className={getStatusColor(model.status)}>{model.status}</Badge>
|
||
</div>
|
||
<p className="text-xs md:text-sm text-gray-600 mb-2">{model.description}</p>
|
||
<div className="flex flex-wrap gap-4 text-xs">
|
||
<span>最后训练: {model.lastTrained}</span>
|
||
<span>预测数量: {model.predictions.toLocaleString()}</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-lg font-bold text-green-600">{model.accuracy}%</div>
|
||
<div className="text-xs text-gray-500">准确率</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3">
|
||
<div className="flex justify-between text-xs mb-1">
|
||
<span>模型准确率</span>
|
||
<span>{model.accuracy}%</span>
|
||
</div>
|
||
<Progress value={model.accuracy} className="h-1.5" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</CollapsibleContent>
|
||
</Card>
|
||
</Collapsible>
|
||
</div>
|
||
)
|
||
}
|