06a88a877f
- Task 10: Bulk migrate CSS variable references from --primary/--secondary/etc to --color-primary/--color-secondary/etc across all components - Task 11: Adapt CodeEditor to auto-detect theme from ThemeProvider context, remove hardcoded theme='dark' from plugin-config and bot config pages
884 lines
38 KiB
TypeScript
884 lines
38 KiB
TypeScript
import { useState, useRef, useEffect, useCallback } from 'react'
|
||
import { getAnnualReport, type AnnualReportData } from '@/lib/annual-report-api'
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||
import { Skeleton } from '@/components/ui/skeleton'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||
import { Button } from '@/components/ui/button'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
import { toPng } from 'html-to-image'
|
||
import {
|
||
BarChart,
|
||
Bar,
|
||
XAxis,
|
||
YAxis,
|
||
CartesianGrid,
|
||
Tooltip,
|
||
ResponsiveContainer,
|
||
} from 'recharts'
|
||
import {
|
||
Clock,
|
||
Users,
|
||
Brain,
|
||
Smile,
|
||
Trophy,
|
||
Calendar,
|
||
MessageSquare,
|
||
Zap,
|
||
Moon,
|
||
Sun,
|
||
AtSign,
|
||
Heart,
|
||
Image as ImageIcon,
|
||
Bot,
|
||
Download,
|
||
Loader2,
|
||
} from 'lucide-react'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
// 颜色常量
|
||
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d']
|
||
|
||
// 动态比喻生成函数
|
||
function getOnlineHoursMetaphor(hours: number): string {
|
||
if (hours >= 8760) return "相当于全年无休，7x24小时在线！"
|
||
if (hours >= 5000) return "相当于一位全职员工的年工作时长"
|
||
if (hours >= 2000) return "相当于看完了 1000 部电影"
|
||
if (hours >= 1000) return "相当于环球飞行 80 次"
|
||
if (hours >= 500) return "相当于读完了 100 本书"
|
||
if (hours >= 100) return "相当于马拉松跑了 25 次"
|
||
return "虽然不多，但每一刻都很珍贵"
|
||
}
|
||
|
||
function getMidnightMetaphor(count: number): string {
|
||
if (count >= 1000) return "夜深人静时的知心好友"
|
||
if (count >= 500) return "午夜场的常客"
|
||
if (count >= 100) return "偶尔熬夜的小伙伴"
|
||
if (count >= 50) return "深夜有时也会陪你聊聊"
|
||
return "早睡早起，健康作息"
|
||
}
|
||
|
||
function getTokenMetaphor(tokens: number): string {
|
||
const millions = tokens / 1000000
|
||
if (millions >= 100) return "思考量堪比一座图书馆"
|
||
if (millions >= 50) return "相当于写了一部百科全书"
|
||
if (millions >= 10) return "脑细胞估计消耗了不少"
|
||
if (millions >= 1) return "也算是费了一番脑筋"
|
||
return "轻轻松松，游刃有余"
|
||
}
|
||
|
||
function getCostMetaphor(cost: number): string {
|
||
if (cost >= 1000) return "这钱够吃一年的泡面了"
|
||
if (cost >= 500) return "相当于买了一台游戏机"
|
||
if (cost >= 100) return "够请大家喝几杯奶茶"
|
||
if (cost >= 50) return "一顿火锅的钱"
|
||
if (cost >= 10) return "几杯咖啡的价格"
|
||
return "省钱小能手"
|
||
}
|
||
|
||
function getSilenceMetaphor(rate: number): string {
|
||
if (rate >= 80) return "沉默是金，惜字如金"
|
||
if (rate >= 60) return "话不多但句句到位"
|
||
if (rate >= 40) return "该说的时候才开口"
|
||
if (rate >= 20) return "能聊的都聊了"
|
||
return "话痨本痨，有问必答"
|
||
}
|
||
|
||
function getImageMetaphor(count: number): string {
|
||
if (count >= 10000) return "眼睛都快看花了"
|
||
if (count >= 5000) return "堪比专业摄影师的阅片量"
|
||
if (count >= 1000) return "看图小达人"
|
||
if (count >= 500) return "图片鉴赏家"
|
||
if (count >= 100) return "偶尔欣赏一下美图"
|
||
return "图片？有空再看"
|
||
}
|
||
|
||
function getRejectedMetaphor(count: number): string {
|
||
if (count >= 500) return "在不断的纠正中成长"
|
||
if (count >= 200) return "学习永无止境"
|
||
if (count >= 100) return "虚心接受，积极改正"
|
||
if (count >= 50) return "偶尔也会犯错"
|
||
if (count >= 10) return "表现还算不错"
|
||
return "完美表达，无需纠正"
|
||
}
|
||
|
||
function getExpensiveThinkingMetaphor(cost: number): string {
|
||
if (cost >= 1) return "这次思考的价值堪比一顿大餐！"
|
||
if (cost >= 0.5) return "为了这个问题，我可是认真思考了！"
|
||
if (cost >= 0.1) return "下了点功夫，值得的！"
|
||
if (cost >= 0.01) return "花了点小钱，但很值得"
|
||
return "小小思考，不足挂齿"
|
||
}
|
||
|
||
function getFavoriteReplyMetaphor(count: number, botName: string): string {
|
||
if (count >= 100) return "这句话简直是万能钥匙！"
|
||
if (count >= 50) return "百试不爽的经典回复"
|
||
if (count >= 20) return `${botName}的口头禅`
|
||
if (count >= 10) return "常用语录之一"
|
||
return "偶尔用用的小确幸"
|
||
}
|
||
|
||
function getNightOwlMetaphor(isNightOwl: boolean, midnightCount: number): string {
|
||
if (isNightOwl) {
|
||
if (midnightCount >= 1000) return "深夜的守护者，黑暗中的光芒"
|
||
if (midnightCount >= 500) return "月亮是我的好朋友"
|
||
if (midnightCount >= 100) return "越夜越精神，夜晚才是主场"
|
||
return "偶尔熬夜，享受宁静时光"
|
||
} else {
|
||
if (midnightCount <= 10) return "作息规律，健康生活的典范"
|
||
if (midnightCount <= 50) return "早睡早起，偶尔也会熬个夜"
|
||
return "虽然是早起鸟，但也会守候深夜"
|
||
}
|
||
}
|
||
|
||
function getBusiestDayMetaphor(count: number): string {
|
||
if (count >= 1000) return "忙到飞起，键盘都要冒烟了"
|
||
if (count >= 500) return "这天简直是话痨附体"
|
||
if (count >= 200) return "社交达人上线"
|
||
if (count >= 100) return "比平时活跃不少"
|
||
if (count >= 50) return "小忙一下"
|
||
return "还算轻松的一天"
|
||
}
|
||
|
||
export function AnnualReportPage() {
|
||
const [year] = useState(2025)
|
||
const [data, setData] = useState<AnnualReportData | null>(null)
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [isExporting, setIsExporting] = useState(false)
|
||
const [error, setError] = useState<Error | null>(null)
|
||
const reportRef = useRef<HTMLDivElement>(null)
|
||
const { toast } = useToast()
|
||
|
||
const loadReport = useCallback(async () => {
|
||
try {
|
||
setIsLoading(true)
|
||
setError(null)
|
||
const result = await getAnnualReport(year)
|
||
setData(result)
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err : new Error('获取年度报告失败'))
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}, [year])
|
||
|
||
// 导出为图片
|
||
const handleExport = useCallback(async () => {
|
||
if (!reportRef.current || !data) return
|
||
|
||
setIsExporting(true)
|
||
toast({
|
||
title: '正在生成图片',
|
||
description: '请稍候...',
|
||
})
|
||
|
||
try {
|
||
const element = reportRef.current
|
||
|
||
// 获取当前主题的背景色
|
||
const computedStyle = getComputedStyle(document.documentElement)
|
||
const backgroundColor = computedStyle.getPropertyValue('--background').trim()
|
||
? `hsl(${computedStyle.getPropertyValue('--background').trim()})`
|
||
: (document.documentElement.classList.contains('dark') ? '#0a0a0a' : '#ffffff')
|
||
|
||
// 保存原始样式
|
||
const originalWidth = element.style.width
|
||
const originalMaxWidth = element.style.maxWidth
|
||
|
||
// 临时设置固定宽度以去除左右空白
|
||
element.style.width = '1024px'
|
||
element.style.maxWidth = '1024px'
|
||
|
||
const dataUrl = await toPng(element, {
|
||
quality: 1,
|
||
pixelRatio: 2,
|
||
backgroundColor,
|
||
cacheBust: true,
|
||
filter: (node) => {
|
||
// 过滤掉导出按钮
|
||
if (node instanceof HTMLElement && node.hasAttribute('data-export-btn')) {
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
})
|
||
|
||
// 恢复原始样式
|
||
element.style.width = originalWidth
|
||
element.style.maxWidth = originalMaxWidth
|
||
|
||
// 创建下载链接
|
||
const link = document.createElement('a')
|
||
link.download = `${data.bot_name}_${data.year}_年度总结.png`
|
||
link.href = dataUrl
|
||
link.click()
|
||
|
||
toast({
|
||
title: '导出成功',
|
||
description: '年度报告已保存为图片',
|
||
})
|
||
} catch (err) {
|
||
console.error('导出图片失败:', err)
|
||
toast({
|
||
title: '导出失败',
|
||
description: '请重试',
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsExporting(false)
|
||
}
|
||
}, [data, toast])
|
||
|
||
useEffect(() => {
|
||
loadReport()
|
||
}, [loadReport])
|
||
|
||
if (isLoading) {
|
||
return <LoadingSkeleton />
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex h-screen items-center justify-center text-red-500">
|
||
获取年度报告失败: {error.message}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!data) return null
|
||
|
||
return (
|
||
<ScrollArea className="h-[calc(100vh-4rem)]">
|
||
<div className="min-h-screen bg-gradient-to-b from-background to-muted/50 p-4 md:p-8 print:p-0" ref={reportRef}>
|
||
<div className="mx-auto max-w-5xl space-y-8 print:space-y-4">
|
||
{/* 头部 Hero */}
|
||
<header className="relative overflow-hidden rounded-3xl bg-primary p-8 text-primary-foreground shadow-2xl print:rounded-none print:shadow-none">
|
||
{/* 导出按钮 */}
|
||
<div className="absolute right-4 top-4 z-20 print:hidden" data-export-btn>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={handleExport}
|
||
disabled={isExporting}
|
||
className="gap-2 bg-white/20 hover:bg-white/30 text-white border-white/30"
|
||
>
|
||
{isExporting ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
导出中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Download className="h-4 w-4" />
|
||
保存图片
|
||
</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
<div className="relative z-10 flex flex-col items-center text-center">
|
||
<Bot className="mb-4 h-16 w-16 animate-bounce" />
|
||
<h1 className="text-4xl font-bold tracking-tighter sm:text-6xl">
|
||
{data.bot_name} {data.year} 年度总结
|
||
</h1>
|
||
<p className="mt-4 max-w-2xl text-lg opacity-90">
|
||
连接与成长 · Connection & Growth
|
||
</p>
|
||
<div className="mt-6 flex items-center gap-2 text-sm opacity-75">
|
||
<Calendar className="h-4 w-4" />
|
||
<span>生成时间: {data.generated_at}</span>
|
||
</div>
|
||
</div>
|
||
{/* 背景装饰 */}
|
||
<div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
|
||
<div className="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
|
||
</header>
|
||
|
||
{/* 维度一：时光足迹 */}
|
||
<section className="space-y-4 break-inside-avoid">
|
||
<div className="flex items-center gap-2 text-2xl font-bold text-primary">
|
||
<Clock className="h-8 w-8" />
|
||
<h2>时光足迹</h2>
|
||
</div>
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||
<StatCard
|
||
title="年度在线时长"
|
||
value={`${data.time_footprint.total_online_hours} 小时`}
|
||
description={getOnlineHoursMetaphor(data.time_footprint.total_online_hours)}
|
||
icon={<Clock className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="最忙碌的一天"
|
||
value={data.time_footprint.busiest_day || 'N/A'}
|
||
description={getBusiestDayMetaphor(data.time_footprint.busiest_day_count)}
|
||
icon={<Calendar className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="深夜互动 (0-4点)"
|
||
value={`${data.time_footprint.midnight_chat_count} 次`}
|
||
description={getMidnightMetaphor(data.time_footprint.midnight_chat_count)}
|
||
icon={<Moon className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="作息属性"
|
||
value={data.time_footprint.is_night_owl ? '夜猫子' : '早起鸟'}
|
||
description={getNightOwlMetaphor(data.time_footprint.is_night_owl, data.time_footprint.midnight_chat_count)}
|
||
icon={data.time_footprint.is_night_owl ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
|
||
/>
|
||
</div>
|
||
|
||
<Card className="overflow-hidden">
|
||
<CardHeader>
|
||
<CardTitle>24小时活跃时钟</CardTitle>
|
||
<CardDescription>{data.bot_name}在一天中各个时段的活跃程度</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="h-[300px]">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<BarChart data={data.time_footprint.hourly_distribution.map((count: number, hour: number) => ({ hour: `${hour}点`, count }))}>
|
||
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
||
<XAxis dataKey="hour" />
|
||
<YAxis />
|
||
<Tooltip
|
||
contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
|
||
cursor={{ fill: 'transparent' }}
|
||
/>
|
||
<Bar dataKey="count" fill="hsl(var(--color-primary))" radius={[4, 4, 0, 0]} />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{data.time_footprint.first_message_time && (
|
||
<Card className="bg-muted/30 border-dashed">
|
||
<CardContent className="flex flex-col items-center justify-center p-6 text-center">
|
||
<p className="text-muted-foreground mb-2">2025年的故事开始于</p>
|
||
<div className="text-xl font-bold text-primary mb-1">{data.time_footprint.first_message_time}</div>
|
||
<p className="text-lg">
|
||
<span className="font-semibold text-foreground">{data.time_footprint.first_message_user}</span> 说：
|
||
<span className="italic text-muted-foreground">"{data.time_footprint.first_message_content}"</span>
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</section>
|
||
|
||
{/* 维度二：社交网络 */}
|
||
<section className="space-y-4 break-inside-avoid">
|
||
<div className="flex items-center gap-2 text-2xl font-bold text-primary">
|
||
<Users className="h-8 w-8" />
|
||
<h2>社交网络</h2>
|
||
</div>
|
||
<div className="grid gap-4 md:grid-cols-3">
|
||
<StatCard
|
||
title="社交圈子"
|
||
value={`${data.social_network.total_groups} 个群组`}
|
||
description={`${data.bot_name}加入的群组总数`}
|
||
icon={<Users className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="被呼叫次数"
|
||
value={`${data.social_network.at_count + data.social_network.mentioned_count} 次`}
|
||
description="我的名字被大家频繁提起"
|
||
icon={<AtSign className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="最长情陪伴"
|
||
value={data.social_network.longest_companion_user || 'N/A'}
|
||
description={`始终都在，已陪伴 ${data.social_network.longest_companion_days} 天`}
|
||
icon={<Heart className="h-4 w-4 text-red-500" />}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>话痨群组 TOP5</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{data.social_network.top_groups.length > 0 ? (
|
||
data.social_network.top_groups.map((group: { group_id: string; group_name: string; message_count: number; is_webui?: boolean }, index: number) => (
|
||
<div key={group.group_id} className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<Badge variant={index === 0 ? "default" : "secondary"} className="h-6 w-6 rounded-full p-0 flex items-center justify-center shrink-0">
|
||
{index + 1}
|
||
</Badge>
|
||
<span className="font-medium truncate max-w-[120px]">{group.group_name}</span>
|
||
{group.is_webui && (
|
||
<Badge variant="outline" className="text-xs px-1.5 py-0 h-5 bg-blue-50 text-blue-600 border-blue-200">
|
||
WebUI
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<span className="text-muted-foreground text-sm shrink-0">{group.message_count} 条消息</span>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="text-center text-muted-foreground py-4">暂无数据</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>年度最佳损友 TOP5</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{data.social_network.top_users.length > 0 ? (
|
||
data.social_network.top_users.map((user: { user_id: string; user_nickname: string; message_count: number; is_webui?: boolean }, index: number) => (
|
||
<div key={user.user_id} className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<Badge variant={index === 0 ? "default" : "secondary"} className="h-6 w-6 rounded-full p-0 flex items-center justify-center shrink-0">
|
||
{index + 1}
|
||
</Badge>
|
||
<span className="font-medium truncate max-w-[120px]">{user.user_nickname}</span>
|
||
{user.is_webui && (
|
||
<Badge variant="outline" className="text-xs px-1.5 py-0 h-5 bg-blue-50 text-blue-600 border-blue-200">
|
||
WebUI
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<span className="text-muted-foreground text-sm shrink-0">{user.message_count} 次互动</span>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="text-center text-muted-foreground py-4">暂无数据</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 维度三：最强大脑 */}
|
||
<section className="space-y-4 break-inside-avoid">
|
||
<div className="flex items-center gap-2 text-2xl font-bold text-primary">
|
||
<Brain className="h-8 w-8" />
|
||
<h2>最强大脑</h2>
|
||
</div>
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||
<StatCard
|
||
title="年度 Token 消耗"
|
||
value={(data.brain_power.total_tokens / 1000000).toFixed(2) + ' M'}
|
||
description={getTokenMetaphor(data.brain_power.total_tokens)}
|
||
icon={<Zap className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="年度总花费"
|
||
value={`$${data.brain_power.total_cost.toFixed(2)}`}
|
||
description={getCostMetaphor(data.brain_power.total_cost)}
|
||
icon={<span className="font-bold">$</span>}
|
||
/>
|
||
<StatCard
|
||
title="高冷指数"
|
||
value={`${data.brain_power.silence_rate}%`}
|
||
description={getSilenceMetaphor(data.brain_power.silence_rate)}
|
||
icon={<Moon className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="最高兴趣值"
|
||
value={data.brain_power.max_interest_value ?? 'N/A'}
|
||
description={data.brain_power.max_interest_time ? `出现在 ${data.brain_power.max_interest_time}` : '暂无数据'}
|
||
icon={<Heart className="h-4 w-4" />}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>模型偏好分布</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{data.brain_power.model_distribution.slice(0, 5).map((item: { model: string; count: number }, index: number) => {
|
||
const maxCount = data.brain_power.model_distribution[0]?.count || 1
|
||
const percentage = Math.round((item.count / maxCount) * 100)
|
||
return (
|
||
<div key={item.model} className="space-y-1">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="font-medium truncate max-w-[200px]">{item.model}</span>
|
||
<span className="text-muted-foreground">{item.count.toLocaleString()} 次</span>
|
||
</div>
|
||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
|
||
<div
|
||
className="h-full transition-all duration-500"
|
||
style={{
|
||
width: `${percentage}%`,
|
||
backgroundColor: COLORS[index % COLORS.length]
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 最喜欢的回复模型 TOP5 */}
|
||
{data.brain_power.top_reply_models && data.brain_power.top_reply_models.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>最喜欢的回复模型 TOP5</CardTitle>
|
||
<CardDescription>{data.bot_name}用来回复消息的模型偏好</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{data.brain_power.top_reply_models.map((item: { model: string; count: number }, index: number) => {
|
||
const maxCount = data.brain_power.top_reply_models[0]?.count || 1
|
||
const percentage = Math.round((item.count / maxCount) * 100)
|
||
return (
|
||
<div key={item.model} className="space-y-1">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="font-medium truncate max-w-[200px]">{item.model}</span>
|
||
<span className="text-muted-foreground">{item.count.toLocaleString()} 次</span>
|
||
</div>
|
||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
|
||
<div
|
||
className="h-full transition-all duration-500"
|
||
style={{
|
||
width: `${percentage}%`,
|
||
backgroundColor: COLORS[index % COLORS.length]
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 烧钱大户 - 只有有有效用户数据时才显示 */}
|
||
{data.brain_power.top_token_consumers && data.brain_power.top_token_consumers.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>烧钱大户 TOP3</CardTitle>
|
||
<CardDescription>谁消耗了最多的 API 额度</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-6">
|
||
{data.brain_power.top_token_consumers.map((consumer: { user_id: string; cost: number; tokens: number }) => (
|
||
<div key={consumer.user_id} className="space-y-2">
|
||
<div className="flex justify-between text-sm font-medium">
|
||
<span>用户 {consumer.user_id}</span>
|
||
<span>${consumer.cost.toFixed(2)}</span>
|
||
</div>
|
||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
|
||
<div
|
||
className="h-full bg-primary transition-all duration-500"
|
||
style={{ width: `${(consumer.cost / (data.brain_power.top_token_consumers[0]?.cost || 1)) * 100}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
|
||
{/* 最昂贵的思考 & 思考深度 */}
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<Card className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/20">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">💰</span>
|
||
最昂贵的一次思考
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<div className="text-4xl font-bold text-amber-600 dark:text-amber-400">
|
||
${data.brain_power.most_expensive_cost.toFixed(4)}
|
||
</div>
|
||
{data.brain_power.most_expensive_time && (
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
发生在 {data.brain_power.most_expensive_time}
|
||
</p>
|
||
)}
|
||
<p className="mt-4 text-sm text-muted-foreground">
|
||
{getExpensiveThinkingMetaphor(data.brain_power.most_expensive_cost)}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-950/20 dark:to-blue-950/20">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">🧠</span>
|
||
思考深度
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 gap-4 text-center">
|
||
<div>
|
||
<div className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
|
||
{data.brain_power.avg_reasoning_length?.toFixed(0) || 0}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">平均思考字数</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||
{data.brain_power.max_reasoning_length?.toLocaleString() || 0}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">最长思考字数</div>
|
||
</div>
|
||
</div>
|
||
{data.brain_power.max_reasoning_time && (
|
||
<p className="mt-4 text-center text-xs text-muted-foreground">
|
||
最深沉的思考发生在 {data.brain_power.max_reasoning_time}
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 维度四：个性与表达 */}
|
||
<section className="space-y-4 break-inside-avoid">
|
||
<div className="flex items-center gap-2 text-2xl font-bold text-primary">
|
||
<Smile className="h-8 w-8" />
|
||
<h2>个性与表达</h2>
|
||
</div>
|
||
|
||
{/* 深夜回复 & 最喜欢的回复 */}
|
||
{(data.expression_vibe.late_night_reply || data.expression_vibe.favorite_reply) && (
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
{data.expression_vibe.late_night_reply && (
|
||
<Card className="bg-gradient-to-br from-indigo-50 to-violet-50 dark:from-indigo-950/20 dark:to-violet-950/20">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">🌙</span>
|
||
深夜还在回复
|
||
</CardTitle>
|
||
<CardDescription>凌晨 {data.expression_vibe.late_night_reply.time}，{data.bot_name}还在回复...</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-lg italic text-muted-foreground">
|
||
"{data.expression_vibe.late_night_reply.content}"
|
||
</p>
|
||
<p className="mt-4 text-sm text-muted-foreground">
|
||
是有什么心事吗？
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{data.expression_vibe.favorite_reply && (
|
||
<Card className="bg-gradient-to-br from-rose-50 to-pink-50 dark:from-rose-950/20 dark:to-pink-950/20">
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">💬</span>
|
||
最喜欢的回复
|
||
</CardTitle>
|
||
<CardDescription>使用了 {data.expression_vibe.favorite_reply.count} 次</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-lg font-medium text-primary">
|
||
"{data.expression_vibe.favorite_reply.content}"
|
||
</p>
|
||
<p className="mt-4 text-sm text-muted-foreground">
|
||
{getFavoriteReplyMetaphor(data.expression_vibe.favorite_reply.count, data.bot_name)}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
{/* 使用最多的表情包 TOP3 */}
|
||
<Card className="bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-950/20 dark:to-purple-950/20">
|
||
<CardHeader>
|
||
<CardTitle>使用最多的表情包 TOP3</CardTitle>
|
||
<CardDescription>年度最爱的表情包们</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{data.expression_vibe.top_emojis && data.expression_vibe.top_emojis.length > 0 ? (
|
||
<div className="flex justify-center gap-4">
|
||
{data.expression_vibe.top_emojis.slice(0, 3).map((emoji: { id: number; usage_count: number }, index: number) => (
|
||
<div key={emoji.id} className="flex flex-col items-center">
|
||
<div className="relative">
|
||
<img
|
||
src={`/api/webui/emoji/${emoji.id}/thumbnail?original=true`}
|
||
alt={`TOP ${index + 1}`}
|
||
className="h-24 w-24 rounded-lg object-cover shadow-md transition-transform hover:scale-105"
|
||
/>
|
||
<Badge
|
||
className={cn(
|
||
"absolute -top-2 -right-2",
|
||
index === 0 ? "bg-yellow-500" : index === 1 ? "bg-gray-400" : "bg-amber-700"
|
||
)}
|
||
>
|
||
{index + 1}
|
||
</Badge>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">{emoji.usage_count} 次</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="flex h-32 items-center justify-center text-muted-foreground">暂无数据</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="space-y-4">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>印象最深刻的表达风格</CardTitle>
|
||
<CardDescription>{data.bot_name}最常使用的表达方式</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap gap-2">
|
||
{data.expression_vibe.top_expressions.map((exp: { style: string; count: number }, index: number) => (
|
||
<Badge
|
||
key={exp.style}
|
||
variant="outline"
|
||
className={cn(
|
||
"px-3 py-1 text-sm",
|
||
index === 0 && "border-primary bg-primary/10 text-primary text-base px-4 py-2"
|
||
)}
|
||
>
|
||
{exp.style} ({exp.count})
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<StatCard
|
||
title="图片鉴赏"
|
||
value={`${data.expression_vibe.image_processed_count} 张`}
|
||
description={getImageMetaphor(data.expression_vibe.image_processed_count)}
|
||
icon={<ImageIcon className="h-4 w-4" />}
|
||
/>
|
||
<StatCard
|
||
title="成长的足迹"
|
||
value={`${data.expression_vibe.rejected_expression_count} 次`}
|
||
description={getRejectedMetaphor(data.expression_vibe.rejected_expression_count)}
|
||
icon={<Zap className="h-4 w-4" />}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 行动派 */}
|
||
{data.expression_vibe.action_types.length > 0 && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<span className="text-2xl">⚡</span>
|
||
行动派
|
||
</CardTitle>
|
||
<CardDescription>除了聊天，我还帮大家做了这些事</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap gap-3">
|
||
{data.expression_vibe.action_types.map((action: { action: string; count: number }) => (
|
||
<div
|
||
key={action.action}
|
||
className="flex items-center gap-2 rounded-full bg-primary/10 px-4 py-2"
|
||
>
|
||
<span className="font-medium text-primary">{action.action}</span>
|
||
<Badge variant="secondary">{action.count} 次</Badge>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</section>
|
||
|
||
{/* 维度五：趣味成就 */}
|
||
<section className="space-y-4 break-inside-avoid">
|
||
<div className="flex items-center gap-2 text-2xl font-bold text-primary">
|
||
<Trophy className="h-8 w-8" />
|
||
<h2>趣味成就</h2>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-3">
|
||
<Card className="col-span-1 md:col-span-2">
|
||
<CardHeader>
|
||
<CardTitle>新学到的"黑话"</CardTitle>
|
||
<CardDescription>今年我学会了 {data.achievements.new_jargon_count} 个新词</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap gap-3">
|
||
{data.achievements.sample_jargons.map((jargon: { content: string; meaning: string; count: number }) => (
|
||
<div key={jargon.content} className="group relative rounded-lg border bg-card p-3 shadow-sm transition-all hover:shadow-md">
|
||
<div className="font-bold text-primary">{jargon.content}</div>
|
||
<div className="text-xs text-muted-foreground mt-1 line-clamp-2 max-w-[200px]">
|
||
{jargon.meaning || '暂无解释'}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="flex flex-col justify-center items-center bg-primary text-primary-foreground">
|
||
<CardContent className="flex flex-col items-center justify-center p-6 text-center">
|
||
<MessageSquare className="h-12 w-12 mb-4 opacity-80" />
|
||
<div className="text-4xl font-bold mb-2">{data.achievements.total_messages.toLocaleString()}</div>
|
||
<div className="text-sm opacity-80">年度总消息数</div>
|
||
<div className="mt-4 text-xs opacity-60">
|
||
其中回复了 {data.achievements.total_replies.toLocaleString()} 次
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 底部 */}
|
||
<footer className="mt-12 text-center text-muted-foreground">
|
||
<p>MaiBot 2025 Annual Report</p>
|
||
<p className="text-sm">Generated with ❤️ by MaiBot Team</p>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</ScrollArea>
|
||
)
|
||
}
|
||
|
||
function StatCard({
|
||
title,
|
||
value,
|
||
description,
|
||
icon,
|
||
}: {
|
||
title: string
|
||
value: string | number
|
||
description: string
|
||
icon: React.ReactNode
|
||
}) {
|
||
return (
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||
<div className="text-muted-foreground">{icon}</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{value}</div>
|
||
<p className="text-xs text-muted-foreground">{description}</p>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
function LoadingSkeleton() {
|
||
return (
|
||
<div className="container mx-auto space-y-8 p-8">
|
||
<Skeleton className="h-64 w-full rounded-3xl" />
|
||
<div className="grid gap-4 md:grid-cols-4">
|
||
{[...Array(4)].map((_, i) => (
|
||
<Skeleton key={i} className="h-32 w-full" />
|
||
))}
|
||
</div>
|
||
<Skeleton className="h-96 w-full" />
|
||
</div>
|
||
)
|
||
}
|