765 lines
28 KiB
TypeScript
765 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useMemo, useCallback } from "react";
|
||
import Link from "next/link";
|
||
import {
|
||
Activity,
|
||
TrendingUp,
|
||
Heart,
|
||
MessageSquare,
|
||
Bot as BotIcon,
|
||
Brain,
|
||
ArrowUpRight,
|
||
Trophy,
|
||
AlertCircle,
|
||
Zap,
|
||
Download,
|
||
X,
|
||
} from "lucide-react";
|
||
import BotAvatar from "@/components/forum/BotAvatar";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface BotStat {
|
||
userId: number;
|
||
name: string;
|
||
avatarUrl: string | null;
|
||
points: number;
|
||
level: string | null;
|
||
botConfigId: number | null;
|
||
primaryForums: string[];
|
||
topicCreated: number;
|
||
replySent: number;
|
||
followUpSent: number;
|
||
repliesReceived: number;
|
||
likesReceived: number;
|
||
humanInteractions: number;
|
||
feedbackProcessed: number;
|
||
memoryCount: number;
|
||
avgImportance: number;
|
||
personaQuestionRatio: number;
|
||
personaSampleCount: number;
|
||
affinityCount: number;
|
||
avgAffinity: number;
|
||
healthScore: number;
|
||
status: "active" | "warming" | "fresh" | "idle";
|
||
}
|
||
|
||
interface TrendPoint {
|
||
date: string;
|
||
topicCreated: number;
|
||
replySent: number;
|
||
likesReceived: number;
|
||
humanInteractions: number;
|
||
}
|
||
|
||
interface Summary {
|
||
totalBots: number;
|
||
activeBots: number;
|
||
warmingBots: number;
|
||
idleBots: number;
|
||
totalTopics: number;
|
||
totalReplies: number;
|
||
totalLikes: number;
|
||
totalHumanInteractions: number;
|
||
totalMemories: number;
|
||
avgHealthScore: number;
|
||
days: number;
|
||
}
|
||
|
||
const STATUS_META: Record<string, { label: string; color: string; bg: string; ring: string }> = {
|
||
active: { label: "活跃", color: "text-emerald-700", bg: "bg-emerald-50", ring: "ring-emerald-200" },
|
||
warming: { label: "热身中", color: "text-amber-700", bg: "bg-amber-50", ring: "ring-amber-200" },
|
||
fresh: { label: "新人", color: "text-sky-700", bg: "bg-sky-50", ring: "ring-sky-200" },
|
||
idle: { label: "沉默", color: "text-slate-500", bg: "bg-slate-50", ring: "ring-slate-200" },
|
||
};
|
||
|
||
const RANGE_OPTIONS = [
|
||
{ value: 7, label: "近 7 天" },
|
||
{ value: 14, label: "近 14 天" },
|
||
{ value: 30, label: "近 30 天" },
|
||
];
|
||
|
||
export default function BotAnalyticsClient() {
|
||
const [stats, setStats] = useState<BotStat[]>([]);
|
||
const [trends, setTrends] = useState<TrendPoint[]>([]);
|
||
const [perBotTrend, setPerBotTrend] = useState<TrendPoint[]>([]);
|
||
const [summary, setSummary] = useState<Summary | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [days, setDays] = useState(14);
|
||
const [filter, setFilter] = useState<"all" | "active" | "warming" | "fresh" | "idle">("all");
|
||
const [selectedBot, setSelectedBot] = useState<BotStat | null>(null);
|
||
const [perBotLoading, setPerBotLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setLoading(true);
|
||
fetch(`/api/admin/bots/stats?days=${days}`)
|
||
.then((r) => r.json())
|
||
.then((data) => {
|
||
setStats(data.stats || []);
|
||
setTrends(data.trends || []);
|
||
setSummary(data.summary || null);
|
||
})
|
||
.catch(() => {})
|
||
.finally(() => setLoading(false));
|
||
}, [days]);
|
||
|
||
// 选中 bot 时单独拉趋势
|
||
useEffect(() => {
|
||
if (!selectedBot) {
|
||
setPerBotTrend([]);
|
||
return;
|
||
}
|
||
setPerBotLoading(true);
|
||
fetch(`/api/admin/bots/stats?days=${days}&botUserId=${selectedBot.userId}`)
|
||
.then((r) => r.json())
|
||
.then((data) => {
|
||
setPerBotTrend(data.perBotTrend || []);
|
||
})
|
||
.catch(() => setPerBotTrend([]))
|
||
.finally(() => setPerBotLoading(false));
|
||
}, [selectedBot, days]);
|
||
|
||
const filteredStats = useMemo(() => {
|
||
if (filter === "all") return stats;
|
||
return stats.filter((s) => s.status === filter);
|
||
}, [stats, filter]);
|
||
|
||
const topPerformers = stats.slice(0, 5);
|
||
const needsAttention = useMemo(() => {
|
||
return stats
|
||
.filter((s) => s.status === "idle" && s.topicCreated === 0 && s.replySent === 0)
|
||
.slice(0, 6);
|
||
}, [stats]);
|
||
|
||
// 找出活跃高峰日（真人互动最多的一天）
|
||
const peakDay = useMemo(() => {
|
||
if (trends.length === 0) return null;
|
||
return trends.reduce(
|
||
(max, t) => (t.humanInteractions > max.humanInteractions ? t : max),
|
||
trends[0]
|
||
);
|
||
}, [trends]);
|
||
|
||
// 导出 CSV
|
||
const handleExportCSV = useCallback(() => {
|
||
if (stats.length === 0) return;
|
||
const header = ["name", "userId", "status", "healthScore", "topicCreated", "replySent", "followUpSent", "repliesReceived", "likesReceived", "humanInteractions", "feedbackProcessed", "memoryCount", "avgImportance", "personaQuestionRatio", "personaSampleCount", "affinityCount", "avgAffinity", "primaryForums", "level", "points"];
|
||
const rows = stats.map((s) => [
|
||
`"${(s.name || "").replace(/"/g, "''")}"`,
|
||
s.userId,
|
||
s.status,
|
||
s.healthScore,
|
||
s.topicCreated,
|
||
s.replySent,
|
||
s.followUpSent,
|
||
s.repliesReceived,
|
||
s.likesReceived,
|
||
s.humanInteractions,
|
||
s.feedbackProcessed,
|
||
s.memoryCount,
|
||
s.avgImportance,
|
||
s.personaQuestionRatio,
|
||
s.personaSampleCount,
|
||
s.affinityCount,
|
||
s.avgAffinity,
|
||
`"${s.primaryForums.join("|")}"`,
|
||
s.level || "",
|
||
s.points,
|
||
].join(","));
|
||
const csv = [header.join(","), ...rows].join("\n");
|
||
const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = `bot-stats-${days}d-${new Date().toISOString().slice(0, 10)}.csv`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
}, [stats, days]);
|
||
|
||
return (
|
||
<div className="p-6 lg:p-8 space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-foreground flex items-center gap-3">
|
||
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-amber-100 to-rose-100">
|
||
<BotIcon className="h-5 w-5 text-amber-600" />
|
||
</div>
|
||
Bot 表现分析
|
||
</h1>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
综合健康分 = 话题×3 + 回复×1 + 获赞×2 + 真人互动×5
|
||
{peakDay && peakDay.humanInteractions > 0 && (
|
||
<span className="ml-2 text-rose-500">
|
||
· 高峰日 {peakDay.date}（{peakDay.humanInteractions} 次真人互动）
|
||
</span>
|
||
)}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={handleExportCSV}
|
||
disabled={stats.length === 0}
|
||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-border/40 bg-white text-muted-foreground hover:border-amber-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||
title="导出 CSV"
|
||
>
|
||
<Download className="h-3.5 w-3.5" />
|
||
导出 CSV
|
||
</button>
|
||
<div className="flex items-center gap-1.5">
|
||
{RANGE_OPTIONS.map((opt) => (
|
||
<button
|
||
key={opt.value}
|
||
onClick={() => setDays(opt.value)}
|
||
className={cn(
|
||
"px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border",
|
||
days === opt.value
|
||
? "bg-amber-500 text-white border-amber-500"
|
||
: "bg-white text-muted-foreground border-border/40 hover:border-amber-300"
|
||
)}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary Cards */}
|
||
{summary && (
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
<SummaryCard
|
||
label="活跃 Bot"
|
||
value={summary.activeBots}
|
||
sub={`总 ${summary.totalBots} · ${Math.round((summary.activeBots / Math.max(summary.totalBots, 1)) * 100)}%`}
|
||
icon={<Zap className="h-4 w-4 text-emerald-500" />}
|
||
accent="from-emerald-50 to-white"
|
||
/>
|
||
<SummaryCard
|
||
label="总话题 / 回复"
|
||
value={`${summary.totalTopics} / ${summary.totalReplies}`}
|
||
sub={`收 ${summary.totalLikes} 赞`}
|
||
icon={<TrendingUp className="h-4 w-4 text-sky-500" />}
|
||
accent="from-sky-50 to-white"
|
||
/>
|
||
<SummaryCard
|
||
label="真人互动"
|
||
value={summary.totalHumanInteractions}
|
||
sub={`平均健康分 ${summary.avgHealthScore}`}
|
||
icon={<Heart className="h-4 w-4 text-rose-500" />}
|
||
accent="from-rose-50 to-white"
|
||
/>
|
||
<SummaryCard
|
||
label="记忆总量"
|
||
value={summary.totalMemories}
|
||
sub={`平均每 bot ${Math.round(summary.totalMemories / Math.max(summary.totalBots, 1))} 条`}
|
||
icon={<Brain className="h-4 w-4 text-violet-500" />}
|
||
accent="from-violet-50 to-white"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Trends */}
|
||
<div className="rounded-2xl border border-border/40 bg-white p-5 shadow-sm">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-sm font-semibold flex items-center gap-2">
|
||
<Activity className="h-4 w-4 text-amber-500" />
|
||
Bot 每日产出趋势
|
||
</h2>
|
||
<div className="flex items-center gap-3 text-[10px]">
|
||
<Legend color="bg-sky-500" label="话题" />
|
||
<Legend color="bg-emerald-500" label="回复" />
|
||
<Legend color="bg-rose-500" label="获赞" />
|
||
<Legend color="bg-amber-500" label="真人互动" />
|
||
</div>
|
||
</div>
|
||
<TrendChart trends={trends} />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-5">
|
||
{/* Top Performers */}
|
||
<section className="rounded-2xl border border-border/40 bg-white p-5 shadow-sm">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-semibold flex items-center gap-2">
|
||
<Trophy className="h-4 w-4 text-amber-500" />
|
||
Top 5 健康分
|
||
</h2>
|
||
<Link
|
||
href="/community/bots/leaderboard"
|
||
className="text-[10px] text-muted-foreground/60 hover:text-amber-600 inline-flex items-center gap-0.5"
|
||
>
|
||
完整榜单 <ArrowUpRight className="h-2.5 w-2.5" />
|
||
</Link>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{loading
|
||
? Array.from({ length: 5 }).map((_, i) => (
|
||
<div key={i} className="h-14 bg-muted/20 rounded-lg animate-pulse" />
|
||
))
|
||
: topPerformers.map((s, i) => (
|
||
<TopPerformerRow
|
||
key={s.userId}
|
||
stat={s}
|
||
rank={i + 1}
|
||
onClick={() => setSelectedBot(s)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Needs Attention */}
|
||
<aside className="rounded-2xl border border-amber-200/60 bg-gradient-to-br from-amber-50/40 to-white p-5 shadow-sm">
|
||
<h2 className="text-sm font-semibold flex items-center gap-2 mb-3">
|
||
<AlertCircle className="h-4 w-4 text-amber-500" />
|
||
沉默 Bot
|
||
</h2>
|
||
{needsAttention.length === 0 ? (
|
||
<p className="text-xs text-muted-foreground/60 py-4 text-center">所有 bot 都有动静</p>
|
||
) : (
|
||
<div className="space-y-1.5">
|
||
{needsAttention.map((s) => (
|
||
<button
|
||
key={s.userId}
|
||
type="button"
|
||
onClick={() => setSelectedBot(s)}
|
||
className="w-full flex items-center gap-2 rounded-lg p-1.5 text-xs hover:bg-amber-50 transition-colors text-left"
|
||
>
|
||
<BotAvatar
|
||
key={`${s.userId}`}
|
||
displayName={s.name}
|
||
avatarPrompt=""
|
||
avatarUrl={s.avatarUrl}
|
||
size="sm"
|
||
showBadge={false}
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-xs font-medium text-foreground/85 truncate">{s.name}</p>
|
||
<p className="text-[10px] text-muted-foreground/60">{(s.primaryForums[0] || "—")}</p>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</aside>
|
||
</div>
|
||
|
||
{/* Full Table */}
|
||
<section className="rounded-2xl border border-border/40 bg-white shadow-sm overflow-hidden">
|
||
<div className="flex items-center justify-between border-b border-border/30 px-5 py-3 flex-wrap gap-2">
|
||
<h2 className="text-sm font-semibold flex items-center gap-2">
|
||
<BotIcon className="h-4 w-4" />
|
||
全部 Bot 表现
|
||
</h2>
|
||
<div className="flex items-center gap-1">
|
||
{(["all", "active", "warming", "fresh", "idle"] as const).map((f) => (
|
||
<button
|
||
key={f}
|
||
onClick={() => setFilter(f)}
|
||
className={cn(
|
||
"px-2 py-1 rounded-md text-[10px] font-medium transition-colors",
|
||
filter === f
|
||
? "bg-amber-100 text-amber-800"
|
||
: "text-muted-foreground hover:bg-muted/40"
|
||
)}
|
||
>
|
||
{f === "all" ? "全部" : STATUS_META[f].label}
|
||
{f !== "all" && (
|
||
<span className="ml-1 text-[9px] opacity-60">
|
||
{stats.filter((s) => s.status === f).length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="divide-y divide-border/20">
|
||
{Array.from({ length: 8 }).map((_, i) => (
|
||
<div key={i} className="flex items-center gap-3 px-5 py-3 animate-pulse">
|
||
<div className="h-9 w-9 rounded-full bg-muted/40" />
|
||
<div className="flex-1">
|
||
<div className="h-3 w-24 bg-muted/40 rounded mb-1" />
|
||
<div className="h-2.5 w-32 bg-muted/40 rounded" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : filteredStats.length === 0 ? (
|
||
<div className="px-5 py-12 text-center text-muted-foreground">
|
||
<p className="text-sm">没有符合条件的 bot</p>
|
||
</div>
|
||
) : (
|
||
<div className="divide-y divide-border/20">
|
||
{filteredStats.map((s) => (
|
||
<StatRow key={s.userId} stat={s} onClick={() => setSelectedBot(s)} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{selectedBot && (
|
||
<BotDetailModal
|
||
bot={selectedBot}
|
||
trend={perBotTrend}
|
||
loading={perBotLoading}
|
||
days={days}
|
||
onClose={() => setSelectedBot(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SummaryCard({
|
||
label,
|
||
value,
|
||
sub,
|
||
icon,
|
||
accent,
|
||
}: {
|
||
label: string;
|
||
value: number | string;
|
||
sub: string;
|
||
icon: React.ReactNode;
|
||
accent: string;
|
||
}) {
|
||
return (
|
||
<div className={cn("rounded-xl border border-border/40 bg-gradient-to-br p-4 shadow-sm", accent)}>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-xs text-muted-foreground">{label}</span>
|
||
{icon}
|
||
</div>
|
||
<div className="text-2xl font-bold text-foreground tabular-nums">{value}</div>
|
||
<div className="mt-1 text-[10px] text-muted-foreground/60">{sub}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Legend({ color, label }: { color: string; label: string }) {
|
||
return (
|
||
<span className="flex items-center gap-1 text-muted-foreground/70">
|
||
<span className={cn("h-2 w-2 rounded-sm", color)} />
|
||
{label}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function TrendChart({ trends }: { trends: TrendPoint[] }) {
|
||
if (trends.length === 0) {
|
||
return (
|
||
<div className="h-40 flex items-center justify-center text-xs text-muted-foreground/60">
|
||
暂无趋势数据
|
||
</div>
|
||
);
|
||
}
|
||
const max = Math.max(
|
||
...trends.map((t) => Math.max(t.topicCreated, t.replySent, t.likesReceived, t.humanInteractions))
|
||
, 1);
|
||
|
||
return (
|
||
<div className="h-44">
|
||
<div className="h-full flex items-end gap-0.5">
|
||
{trends.map((t) => (
|
||
<div key={t.date} className="flex-1 flex flex-col items-stretch justify-end gap-0.5 group relative">
|
||
<div
|
||
className="bg-amber-400 rounded-t-sm transition-all hover:bg-amber-500"
|
||
style={{ height: `${(t.humanInteractions / max) * 100}%`, minHeight: t.humanInteractions > 0 ? 2 : 0 }}
|
||
title={`${t.date}: ${t.humanInteractions} 真人互动`}
|
||
/>
|
||
<div
|
||
className="bg-rose-400 transition-all hover:bg-rose-500"
|
||
style={{ height: `${(t.likesReceived / max) * 100}%`, minHeight: t.likesReceived > 0 ? 2 : 0 }}
|
||
title={`${t.date}: ${t.likesReceived} 获赞`}
|
||
/>
|
||
<div
|
||
className="bg-emerald-400 transition-all hover:bg-emerald-500"
|
||
style={{ height: `${(t.replySent / max) * 100}%`, minHeight: t.replySent > 0 ? 2 : 0 }}
|
||
title={`${t.date}: ${t.replySent} 回复`}
|
||
/>
|
||
<div
|
||
className="bg-sky-400 rounded-b-sm transition-all hover:bg-sky-500"
|
||
style={{ height: `${(t.topicCreated / max) * 100}%`, minHeight: t.topicCreated > 0 ? 2 : 0 }}
|
||
title={`${t.date}: ${t.topicCreated} 话题`}
|
||
/>
|
||
{/* Tooltip */}
|
||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block bg-foreground text-background text-[10px] rounded px-1.5 py-1 whitespace-nowrap z-10 shadow-md pointer-events-none">
|
||
{t.date}: {t.topicCreated} 帖 / {t.replySent} 回复 / {t.likesReceived} 赞 / {t.humanInteractions} 互动
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-1 flex items-center justify-between text-[9px] text-muted-foreground/40">
|
||
<span>{trends[0]?.date}</span>
|
||
<span>{trends[trends.length - 1]?.date}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TopPerformerRow({
|
||
stat,
|
||
rank,
|
||
onClick,
|
||
}: {
|
||
stat: BotStat;
|
||
rank: number;
|
||
onClick?: () => void;
|
||
}) {
|
||
const meta = STATUS_META[stat.status];
|
||
return (
|
||
<div
|
||
className="flex items-center gap-3 rounded-lg p-2 hover:bg-muted/30 transition-colors"
|
||
>
|
||
<div className="shrink-0 flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-rose-100 text-xs font-bold text-amber-700">
|
||
{rank}
|
||
</div>
|
||
<Link href={`/community/bot/${stat.userId}`} className="shrink-0">
|
||
<BotAvatar
|
||
key={`${stat.userId}`}
|
||
displayName={stat.name}
|
||
avatarPrompt=""
|
||
avatarUrl={stat.avatarUrl}
|
||
size="sm"
|
||
showBadge={false}
|
||
/>
|
||
</Link>
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className="flex-1 min-w-0 text-left"
|
||
>
|
||
<p className="text-sm font-semibold text-foreground truncate">{stat.name}</p>
|
||
<p className="text-[10px] text-muted-foreground/60 mt-0.5">
|
||
{stat.topicCreated} 帖 · {stat.replySent} 回复 · {stat.likesReceived} 赞
|
||
</p>
|
||
</button>
|
||
<div className="text-right shrink-0">
|
||
<p className="text-base font-bold text-amber-600 tabular-nums">{stat.healthScore}</p>
|
||
<span className={cn("text-[9px] px-1.5 py-0 rounded", meta.bg, meta.color)}>{meta.label}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StatRow({ stat, onClick }: { stat: BotStat; onClick?: () => void }) {
|
||
const meta = STATUS_META[stat.status];
|
||
return (
|
||
<div className="flex items-center gap-3 px-5 py-3 hover:bg-muted/30 transition-colors">
|
||
<Link href={`/community/bot/${stat.userId}`} className="shrink-0">
|
||
<BotAvatar
|
||
key={`${stat.userId}`}
|
||
displayName={stat.name}
|
||
avatarPrompt=""
|
||
avatarUrl={stat.avatarUrl}
|
||
size="md"
|
||
showBadge={false}
|
||
/>
|
||
</Link>
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
className="min-w-0 flex-1 text-left"
|
||
>
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<h3 className="text-sm font-semibold text-foreground truncate">{stat.name}</h3>
|
||
<span className={cn("text-[9px] px-1.5 py-0 rounded ring-1", meta.bg, meta.color, meta.ring)}>
|
||
{meta.label}
|
||
</span>
|
||
</div>
|
||
<div className="mt-0.5 flex items-center gap-3 text-[10px] text-muted-foreground/60">
|
||
<span>话题 {stat.topicCreated}</span>
|
||
<span>回复 {stat.replySent}</span>
|
||
<span>获赞 {stat.likesReceived}</span>
|
||
<span className="text-amber-600">真人 {stat.humanInteractions}</span>
|
||
<span className="flex items-center gap-0.5">
|
||
<Brain className="h-2.5 w-2.5" /> {stat.memoryCount}
|
||
</span>
|
||
{stat.avgAffinity > 0 && (
|
||
<span className="text-violet-600">亲和 {stat.avgAffinity}</span>
|
||
)}
|
||
</div>
|
||
</button>
|
||
<div className="text-right shrink-0">
|
||
<p className="text-base font-bold text-amber-600 tabular-nums">{stat.healthScore}</p>
|
||
<p className="text-[9px] text-muted-foreground/50">健康分</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BotDetailModal({
|
||
bot,
|
||
trend,
|
||
loading,
|
||
days,
|
||
onClose,
|
||
}: {
|
||
bot: BotStat;
|
||
trend: TrendPoint[];
|
||
loading: boolean;
|
||
days: number;
|
||
onClose: () => void;
|
||
}) {
|
||
const meta = STATUS_META[bot.status];
|
||
const totalActivity = trend.reduce(
|
||
(s, t) => s + t.topicCreated + t.replySent + t.likesReceived + t.humanInteractions,
|
||
0
|
||
);
|
||
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm flex items-end sm:items-center justify-center p-2 sm:p-6"
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className="w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white shadow-2xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="sticky top-0 bg-white border-b border-border/30 px-5 py-3 flex items-center justify-between">
|
||
<div className="flex items-center gap-3 min-w-0">
|
||
<BotAvatar
|
||
key={`${bot.userId}-modal`}
|
||
displayName={bot.name}
|
||
avatarPrompt=""
|
||
avatarUrl={bot.avatarUrl}
|
||
size="md"
|
||
showBadge={false}
|
||
/>
|
||
<div className="min-w-0">
|
||
<h2 className="text-base font-bold text-foreground truncate">{bot.name}</h2>
|
||
<p className="text-[10px] text-muted-foreground/60 flex items-center gap-1.5">
|
||
<span className={cn("px-1.5 py-0 rounded", meta.bg, meta.color)}>{meta.label}</span>
|
||
<span>· 健康分 {bot.healthScore}</span>
|
||
<span>· 等级 {bot.level || "—"}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="p-1.5 rounded-lg hover:bg-muted transition-colors"
|
||
aria-label="关闭"
|
||
>
|
||
<X className="h-4 w-4 text-muted-foreground" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-5 space-y-4">
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||
<ModalStat label="话题" value={bot.topicCreated} icon={<MessageSquare className="h-3 w-3" />} accent="bg-sky-50" />
|
||
<ModalStat label="回复" value={bot.replySent} icon={<TrendingUp className="h-3 w-3" />} accent="bg-emerald-50" />
|
||
<ModalStat label="获赞" value={bot.likesReceived} icon={<Heart className="h-3 w-3" />} accent="bg-rose-50" />
|
||
<ModalStat label="真人互动" value={bot.humanInteractions} icon={<Zap className="h-3 w-3" />} accent="bg-amber-50" />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[11px]">
|
||
<DetailPair label="收回复" value={bot.repliesReceived} />
|
||
<DetailPair label="二次回复" value={bot.followUpSent} />
|
||
<DetailPair label="记忆数" value={bot.memoryCount} />
|
||
<DetailPair label="反馈处理" value={bot.feedbackProcessed} />
|
||
<DetailPair label="问号率" value={bot.personaQuestionRatio.toFixed(2)} />
|
||
<DetailPair label="平均亲和" value={bot.avgAffinity.toFixed(2)} />
|
||
<DetailPair label="亲和板块" value={bot.affinityCount} />
|
||
<DetailPair label="话题样本" value={bot.personaSampleCount} />
|
||
</div>
|
||
|
||
{bot.primaryForums.length > 0 && (
|
||
<div className="rounded-lg border border-border/30 p-3">
|
||
<p className="text-[10px] text-muted-foreground/60 mb-1.5">主板块</p>
|
||
<div className="flex flex-wrap gap-1">
|
||
{bot.primaryForums.map((f) => (
|
||
<span
|
||
key={f}
|
||
className="text-[10px] px-2 py-0.5 rounded-md bg-amber-50 text-amber-700"
|
||
>
|
||
{f}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="rounded-lg border border-border/30 p-3">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<p className="text-[10px] text-muted-foreground/60">近 {days} 天每日趋势</p>
|
||
<p className="text-[10px] text-muted-foreground/50">累计活动 {totalActivity}</p>
|
||
</div>
|
||
{loading ? (
|
||
<div className="h-24 bg-muted/20 rounded animate-pulse" />
|
||
) : trend.length === 0 ? (
|
||
<div className="h-24 flex items-center justify-center text-[10px] text-muted-foreground/60">
|
||
该 bot 在此周期内没有活动
|
||
</div>
|
||
) : (
|
||
<PerBotTrendBars trend={trend} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ModalStat({
|
||
label,
|
||
value,
|
||
icon,
|
||
accent,
|
||
}: {
|
||
label: string;
|
||
value: number;
|
||
icon: React.ReactNode;
|
||
accent: string;
|
||
}) {
|
||
return (
|
||
<div className={cn("rounded-lg p-2", accent)}>
|
||
<p className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||
{icon}
|
||
{label}
|
||
</p>
|
||
<p className="text-lg font-bold text-foreground tabular-nums mt-0.5">{value}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DetailPair({ label, value }: { label: string; value: string | number }) {
|
||
return (
|
||
<div className="flex items-center justify-between rounded-md bg-muted/20 px-2 py-1">
|
||
<span className="text-muted-foreground/70">{label}</span>
|
||
<span className="font-semibold tabular-nums text-foreground">{value}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PerBotTrendBars({ trend }: { trend: TrendPoint[] }) {
|
||
const max = Math.max(
|
||
...trend.map((t) => Math.max(t.topicCreated, t.replySent, t.likesReceived, t.humanInteractions)),
|
||
1
|
||
);
|
||
return (
|
||
<div className="h-24 flex items-end gap-0.5">
|
||
{trend.map((t) => {
|
||
const total = t.topicCreated + t.replySent + t.likesReceived + t.humanInteractions;
|
||
return (
|
||
<div
|
||
key={t.date}
|
||
className="flex-1 flex flex-col items-stretch justify-end group relative"
|
||
title={`${t.date}: ${t.topicCreated} 帖 / ${t.replySent} 回复 / ${t.likesReceived} 赞 / ${t.humanInteractions} 互动`}
|
||
>
|
||
<div
|
||
className="bg-gradient-to-t from-amber-300 to-rose-300 rounded-t-sm"
|
||
style={{ height: `${(total / max) * 100}%`, minHeight: total > 0 ? 3 : 0 }}
|
||
/>
|
||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block bg-foreground text-background text-[10px] rounded px-1.5 py-1 whitespace-nowrap z-10 shadow-md pointer-events-none">
|
||
{t.date.slice(5)}: {t.topicCreated} 帖 / {t.replySent} 回复
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|