b17b488f8e
Reorganize navigation and module structure based on new requirements. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
229 lines
8.7 KiB
TypeScript
229 lines
8.7 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Input } from "@/components/ui/input"
|
||
import {
|
||
FileText,
|
||
ArrowLeft,
|
||
Plus,
|
||
Download,
|
||
Eye,
|
||
Calendar,
|
||
Clock,
|
||
CheckCircle2,
|
||
RefreshCw,
|
||
Search,
|
||
Filter,
|
||
BarChart3,
|
||
PieChart,
|
||
TrendingUp,
|
||
} from "lucide-react"
|
||
import Link from "next/link"
|
||
|
||
const reportTemplates = [
|
||
{
|
||
id: 1,
|
||
name: "日度运营报告",
|
||
description: "每日用户活跃、增长、转化数据汇总",
|
||
schedule: "每日 09:00",
|
||
icon: BarChart3,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "周度分析报告",
|
||
description: "每周关键指标趋势分析和洞察",
|
||
schedule: "每周一 10:00",
|
||
icon: TrendingUp,
|
||
},
|
||
{ id: 3, name: "月度价值报告", description: "月度用户价值评估和排名变化", schedule: "每月1日 09:00", icon: PieChart },
|
||
{ id: 4, name: "自定义报告", description: "根据需求自定义报告内容和维度", schedule: "手动触发", icon: FileText },
|
||
]
|
||
|
||
const generatedReports = [
|
||
{
|
||
id: 1,
|
||
name: "2024年12月第2周运营分析报告",
|
||
type: "周度分析报告",
|
||
status: "completed",
|
||
pages: 12,
|
||
generatedAt: "2024-12-12 10:00",
|
||
summary: "本周新增用户 12,580，环比增长 15.3%；活跃用户 89,200，DAU/MAU 提升至 32.5%",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "2024年12月11日运营日报",
|
||
type: "日度运营报告",
|
||
status: "completed",
|
||
pages: 6,
|
||
generatedAt: "2024-12-11 09:00",
|
||
summary: "日活 28,500，新增 1,890，转化率 3.8%，各项指标均达预期",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "2024年12月12日运营日报",
|
||
type: "日度运营报告",
|
||
status: "generating",
|
||
pages: 0,
|
||
generatedAt: "生成中...",
|
||
summary: "",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "2024年11月用户价值评估报告",
|
||
type: "月度价值报告",
|
||
status: "completed",
|
||
pages: 28,
|
||
generatedAt: "2024-12-01 09:00",
|
||
summary: "S级用户占比提升至 8.2%，高价值用户总价值突破 125 亿元",
|
||
},
|
||
]
|
||
|
||
export default function ReportPage() {
|
||
const [searchTerm, setSearchTerm] = useState("")
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-orange-50/30 p-6">
|
||
<div className="max-w-7xl mx-auto space-y-6">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<Link href="/ai-insight">
|
||
<Button variant="ghost" size="icon" className="rounded-full">
|
||
<ArrowLeft className="w-5 h-5" />
|
||
</Button>
|
||
</Link>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-800">智能报告生成</h1>
|
||
<p className="text-slate-500 mt-1">自动生成数据分析报告和运营洞察</p>
|
||
</div>
|
||
</div>
|
||
<Button className="bg-gradient-to-r from-orange-500 to-amber-600 hover:from-orange-600 hover:to-amber-700">
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
生成新报告
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 报告模板 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
{reportTemplates.map((template) => (
|
||
<Card
|
||
key={template.id}
|
||
className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-lg hover:border-slate-300 transition-all cursor-pointer"
|
||
>
|
||
<CardContent className="p-5">
|
||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center mb-3">
|
||
<template.icon className="w-5 h-5 text-white" />
|
||
</div>
|
||
<h3 className="font-semibold text-slate-800 mb-1">{template.name}</h3>
|
||
<p className="text-xs text-slate-500 mb-3">{template.description}</p>
|
||
<div className="flex items-center gap-1 text-xs text-slate-400">
|
||
<Calendar className="w-3 h-3" />
|
||
{template.schedule}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* 已生成报告列表 */}
|
||
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-base">已生成报告</CardTitle>
|
||
<div className="flex items-center gap-2">
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||
<Input
|
||
placeholder="搜索报告..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-9 w-64"
|
||
/>
|
||
</div>
|
||
<Button variant="outline" size="sm">
|
||
<Filter className="w-4 h-4 mr-2" />
|
||
筛选
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{generatedReports.map((report) => (
|
||
<div
|
||
key={report.id}
|
||
className="flex items-center justify-between p-4 bg-slate-50/80 rounded-lg border border-slate-200/60"
|
||
>
|
||
<div className="flex items-center gap-4 flex-1">
|
||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-100 to-amber-100 flex items-center justify-center">
|
||
<FileText className="w-5 h-5 text-orange-600" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h4 className="font-medium text-slate-800">{report.name}</h4>
|
||
<Badge variant="outline" className="text-xs">
|
||
{report.type}
|
||
</Badge>
|
||
{report.status === "completed" ? (
|
||
<Badge className="bg-emerald-100 text-emerald-700 border-emerald-300">
|
||
<CheckCircle2 className="w-3 h-3 mr-1" />
|
||
已完成
|
||
</Badge>
|
||
) : (
|
||
<Badge className="bg-blue-100 text-blue-700 border-blue-300">
|
||
<RefreshCw className="w-3 h-3 mr-1 animate-spin" />
|
||
生成中
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
{report.summary && <p className="text-sm text-slate-500 mt-1 line-clamp-1">{report.summary}</p>}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-6">
|
||
<div className="text-right">
|
||
{report.status === "completed" && (
|
||
<p className="text-sm font-medium text-slate-700">{report.pages} 页</p>
|
||
)}
|
||
<p className="text-xs text-slate-500 flex items-center gap-1">
|
||
<Clock className="w-3 h-3" />
|
||
{report.generatedAt}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button variant="outline" size="sm" disabled={report.status !== "completed"}>
|
||
<Eye className="w-4 h-4 mr-1" />
|
||
查看
|
||
</Button>
|
||
<Button variant="outline" size="sm" disabled={report.status !== "completed"}>
|
||
<Download className="w-4 h-4 mr-1" />
|
||
下载
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 报告预览区域 */}
|
||
<Card className="bg-white/70 backdrop-blur border-slate-200/60">
|
||
<CardHeader className="pb-3">
|
||
<CardTitle className="text-base">报告预览</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="bg-slate-100 rounded-lg p-8 text-center">
|
||
<FileText className="w-16 h-16 text-slate-300 mx-auto mb-4" />
|
||
<p className="text-slate-500">选择一份报告进行预览</p>
|
||
<p className="text-sm text-slate-400 mt-1">支持在线预览和 PDF 下载</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|