1219166526
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>
235 lines
9.1 KiB
TypeScript
235 lines
9.1 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 { 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>
|
||
)
|
||
}
|