fix: resolve deployment errors and add missing files

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>

app/ai-analysis/page.tsx

@@ -0,0 +1,442 @@
+"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>
+  )
+}