refactor: overhaul system navigation based on 5 HTML docs

Reorganize modules, add AI Agent smart interaction, include prompt settings, enhance data output with subscriptions, and separate system monitoring.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

app/ai-agent/data-cleaning/page.tsx

@@ -0,0 +1,540 @@
+"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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Progress } from "@/components/ui/progress"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { 
+  Sparkles, Play, Pause, Settings, FileText, Database, 
+  CheckCircle2, XCircle, Clock, AlertTriangle, Eye, Trash2,
+  RefreshCw, Download, ChevronRight, Zap, Bot
+} from "lucide-react"
+
+// AI清洗规则数据
+const aiCleaningRules = [
+  {
+    id: "1",
+    name: "手机号格式标准化",
+    prompt: "识别并标准化所有手机号格式，去除空格、括号等特殊字符，统一为11位纯数字格式",
+    dataSource: "用户主表",
+    targetField: "phone",
+    status: "running",
+    confidence: 0.95,
+    processedCount: 12580,
+    totalCount: 15000,
+    errorCount: 23,
+    lastRun: "2024-01-15 10:30:00",
+    needsReview: false,
+  },
+  {
+    id: "2", 
+    name: "地址信息补全",
+    prompt: "根据已有地址信息，智能补全省市区三级地址，并标准化地址格式",
+    dataSource: "用户主表",
+    targetField: "address",
+    status: "pending_review",
+    confidence: 0.78,
+    processedCount: 8900,
+    totalCount: 8900,
+    errorCount: 156,
+    lastRun: "2024-01-15 09:15:00",
+    needsReview: true,
+  },
+  {
+    id: "3",
+    name: "姓名脱敏处理",
+    prompt: "对姓名字段进行脱敏处理，保留姓氏，名字用*替代",
+    dataSource: "交易记录表",
+    targetField: "customer_name",
+    status: "completed",
+    confidence: 0.99,
+    processedCount: 50000,
+    totalCount: 50000,
+    errorCount: 5,
+    lastRun: "2024-01-14 18:00:00",
+    needsReview: false,
+  },
+]
+
+// 待审核数据
+const pendingReviewData = [
+  {
+    id: "r1",
+    ruleId: "2",
+    ruleName: "地址信息补全",
+    originalValue: "北京朝阳区",
+    aiSuggestedValue: "北京市朝阳区建国路88号",
+    confidence: 0.72,
+    reason: "根据用户历史订单地址推断",
+  },
+  {
+    id: "r2",
+    ruleId: "2",
+    ruleName: "地址信息补全", 
+    originalValue: "上海浦东",
+    aiSuggestedValue: "上海市浦东新区陆家嘴环路1000号",
+    confidence: 0.65,
+    reason: "根据IP定位和常用地址推断",
+  },
+]
+
+export default function AIDataCleaningPage() {
+  const [activeTab, setActiveTab] = useState("rules")
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [showReviewDialog, setShowReviewDialog] = useState(false)
+  const [selectedReview, setSelectedReview] = useState<typeof pendingReviewData[0] | null>(null)
+  const [newRule, setNewRule] = useState({
+    name: "",
+    prompt: "",
+    dataSource: "",
+    targetField: "",
+    autoApprove: false,
+    confidenceThreshold: 0.9,
+  })
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "running":
+        return <Badge className="bg-blue-100 text-blue-700">运行中</Badge>
+      case "completed":
+        return <Badge className="bg-green-100 text-green-700">已完成</Badge>
+      case "pending_review":
+        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>
+      case "failed":
+        return <Badge className="bg-red-100 text-red-700">失败</Badge>
+      default:
+        return <Badge variant="secondary">未知</Badge>
+    }
+  }
+
+  const handleApprove = (id: string) => {
+    console.log("Approved:", id)
+    setShowReviewDialog(false)
+  }
+
+  const handleReject = (id: string) => {
+    console.log("Rejected:", id)
+    setShowReviewDialog(false)
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">AI数据清洗</h1>
+          <p className="text-muted-foreground">通过AI提示词自动识别和清洗数据，支持人工审核机制</p>
+        </div>
+        <Button onClick={() => setShowCreateDialog(true)}>
+          <Sparkles className="mr-2 h-4 w-4" />
+          创建AI清洗规则
+        </Button>
+      </div>
+
+      {/* 统计卡片 */}
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">活跃规则</p>
+                <p className="text-2xl font-bold">12</p>
+              </div>
+              <Bot className="h-8 w-8 text-blue-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">今日处理</p>
+                <p className="text-2xl font-bold">71,480</p>
+              </div>
+              <Zap className="h-8 w-8 text-green-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">待审核</p>
+                <p className="text-2xl font-bold text-yellow-600">156</p>
+              </div>
+              <AlertTriangle className="h-8 w-8 text-yellow-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">平均置信度</p>
+                <p className="text-2xl font-bold">92.3%</p>
+              </div>
+              <CheckCircle2 className="h-8 w-8 text-purple-500" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 主内容区 */}
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="rules">清洗规则</TabsTrigger>
+          <TabsTrigger value="review">
+            人工审核
+            <Badge className="ml-2 bg-yellow-100 text-yellow-700">156</Badge>
+          </TabsTrigger>
+          <TabsTrigger value="history">执行历史</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="rules" className="space-y-4">
+          {aiCleaningRules.map((rule) => (
+            <Card key={rule.id}>
+              <CardContent className="pt-6">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <h3 className="font-semibold text-lg">{rule.name}</h3>
+                      {getStatusBadge(rule.status)}
+                      {rule.needsReview && (
+                        <Badge variant="outline" className="text-yellow-600 border-yellow-300">
+                          需要审核
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="bg-muted/50 rounded-lg p-3 mb-3">
+                      <p className="text-sm text-muted-foreground">
+                        <span className="font-medium text-foreground">AI提示词：</span>
+                        {rule.prompt}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-6 text-sm text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Database className="h-4 w-4" />
+                        {rule.dataSource} / {rule.targetField}
+                      </span>
+                      <span>置信度: {(rule.confidence * 100).toFixed(0)}%</span>
+                      <span>错误: {rule.errorCount}</span>
+                      <span>最后执行: {rule.lastRun}</span>
+                    </div>
+                    {rule.status === "running" && (
+                      <div className="mt-3">
+                        <div className="flex items-center justify-between text-sm mb-1">
+                          <span>处理进度</span>
+                          <span>{rule.processedCount.toLocaleString()} / {rule.totalCount.toLocaleString()}</span>
+                        </div>
+                        <Progress value={(rule.processedCount / rule.totalCount) * 100} className="h-2" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 ml-4">
+                    {rule.status === "running" ? (
+                      <Button variant="outline" size="sm">
+                        <Pause className="h-4 w-4 mr-1" />
+                        暂停
+                      </Button>
+                    ) : (
+                      <Button variant="outline" size="sm">
+                        <Play className="h-4 w-4 mr-1" />
+                        执行
+                      </Button>
+                    )}
+                    <Button variant="outline" size="sm">
+                      <Eye className="h-4 w-4 mr-1" />
+                      预览
+                    </Button>
+                    <Button variant="outline" size="sm">
+                      <Settings className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </TabsContent>
+
+        <TabsContent value="review" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>待审核清洗结果</CardTitle>
+              <CardDescription>AI清洗结果中置信度较低或需要人工确认的数据</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>规则名称</TableHead>
+                    <TableHead>原始值</TableHead>
+                    <TableHead>AI建议值</TableHead>
+                    <TableHead>置信度</TableHead>
+                    <TableHead>推理依据</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {pendingReviewData.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.ruleName}</TableCell>
+                      <TableCell className="text-muted-foreground">{item.originalValue}</TableCell>
+                      <TableCell className="text-blue-600">{item.aiSuggestedValue}</TableCell>
+                      <TableCell>
+                        <Badge 
+                          className={item.confidence >= 0.7 ? "bg-yellow-100 text-yellow-700" : "bg-red-100 text-red-700"}
+                        >
+                          {(item.confidence * 100).toFixed(0)}%
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="max-w-[200px] truncate text-muted-foreground">
+                        {item.reason}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-2">
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            className="text-green-600 hover:text-green-700 bg-transparent"
+                            onClick={() => handleApprove(item.id)}
+                          >
+                            <CheckCircle2 className="h-4 w-4 mr-1" />
+                            通过
+                          </Button>
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            className="text-red-600 hover:text-red-700 bg-transparent"
+                            onClick={() => handleReject(item.id)}
+                          >
+                            <XCircle className="h-4 w-4 mr-1" />
+                            拒绝
+                          </Button>
+                          <Button 
+                            size="sm" 
+                            variant="ghost"
+                            onClick={() => {
+                              setSelectedReview(item)
+                              setShowReviewDialog(true)
+                            }}
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="history" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>执行历史</CardTitle>
+              <CardDescription>查看AI清洗规则的历史执行记录</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>规则名称</TableHead>
+                    <TableHead>执行时间</TableHead>
+                    <TableHead>处理数量</TableHead>
+                    <TableHead>成功率</TableHead>
+                    <TableHead>耗时</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-medium">手机号格式标准化</TableCell>
+                    <TableCell>2024-01-15 10:30:00</TableCell>
+                    <TableCell>15,000</TableCell>
+                    <TableCell>99.8%</TableCell>
+                    <TableCell>2分35秒</TableCell>
+                    <TableCell><Badge className="bg-green-100 text-green-700">成功</Badge></TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="sm">
+                        <FileText className="h-4 w-4 mr-1" />
+                        日志
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">地址信息补全</TableCell>
+                    <TableCell>2024-01-15 09:15:00</TableCell>
+                    <TableCell>8,900</TableCell>
+                    <TableCell>98.2%</TableCell>
+                    <TableCell>5分12秒</TableCell>
+                    <TableCell><Badge className="bg-yellow-100 text-yellow-700">部分完成</Badge></TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="sm">
+                        <FileText className="h-4 w-4 mr-1" />
+                        日志
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 创建AI清洗规则弹窗 */}
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>创建AI清洗规则</DialogTitle>
+            <DialogDescription>通过自然语言描述清洗需求，AI将自动识别和处理数据</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>规则名称</Label>
+                <Input 
+                  placeholder="输入规则名称" 
+                  value={newRule.name}
+                  onChange={(e) => setNewRule({...newRule, name: e.target.value})}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>数据源</Label>
+                <Select 
+                  value={newRule.dataSource}
+                  onValueChange={(v) => setNewRule({...newRule, dataSource: v})}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择数据源" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="user_main">用户主表</SelectItem>
+                    <SelectItem value="transaction">交易记录表</SelectItem>
+                    <SelectItem value="behavior">行为日志表</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>目标字段</Label>
+              <Input 
+                placeholder="输入要清洗的字段名" 
+                value={newRule.targetField}
+                onChange={(e) => setNewRule({...newRule, targetField: e.target.value})}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>AI清洗提示词</Label>
+              <Textarea 
+                placeholder="用自然语言描述清洗需求，例如：识别并标准化所有手机号格式，去除空格和特殊字符，统一为11位纯数字格式"
+                className="min-h-[120px]"
+                value={newRule.prompt}
+                onChange={(e) => setNewRule({...newRule, prompt: e.target.value})}
+              />
+              <p className="text-xs text-muted-foreground">
+                提示：描述越详细，AI清洗效果越好。可以包含具体的格式要求、异常处理方式等。
+              </p>
+            </div>
+            <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+              <div>
+                <Label>自动审批</Label>
+                <p className="text-sm text-muted-foreground">置信度高于阈值时自动通过</p>
+              </div>
+              <div className="flex items-center gap-4">
+                <Switch 
+                  checked={newRule.autoApprove}
+                  onCheckedChange={(v) => setNewRule({...newRule, autoApprove: v})}
+                />
+                {newRule.autoApprove && (
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm">阈值:</Label>
+                    <Select 
+                      value={newRule.confidenceThreshold.toString()}
+                      onValueChange={(v) => setNewRule({...newRule, confidenceThreshold: parseFloat(v)})}
+                    >
+                      <SelectTrigger className="w-24">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="0.95">95%</SelectItem>
+                        <SelectItem value="0.9">90%</SelectItem>
+                        <SelectItem value="0.85">85%</SelectItem>
+                        <SelectItem value="0.8">80%</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
+            <Button>
+              <Sparkles className="mr-2 h-4 w-4" />
+              创建规则
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 审核详情弹窗 */}
+      <Dialog open={showReviewDialog} onOpenChange={setShowReviewDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>审核详情</DialogTitle>
+            <DialogDescription>查看AI清洗建议的详细信息</DialogDescription>
+          </DialogHeader>
+          {selectedReview && (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-muted-foreground">规则名称</Label>
+                  <p className="font-medium">{selectedReview.ruleName}</p>
+                </div>
+                <div>
+                  <Label className="text-muted-foreground">置信度</Label>
+                  <p className="font-medium">{(selectedReview.confidence * 100).toFixed(0)}%</p>
+                </div>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">原始值</Label>
+                <p className="p-2 bg-red-50 rounded border border-red-200 text-red-700">{selectedReview.originalValue}</p>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">AI建议值</Label>
+                <p className="p-2 bg-green-50 rounded border border-green-200 text-green-700">{selectedReview.aiSuggestedValue}</p>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">推理依据</Label>
+                <p className="p-2 bg-muted rounded">{selectedReview.reason}</p>
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => handleReject(selectedReview?.id || "")}>
+              <XCircle className="mr-2 h-4 w-4" />
+              拒绝
+            </Button>
+            <Button onClick={() => handleApprove(selectedReview?.id || "")}>
+              <CheckCircle2 className="mr-2 h-4 w-4" />
+              通过
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

app/ai-agent/report/page.tsx

@@ -0,0 +1,234 @@
+"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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { 
+  FileText, Download, Share2, Clock, Eye, Sparkles, 
+  BarChart3, Users, TrendingUp, Calendar, Plus, Trash2
+} from "lucide-react"
+
+const reportTemplates = [
+  { id: "1", name: "用户增长分析报告", description: "分析用户增长趋势和渠道效果", icon: TrendingUp },
+  { id: "2", name: "用户画像洞察报告", description: "深度分析用户特征和行为偏好", icon: Users },
+  { id: "3", name: "数据质量评估报告", description: "评估数据完整性和准确性", icon: BarChart3 },
+  { id: "4", name: "营销效果分析报告", description: "评估营销活动ROI和转化效果", icon: TrendingUp },
+]
+
+const recentReports = [
+  {
+    id: "r1",
+    name: "2024年1月用户增长分析报告",
+    template: "用户增长分析报告",
+    createdAt: "2024-01-15 14:30",
+    status: "completed",
+    pages: 12,
+  },
+  {
+    id: "r2",
+    name: "高价值用户画像洞察",
+    template: "用户画像洞察报告",
+    createdAt: "2024-01-14 10:20",
+    status: "completed",
+    pages: 8,
+  },
+  {
+    id: "r3",
+    name: "Q4数据质量评估",
+    template: "数据质量评估报告",
+    createdAt: "2024-01-10 16:45",
+    status: "generating",
+    pages: 0,
+  },
+]
+
+export default function AIReportPage() {
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [selectedTemplate, setSelectedTemplate] = useState("")
+  const [reportConfig, setReportConfig] = useState({
+    name: "",
+    dateRange: "last_30_days",
+    userSegment: "all",
+    customPrompt: "",
+  })
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">智能报告</h1>
+          <p className="text-muted-foreground">AI自动生成数据分析报告，支持自定义模板和提示词</p>
+        </div>
+        <Button onClick={() => setShowCreateDialog(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          生成报告
+        </Button>
+      </div>
+
+      {/* 报告模板 */}
+      <div>
+        <h2 className="text-lg font-semibold mb-4">报告模板</h2>
+        <div className="grid gap-4 md:grid-cols-4">
+          {reportTemplates.map((template) => (
+            <Card 
+              key={template.id} 
+              className="cursor-pointer hover:border-primary transition-colors"
+              onClick={() => {
+                setSelectedTemplate(template.id)
+                setShowCreateDialog(true)
+              }}
+            >
+              <CardContent className="pt-6">
+                <div className="flex flex-col items-center text-center">
+                  <div className="p-3 rounded-full bg-primary/10 mb-3">
+                    <template.icon className="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 className="font-medium mb-1">{template.name}</h3>
+                  <p className="text-sm text-muted-foreground">{template.description}</p>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* 最近报告 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>最近报告</CardTitle>
+          <CardDescription>查看和管理已生成的报告</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {recentReports.map((report) => (
+              <div 
+                key={report.id}
+                className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="p-2 rounded-lg bg-primary/10">
+                    <FileText className="h-5 w-5 text-primary" />
+                  </div>
+                  <div>
+                    <h4 className="font-medium">{report.name}</h4>
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                      <span>{report.template}</span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        {report.createdAt}
+                      </span>
+                      {report.status === "completed" && (
+                        <span>{report.pages}页</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {report.status === "generating" ? (
+                    <Badge className="bg-blue-100 text-blue-700">
+                      <Sparkles className="h-3 w-3 mr-1 animate-pulse" />
+                      生成中
+                    </Badge>
+                  ) : (
+                    <>
+                      <Button variant="outline" size="sm">
+                        <Eye className="h-4 w-4 mr-1" />
+                        预览
+                      </Button>
+                      <Button variant="outline" size="sm">
+                        <Download className="h-4 w-4 mr-1" />
+                        下载
+                      </Button>
+                      <Button variant="outline" size="sm">
+                        <Share2 className="h-4 w-4" />
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 创建报告弹窗 */}
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>生成智能报告</DialogTitle>
+            <DialogDescription>选择模板并配置报告参数，AI将自动生成分析报告</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>报告名称</Label>
+              <Input 
+                placeholder="输入报告名称" 
+                value={reportConfig.name}
+                onChange={(e) => setReportConfig({...reportConfig, name: e.target.value})}
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>时间范围</Label>
+                <Select 
+                  value={reportConfig.dateRange}
+                  onValueChange={(v) => setReportConfig({...reportConfig, dateRange: v})}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="last_7_days">最近7天</SelectItem>
+                    <SelectItem value="last_30_days">最近30天</SelectItem>
+                    <SelectItem value="last_90_days">最近90天</SelectItem>
+                    <SelectItem value="custom">自定义</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>用户群体</Label>
+                <Select 
+                  value={reportConfig.userSegment}
+                  onValueChange={(v) => setReportConfig({...reportConfig, userSegment: v})}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部用户</SelectItem>
+                    <SelectItem value="high_value">高价值用户</SelectItem>
+                    <SelectItem value="new_users">新用户</SelectItem>
+                    <SelectItem value="active">活跃用户</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>自定义分析要求（可选）</Label>
+              <Textarea 
+                placeholder="输入额外的分析要求，例如：重点分析转化漏斗、对比上月数据等"
+                value={reportConfig.customPrompt}
+                onChange={(e) => setReportConfig({...reportConfig, customPrompt: e.target.value})}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowCreateDialog(false)}>取消</Button>
+            <Button>
+              <Sparkles className="mr-2 h-4 w-4" />
+              开始生成
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}