1004 lines
42 KiB
TypeScript
1004 lines
42 KiB
TypeScript
import {
|
||
Ban,
|
||
Bot,
|
||
CheckCheck,
|
||
MessageSquareText,
|
||
RefreshCcw,
|
||
Shield,
|
||
ShieldOff,
|
||
Trash2,
|
||
XCircle,
|
||
} from 'lucide-react'
|
||
import { startTransition, useCallback, useEffect, useMemo, useState } from 'react'
|
||
import { toast } from 'sonner'
|
||
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Select } from '@/components/ui/select'
|
||
import { Skeleton } from '@/components/ui/skeleton'
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from '@/components/ui/table'
|
||
import { adminApi, ApiError } from '@/lib/api'
|
||
import { formatBrowserName, formatCommentScope, formatDateTime } from '@/lib/admin-format'
|
||
import type {
|
||
CommentBlacklistRecord,
|
||
CommentPersonaAnalysisLogRecord,
|
||
CommentPersonaAnalysisResponse,
|
||
CommentRecord,
|
||
} from '@/lib/types'
|
||
|
||
type MatcherType = 'ip' | 'email' | 'user_agent'
|
||
|
||
type PersonaItem = {
|
||
matcherValue: string
|
||
total: number
|
||
approved: number
|
||
pending: number
|
||
firstAt: string
|
||
latestAt: string
|
||
latestPostSlug: string
|
||
}
|
||
|
||
function moderationBadgeVariant(approved: boolean | null) {
|
||
if (approved) {
|
||
return 'success' as const
|
||
}
|
||
|
||
return 'warning' as const
|
||
}
|
||
|
||
function normalizeMatcherValue(type: MatcherType, value: string | null | undefined) {
|
||
const normalized = (value ?? '').trim()
|
||
if (!normalized) {
|
||
return ''
|
||
}
|
||
|
||
if (type === 'email') {
|
||
return normalized.toLowerCase()
|
||
}
|
||
|
||
return normalized
|
||
}
|
||
|
||
function extractMatcherValue(comment: CommentRecord, type: MatcherType) {
|
||
if (type === 'ip') {
|
||
return normalizeMatcherValue(type, comment.ip_address)
|
||
}
|
||
if (type === 'email') {
|
||
return normalizeMatcherValue(type, comment.email)
|
||
}
|
||
return normalizeMatcherValue(type, comment.user_agent)
|
||
}
|
||
|
||
function matcherLabel(type: MatcherType) {
|
||
if (type === 'ip') return 'IP'
|
||
if (type === 'email') return '邮箱'
|
||
return '浏览器 UA'
|
||
}
|
||
|
||
function toPersonaAnalysisFromLog(
|
||
item: CommentPersonaAnalysisLogRecord,
|
||
): CommentPersonaAnalysisResponse {
|
||
return {
|
||
matcher_type: item.matcher_type,
|
||
matcher_value: item.matcher_value,
|
||
total_comments: item.total_comments,
|
||
pending_comments: item.pending_comments,
|
||
first_seen_at: item.from_at,
|
||
latest_seen_at: item.to_at,
|
||
distinct_posts: item.distinct_posts,
|
||
analysis: item.analysis,
|
||
samples: item.samples,
|
||
}
|
||
}
|
||
|
||
export function CommentsPage() {
|
||
const [comments, setComments] = useState<CommentRecord[]>([])
|
||
const [blacklist, setBlacklist] = useState<CommentBlacklistRecord[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [refreshing, setRefreshing] = useState(false)
|
||
const [actingId, setActingId] = useState<number | null>(null)
|
||
const [actingBlacklistId, setActingBlacklistId] = useState<number | null>(null)
|
||
const [banLoadingKey, setBanLoadingKey] = useState<string | null>(null)
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [approvalFilter, setApprovalFilter] = useState('pending')
|
||
const [scopeFilter, setScopeFilter] = useState('all')
|
||
const [profileType, setProfileType] = useState<MatcherType>('ip')
|
||
const [selectedProfileValue, setSelectedProfileValue] = useState('')
|
||
const [manualMatcherType, setManualMatcherType] = useState<MatcherType>('ip')
|
||
const [manualMatcherValue, setManualMatcherValue] = useState('')
|
||
const [manualReason, setManualReason] = useState('')
|
||
const [analyzingPersona, setAnalyzingPersona] = useState(false)
|
||
const [personaAnalysis, setPersonaAnalysis] =
|
||
useState<CommentPersonaAnalysisResponse | null>(null)
|
||
const [personaLogs, setPersonaLogs] = useState<CommentPersonaAnalysisLogRecord[]>([])
|
||
const [personaLogsLoading, setPersonaLogsLoading] = useState(false)
|
||
|
||
const loadComments = useCallback(async (showToast = false) => {
|
||
try {
|
||
if (showToast) {
|
||
setRefreshing(true)
|
||
}
|
||
|
||
const [nextComments, nextBlacklist] = await Promise.all([
|
||
adminApi.listComments(),
|
||
adminApi.listCommentBlacklist(),
|
||
])
|
||
startTransition(() => {
|
||
setComments(nextComments)
|
||
setBlacklist(nextBlacklist)
|
||
})
|
||
|
||
if (showToast) {
|
||
toast.success('评论列表已刷新。')
|
||
}
|
||
} catch (error) {
|
||
if (error instanceof ApiError && error.status === 401) {
|
||
return
|
||
}
|
||
toast.error(error instanceof ApiError ? error.message : '无法加载评论列表。')
|
||
} finally {
|
||
setLoading(false)
|
||
setRefreshing(false)
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
void loadComments(false)
|
||
}, [loadComments])
|
||
|
||
const filteredComments = useMemo(() => {
|
||
return comments.filter((comment) => {
|
||
const matchesSearch =
|
||
!searchTerm ||
|
||
[
|
||
comment.author ?? '',
|
||
comment.email ?? '',
|
||
comment.post_slug ?? '',
|
||
comment.content ?? '',
|
||
comment.paragraph_excerpt ?? '',
|
||
comment.paragraph_key ?? '',
|
||
comment.ip_address ?? '',
|
||
comment.user_agent ?? '',
|
||
comment.referer ?? '',
|
||
]
|
||
.join('\n')
|
||
.toLowerCase()
|
||
.includes(searchTerm.toLowerCase())
|
||
|
||
const matchesApproval =
|
||
approvalFilter === 'all' ||
|
||
(approvalFilter === 'approved' && Boolean(comment.approved)) ||
|
||
(approvalFilter === 'pending' && !comment.approved)
|
||
|
||
const matchesScope = scopeFilter === 'all' || comment.scope === scopeFilter
|
||
|
||
return matchesSearch && matchesApproval && matchesScope
|
||
})
|
||
}, [approvalFilter, comments, scopeFilter, searchTerm])
|
||
|
||
const blacklistedMatcherSet = useMemo(() => {
|
||
return new Set(
|
||
blacklist
|
||
.filter((item) => item.effective)
|
||
.map(
|
||
(item) =>
|
||
`${item.matcher_type}:${normalizeMatcherValue(
|
||
item.matcher_type as MatcherType,
|
||
item.matcher_value,
|
||
)}`,
|
||
),
|
||
)
|
||
}, [blacklist])
|
||
|
||
const pendingCount = useMemo(
|
||
() => comments.filter((comment) => !comment.approved).length,
|
||
[comments],
|
||
)
|
||
|
||
const paragraphCount = useMemo(
|
||
() => comments.filter((comment) => comment.scope === 'paragraph').length,
|
||
[comments],
|
||
)
|
||
|
||
const personas = useMemo(() => {
|
||
const map = new Map<string, PersonaItem>()
|
||
|
||
filteredComments.forEach((comment) => {
|
||
const matcherValue = extractMatcherValue(comment, profileType)
|
||
if (!matcherValue) {
|
||
return
|
||
}
|
||
|
||
const existing = map.get(matcherValue)
|
||
if (existing) {
|
||
existing.total += 1
|
||
if (comment.approved) {
|
||
existing.approved += 1
|
||
} else {
|
||
existing.pending += 1
|
||
}
|
||
if (comment.created_at < existing.firstAt) {
|
||
existing.firstAt = comment.created_at
|
||
}
|
||
if (comment.created_at > existing.latestAt) {
|
||
existing.latestAt = comment.created_at
|
||
existing.latestPostSlug = comment.post_slug ?? existing.latestPostSlug
|
||
}
|
||
return
|
||
}
|
||
|
||
map.set(matcherValue, {
|
||
matcherValue,
|
||
total: 1,
|
||
approved: comment.approved ? 1 : 0,
|
||
pending: comment.approved ? 0 : 1,
|
||
firstAt: comment.created_at,
|
||
latestAt: comment.created_at,
|
||
latestPostSlug: comment.post_slug ?? 'unknown-post',
|
||
})
|
||
})
|
||
|
||
return Array.from(map.values()).sort((left, right) => {
|
||
if (right.total !== left.total) {
|
||
return right.total - left.total
|
||
}
|
||
return right.latestAt.localeCompare(left.latestAt)
|
||
})
|
||
}, [filteredComments, profileType])
|
||
|
||
useEffect(() => {
|
||
if (!personas.length) {
|
||
setSelectedProfileValue('')
|
||
return
|
||
}
|
||
|
||
if (!personas.some((item) => item.matcherValue === selectedProfileValue)) {
|
||
setSelectedProfileValue(personas[0].matcherValue)
|
||
}
|
||
}, [personas, selectedProfileValue])
|
||
|
||
const selectedPersona = useMemo(
|
||
() => personas.find((item) => item.matcherValue === selectedProfileValue) ?? null,
|
||
[personas, selectedProfileValue],
|
||
)
|
||
|
||
const selectedPersonaComments = useMemo(() => {
|
||
if (!selectedProfileValue) {
|
||
return []
|
||
}
|
||
|
||
return filteredComments
|
||
.filter(
|
||
(comment) =>
|
||
extractMatcherValue(comment, profileType) ===
|
||
normalizeMatcherValue(profileType, selectedProfileValue),
|
||
)
|
||
.sort((left, right) => right.created_at.localeCompare(left.created_at))
|
||
}, [filteredComments, profileType, selectedProfileValue])
|
||
|
||
useEffect(() => {
|
||
setPersonaAnalysis(null)
|
||
}, [profileType, selectedProfileValue])
|
||
|
||
const loadPersonaLogs = useCallback(
|
||
async (type: MatcherType, matcherValue?: string) => {
|
||
try {
|
||
setPersonaLogsLoading(true)
|
||
const items = await adminApi.listCommentPersonaAnalysisLogs({
|
||
matcher_type: type,
|
||
matcher_value: matcherValue,
|
||
limit: 20,
|
||
})
|
||
|
||
startTransition(() => {
|
||
setPersonaLogs(items)
|
||
})
|
||
} catch (error) {
|
||
if (error instanceof ApiError && error.status === 401) {
|
||
return
|
||
}
|
||
|
||
toast.error(error instanceof ApiError ? error.message : '加载分析历史失败。')
|
||
} finally {
|
||
setPersonaLogsLoading(false)
|
||
}
|
||
},
|
||
[],
|
||
)
|
||
|
||
useEffect(() => {
|
||
void loadPersonaLogs(profileType, selectedProfileValue || undefined)
|
||
}, [loadPersonaLogs, profileType, selectedProfileValue])
|
||
|
||
const createBlacklist = useCallback(
|
||
async (type: MatcherType, matcherValue: string, reason?: string) => {
|
||
const normalizedValue = normalizeMatcherValue(type, matcherValue)
|
||
if (!normalizedValue) {
|
||
return
|
||
}
|
||
|
||
const key = `${type}:${normalizedValue}`
|
||
if (blacklistedMatcherSet.has(key)) {
|
||
toast.info('该规则已在黑名单中。')
|
||
return
|
||
}
|
||
|
||
try {
|
||
setBanLoadingKey(key)
|
||
await adminApi.createCommentBlacklist({
|
||
matcher_type: type,
|
||
matcher_value: normalizedValue,
|
||
reason: reason || '后台快速封禁',
|
||
active: true,
|
||
})
|
||
toast.success(`已加入黑名单：${matcherLabel(type)} ${normalizedValue}`)
|
||
await loadComments(false)
|
||
} catch (error) {
|
||
toast.error(error instanceof ApiError ? error.message : '创建黑名单失败。')
|
||
} finally {
|
||
setBanLoadingKey(null)
|
||
}
|
||
},
|
||
[blacklistedMatcherSet, loadComments],
|
||
)
|
||
|
||
const analyzeSelectedPersona = useCallback(async () => {
|
||
if (!selectedProfileValue) {
|
||
toast.error('请先选择一个画像来源。')
|
||
return
|
||
}
|
||
|
||
try {
|
||
setAnalyzingPersona(true)
|
||
const result = await adminApi.analyzeCommentPersona({
|
||
matcher_type: profileType,
|
||
matcher_value: selectedProfileValue,
|
||
limit: 24,
|
||
})
|
||
startTransition(() => {
|
||
setPersonaAnalysis(result)
|
||
})
|
||
await loadPersonaLogs(profileType, selectedProfileValue)
|
||
toast.success('AI 画像分析完成。')
|
||
} catch (error) {
|
||
toast.error(error instanceof ApiError ? error.message : 'AI 画像分析失败。')
|
||
} finally {
|
||
setAnalyzingPersona(false)
|
||
}
|
||
}, [loadPersonaLogs, profileType, selectedProfileValue])
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
||
<div className="space-y-3">
|
||
<Badge variant="secondary">评论</Badge>
|
||
<div>
|
||
<h2 className="text-3xl font-semibold tracking-tight">评论审核队列</h2>
|
||
<p className="mt-2 max-w-3xl text-sm leading-7 text-muted-foreground">
|
||
在一个页面中处理全文评论与段落评论，快速完成公开讨论区的审核工作。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Button variant="secondary" onClick={() => void loadComments(true)} disabled={refreshing}>
|
||
<RefreshCcw className="h-4 w-4" />
|
||
{refreshing ? '刷新中...' : '刷新'}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-3">
|
||
<Card className="bg-gradient-to-br from-card via-card to-background/70">
|
||
<CardContent className="pt-6">
|
||
<p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">待审核</p>
|
||
<div className="mt-3 text-3xl font-semibold">{pendingCount}</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">需要人工审核处理。</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="bg-gradient-to-br from-card via-card to-background/70">
|
||
<CardContent className="pt-6">
|
||
<p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
||
段落评论
|
||
</p>
|
||
<div className="mt-3 text-3xl font-semibold">{paragraphCount}</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">挂载到具体段落锚点。</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="bg-gradient-to-br from-card via-card to-background/70">
|
||
<CardContent className="pt-6">
|
||
<p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">总数</p>
|
||
<div className="mt-3 text-3xl font-semibold">{comments.length}</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">当前系统中全部评论。</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>评论列表</CardTitle>
|
||
<CardDescription>
|
||
先筛选，再直接通过、隐藏、删除，或快速把来源加入黑名单。
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid gap-3 lg:grid-cols-[1.2fr_0.6fr_0.6fr]">
|
||
<Input
|
||
placeholder="按作者、邮箱、IP、浏览器、文章 slug 或评论内容搜索"
|
||
value={searchTerm}
|
||
onChange={(event) => setSearchTerm(event.target.value)}
|
||
/>
|
||
<Select
|
||
value={approvalFilter}
|
||
onChange={(event) => setApprovalFilter(event.target.value)}
|
||
>
|
||
<option value="all">全部状态</option>
|
||
<option value="pending">仅看待审核</option>
|
||
<option value="approved">仅看已通过</option>
|
||
</Select>
|
||
<Select value={scopeFilter} onChange={(event) => setScopeFilter(event.target.value)}>
|
||
<option value="all">全部范围</option>
|
||
<option value="article">全文</option>
|
||
<option value="paragraph">段落</option>
|
||
</Select>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<Skeleton className="h-[680px] rounded-3xl" />
|
||
) : (
|
||
<div className="grid gap-4 2xl:grid-cols-[1.35fr_1fr]">
|
||
<div className="overflow-auto rounded-2xl border border-border/70">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>评论内容</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>上下文</TableHead>
|
||
<TableHead>操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{filteredComments.map((comment) => (
|
||
<TableRow key={comment.id}>
|
||
<TableCell>
|
||
<div className="space-y-2">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="font-medium">{comment.author ?? '匿名用户'}</span>
|
||
<Badge variant="outline">{formatCommentScope(comment.scope)}</Badge>
|
||
<span className="text-xs text-muted-foreground">
|
||
{formatDateTime(comment.created_at)}
|
||
</span>
|
||
</div>
|
||
<p className="text-sm leading-6 text-muted-foreground">
|
||
{comment.content ?? '暂无评论内容。'}
|
||
</p>
|
||
{comment.scope === 'paragraph' ? (
|
||
<div className="rounded-2xl border border-border/70 bg-background/60 px-3 py-2 text-xs text-muted-foreground">
|
||
<p className="font-mono">{comment.paragraph_key ?? '缺少段落键'}</p>
|
||
<p className="mt-1">
|
||
{comment.paragraph_excerpt ?? '没有保存段落摘录。'}
|
||
</p>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Badge variant={moderationBadgeVariant(comment.approved)}>
|
||
{comment.approved ? '已通过' : '待审核'}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className="space-y-1 text-sm text-muted-foreground">
|
||
<p className="font-mono text-xs">{comment.post_slug ?? '未知文章'}</p>
|
||
<p className="font-mono text-xs">
|
||
{comment.ip_address ? `IP ${comment.ip_address}` : 'IP 未记录'}
|
||
</p>
|
||
<p
|
||
className="max-w-[280px] truncate"
|
||
title={comment.user_agent ?? undefined}
|
||
>
|
||
浏览器：{formatBrowserName(comment.user_agent)}
|
||
</p>
|
||
{comment.referer ? (
|
||
<p className="max-w-[280px] truncate" title={comment.referer}>
|
||
来源：{comment.referer}
|
||
</p>
|
||
) : null}
|
||
{comment.email ? <p>邮箱：{comment.email}</p> : null}
|
||
<div className="flex flex-wrap gap-2 pt-1">
|
||
{comment.ip_address ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={
|
||
banLoadingKey ===
|
||
`ip:${normalizeMatcherValue('ip', comment.ip_address)}`
|
||
}
|
||
onClick={() =>
|
||
void createBlacklist(
|
||
'ip',
|
||
comment.ip_address ?? '',
|
||
`评论#${comment.id} 快速封禁`,
|
||
)
|
||
}
|
||
>
|
||
<Ban className="h-3.5 w-3.5" />
|
||
封 IP
|
||
</Button>
|
||
) : null}
|
||
{comment.email ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={
|
||
banLoadingKey ===
|
||
`email:${normalizeMatcherValue('email', comment.email)}`
|
||
}
|
||
onClick={() =>
|
||
void createBlacklist(
|
||
'email',
|
||
comment.email ?? '',
|
||
`评论#${comment.id} 快速封禁`,
|
||
)
|
||
}
|
||
>
|
||
<Ban className="h-3.5 w-3.5" />
|
||
封邮箱
|
||
</Button>
|
||
) : null}
|
||
{comment.user_agent ? (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={
|
||
banLoadingKey ===
|
||
`user_agent:${normalizeMatcherValue(
|
||
'user_agent',
|
||
comment.user_agent,
|
||
)}`
|
||
}
|
||
onClick={() =>
|
||
void createBlacklist(
|
||
'user_agent',
|
||
comment.user_agent ?? '',
|
||
`评论#${comment.id} 快速封禁`,
|
||
)
|
||
}
|
||
>
|
||
<Ban className="h-3.5 w-3.5" />
|
||
封 UA
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={actingId === comment.id || Boolean(comment.approved)}
|
||
onClick={async () => {
|
||
try {
|
||
setActingId(comment.id)
|
||
await adminApi.updateComment(comment.id, { approved: true })
|
||
toast.success('评论已通过。')
|
||
await loadComments(false)
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError ? error.message : '无法通过该评论。',
|
||
)
|
||
} finally {
|
||
setActingId(null)
|
||
}
|
||
}}
|
||
>
|
||
<CheckCheck className="h-4 w-4" />
|
||
通过
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
disabled={actingId === comment.id || !comment.approved}
|
||
onClick={async () => {
|
||
try {
|
||
setActingId(comment.id)
|
||
await adminApi.updateComment(comment.id, { approved: false })
|
||
toast.success('评论已移回待审核。')
|
||
await loadComments(false)
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError ? error.message : '无法更新评论状态。',
|
||
)
|
||
} finally {
|
||
setActingId(null)
|
||
}
|
||
}}
|
||
>
|
||
<XCircle className="h-4 w-4" />
|
||
隐藏
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="danger"
|
||
disabled={actingId === comment.id}
|
||
onClick={async () => {
|
||
if (!window.confirm('确定要永久删除这条评论吗？')) {
|
||
return
|
||
}
|
||
|
||
try {
|
||
setActingId(comment.id)
|
||
await adminApi.deleteComment(comment.id)
|
||
toast.success('评论已删除。')
|
||
await loadComments(false)
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError ? error.message : '无法删除评论。',
|
||
)
|
||
} finally {
|
||
setActingId(null)
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
{!filteredComments.length ? (
|
||
<TableRow>
|
||
<TableCell colSpan={4} className="py-12 text-center">
|
||
<div className="flex flex-col items-center gap-3 text-muted-foreground">
|
||
<MessageSquareText className="h-8 w-8" />
|
||
<p>当前筛选条件下没有匹配的评论。</p>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : null}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>人物画像视图</CardTitle>
|
||
<CardDescription>按 IP / 邮箱 / UA 聚合，并查看同源评论轨迹。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
<Select
|
||
value={profileType}
|
||
onChange={(event) => setProfileType(event.target.value as MatcherType)}
|
||
>
|
||
<option value="ip">按 IP 聚合</option>
|
||
<option value="email">按邮箱聚合</option>
|
||
<option value="user_agent">按浏览器 UA 聚合</option>
|
||
</Select>
|
||
|
||
<div className="max-h-[230px] space-y-2 overflow-auto pr-1">
|
||
{personas.map((persona) => {
|
||
const key = `${profileType}:${normalizeMatcherValue(
|
||
profileType,
|
||
persona.matcherValue,
|
||
)}`
|
||
const blacklisted = blacklistedMatcherSet.has(key)
|
||
|
||
return (
|
||
<button
|
||
key={persona.matcherValue}
|
||
type="button"
|
||
className={`w-full rounded-2xl border px-3 py-2 text-left transition ${
|
||
selectedProfileValue === persona.matcherValue
|
||
? 'border-primary/50 bg-primary/10'
|
||
: 'border-border/70 bg-background/40 hover:border-primary/30'
|
||
}`}
|
||
onClick={() => setSelectedProfileValue(persona.matcherValue)}
|
||
>
|
||
<div className="flex items-start justify-between gap-2">
|
||
<p
|
||
className="line-clamp-2 break-all text-xs font-mono text-foreground"
|
||
title={persona.matcherValue}
|
||
>
|
||
{profileType === 'user_agent'
|
||
? formatBrowserName(persona.matcherValue)
|
||
: persona.matcherValue}
|
||
</p>
|
||
{blacklisted ? <Badge variant="danger">黑名单</Badge> : null}
|
||
</div>
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
{persona.total} 条 · 待审核 {persona.pending} · 已通过{' '}
|
||
{persona.approved}
|
||
</p>
|
||
</button>
|
||
)
|
||
})}
|
||
{!personas.length ? (
|
||
<p className="rounded-2xl border border-border/70 px-3 py-6 text-center text-sm text-muted-foreground">
|
||
当前筛选条件下暂无可聚合来源。
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
|
||
{selectedPersona ? (
|
||
<div className="rounded-2xl border border-border/70 bg-background/40 p-3 text-xs text-muted-foreground">
|
||
<p>首次出现：{formatDateTime(selectedPersona.firstAt)}</p>
|
||
<p>最近评论：{formatDateTime(selectedPersona.latestAt)}</p>
|
||
<p className="font-mono">最近文章：{selectedPersona.latestPostSlug}</p>
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="flex gap-2">
|
||
<Input
|
||
value={manualReason}
|
||
onChange={(event) => setManualReason(event.target.value)}
|
||
placeholder="封禁原因（可选）"
|
||
/>
|
||
<Button
|
||
variant="danger"
|
||
disabled={!selectedProfileValue}
|
||
onClick={() =>
|
||
void createBlacklist(profileType, selectedProfileValue, manualReason)
|
||
}
|
||
>
|
||
<Shield className="h-4 w-4" />
|
||
快速封禁
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-2 rounded-2xl border border-border/70 bg-background/40 p-3">
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
||
AI 风险分析
|
||
</p>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={!selectedProfileValue || analyzingPersona}
|
||
onClick={() => void analyzeSelectedPersona()}
|
||
>
|
||
<Bot className="h-4 w-4" />
|
||
{analyzingPersona ? '分析中...' : 'AI 分析'}
|
||
</Button>
|
||
</div>
|
||
{personaAnalysis ? (
|
||
<div className="space-y-2">
|
||
<p className="text-xs text-muted-foreground">
|
||
匹配评论 {personaAnalysis.total_comments} · 待审核{' '}
|
||
{personaAnalysis.pending_comments} · 涉及文章{' '}
|
||
{personaAnalysis.distinct_posts}
|
||
</p>
|
||
<pre className="max-h-[220px] whitespace-pre-wrap break-words rounded-xl border border-border/70 bg-background px-3 py-2 text-xs leading-6 text-foreground">
|
||
{personaAnalysis.analysis}
|
||
</pre>
|
||
</div>
|
||
) : (
|
||
<p className="text-xs text-muted-foreground">
|
||
选中来源后可让 AI 输出风险等级、行为特征和处置建议。
|
||
</p>
|
||
)}
|
||
|
||
<div className="space-y-2 rounded-xl border border-border/70 bg-background/60 p-2.5">
|
||
<p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
|
||
最近分析记录
|
||
</p>
|
||
{personaLogsLoading ? (
|
||
<Skeleton className="h-16 rounded-xl" />
|
||
) : personaLogs.length ? (
|
||
<div className="max-h-[220px] space-y-2 overflow-auto pr-1">
|
||
{personaLogs.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className="w-full rounded-xl border border-border/70 bg-background px-3 py-2 text-left transition hover:border-primary/40"
|
||
onClick={() =>
|
||
startTransition(() => {
|
||
setPersonaAnalysis(toPersonaAnalysisFromLog(item))
|
||
})
|
||
}
|
||
>
|
||
<p className="text-xs text-muted-foreground">
|
||
#{item.id} · {formatDateTime(item.created_at)} · 评论 {item.total_comments}{' '}
|
||
· 待审 {item.pending_comments}
|
||
</p>
|
||
<p className="line-clamp-2 mt-1 text-xs text-foreground">
|
||
{item.analysis}
|
||
</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-xs text-muted-foreground">暂无历史分析记录。</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>同源评论轨迹</CardTitle>
|
||
<CardDescription>
|
||
当前按 {matcherLabel(profileType)} 查看，共 {selectedPersonaComments.length}{' '}
|
||
条。
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="max-h-[260px] space-y-2 overflow-auto pr-1">
|
||
{selectedPersonaComments.map((comment) => (
|
||
<div key={comment.id} className="rounded-2xl border border-border/70 p-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant={comment.approved ? 'success' : 'warning'}>
|
||
{comment.approved ? '通过' : '待审'}
|
||
</Badge>
|
||
<span className="text-xs text-muted-foreground">
|
||
{formatDateTime(comment.created_at)}
|
||
</span>
|
||
<span className="text-xs font-mono text-muted-foreground">
|
||
{comment.post_slug ?? 'unknown-post'}
|
||
</span>
|
||
</div>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
{comment.content ?? '暂无内容'}
|
||
</p>
|
||
</div>
|
||
))}
|
||
{!selectedPersonaComments.length ? (
|
||
<p className="rounded-2xl border border-border/70 px-3 py-6 text-center text-sm text-muted-foreground">
|
||
请选择来源查看轨迹。
|
||
</p>
|
||
) : null}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>黑名单管理</CardTitle>
|
||
<CardDescription>支持手动新增、停用与删除规则。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
<div className="grid gap-2 md:grid-cols-[150px_1fr]">
|
||
<Select
|
||
value={manualMatcherType}
|
||
onChange={(event) =>
|
||
setManualMatcherType(event.target.value as MatcherType)
|
||
}
|
||
>
|
||
<option value="ip">IP</option>
|
||
<option value="email">邮箱</option>
|
||
<option value="user_agent">浏览器 UA</option>
|
||
</Select>
|
||
<Input
|
||
value={manualMatcherValue}
|
||
onChange={(event) => setManualMatcherValue(event.target.value)}
|
||
placeholder="输入要封禁的值"
|
||
/>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
value={manualReason}
|
||
onChange={(event) => setManualReason(event.target.value)}
|
||
placeholder="原因（可选）"
|
||
/>
|
||
<Button
|
||
onClick={async () => {
|
||
await createBlacklist(
|
||
manualMatcherType,
|
||
manualMatcherValue,
|
||
manualReason || '后台手动封禁',
|
||
)
|
||
setManualMatcherValue('')
|
||
}}
|
||
disabled={!manualMatcherValue.trim()}
|
||
>
|
||
<Shield className="h-4 w-4" />
|
||
新增
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="max-h-[220px] space-y-2 overflow-auto pr-1">
|
||
{blacklist.map((item) => (
|
||
<div
|
||
key={item.id}
|
||
className="rounded-2xl border border-border/70 bg-background/40 p-3"
|
||
>
|
||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||
<p className="text-xs font-mono">
|
||
{item.matcher_type}:{' '}
|
||
{item.matcher_type === 'user_agent'
|
||
? formatBrowserName(item.matcher_value)
|
||
: item.matcher_value}
|
||
</p>
|
||
<Badge variant={item.effective ? 'danger' : 'outline'}>
|
||
{item.effective ? '生效中' : '已停用/过期'}
|
||
</Badge>
|
||
</div>
|
||
{item.reason ? (
|
||
<p className="mt-1 text-xs text-muted-foreground">{item.reason}</p>
|
||
) : null}
|
||
<div className="mt-2 flex flex-wrap gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={actingBlacklistId === item.id}
|
||
onClick={async () => {
|
||
try {
|
||
setActingBlacklistId(item.id)
|
||
await adminApi.updateCommentBlacklist(item.id, {
|
||
active: !item.active,
|
||
})
|
||
toast.success(item.active ? '规则已停用。' : '规则已启用。')
|
||
await loadComments(false)
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError
|
||
? error.message
|
||
: '更新黑名单规则失败。',
|
||
)
|
||
} finally {
|
||
setActingBlacklistId(null)
|
||
}
|
||
}}
|
||
>
|
||
{item.active ? (
|
||
<ShieldOff className="h-4 w-4" />
|
||
) : (
|
||
<Shield className="h-4 w-4" />
|
||
)}
|
||
{item.active ? '停用' : '启用'}
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant="danger"
|
||
disabled={actingBlacklistId === item.id}
|
||
onClick={async () => {
|
||
if (!window.confirm('确定删除这条黑名单规则吗？')) {
|
||
return
|
||
}
|
||
try {
|
||
setActingBlacklistId(item.id)
|
||
await adminApi.deleteCommentBlacklist(item.id)
|
||
toast.success('规则已删除。')
|
||
await loadComments(false)
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError
|
||
? error.message
|
||
: '删除黑名单规则失败。',
|
||
)
|
||
} finally {
|
||
setActingBlacklistId(null)
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{!blacklist.length ? (
|
||
<p className="rounded-2xl border border-border/70 px-3 py-6 text-center text-sm text-muted-foreground">
|
||
暂无黑名单规则。
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|