494 lines
21 KiB
TypeScript
494 lines
21 KiB
TypeScript
import { useEffect, useState, type ReactNode } from 'react';
|
|
import { AlertTriangle, CheckCircle2, Copy, FileBox, RefreshCw, Search, ShieldAlert, XCircle } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import { AdminSelect } from '@/src/components/admin/AdminSelect';
|
|
import { cn } from '@/src/lib/utils';
|
|
import { formatBytes, formatDateTime } from '@/src/lib/format';
|
|
import {
|
|
getAdminFileBlobs,
|
|
type AdminFileBlobEntityType,
|
|
type AdminFileBlobResponse,
|
|
} from '@/src/lib/admin-fileblobs';
|
|
|
|
const container = {
|
|
hidden: { opacity: 0 },
|
|
show: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { y: 12, opacity: 0 },
|
|
show: { y: 0, opacity: 1 },
|
|
};
|
|
|
|
const DEFAULT_FILTERS = {
|
|
userQuery: '',
|
|
storagePolicyId: '',
|
|
objectKey: '',
|
|
entityType: '' as AdminFileBlobEntityType | '',
|
|
};
|
|
|
|
const ENTITY_TYPE_LABELS: Record<AdminFileBlobEntityType, string> = {
|
|
VERSION: '版本',
|
|
THUMBNAIL: '缩略图',
|
|
LIVE_PHOTO: '实况照片',
|
|
TRANSCODE: '转码产物',
|
|
AVATAR: '头像',
|
|
};
|
|
|
|
function statusPill(active: boolean, trueLabel: string, falseLabel: string, tone: 'red' | 'amber' | 'purple' = 'red') {
|
|
const toneClass =
|
|
tone === 'amber'
|
|
? active
|
|
? 'border-amber-500/20 bg-amber-500/10 text-amber-600 dark:text-amber-400'
|
|
: 'border-white/10 bg-white/5 text-gray-500 dark:text-gray-300'
|
|
: tone === 'purple'
|
|
? active
|
|
? 'border-purple-500/20 bg-purple-500/10 text-purple-600 dark:text-purple-400'
|
|
: 'border-white/10 bg-white/5 text-gray-500 dark:text-gray-300'
|
|
: active
|
|
? 'border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400'
|
|
: 'border-white/10 bg-white/5 text-gray-500 dark:text-gray-300';
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[9px] font-black uppercase tracking-[0.18em]',
|
|
toneClass,
|
|
)}
|
|
>
|
|
{active ? <CheckCircle2 className="h-3.5 w-3.5" /> : <XCircle className="h-3.5 w-3.5" />}
|
|
{active ? trueLabel : falseLabel}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function titleBlock(title: string, subtitle: string) {
|
|
return (
|
|
<div className="mb-6">
|
|
<h2 className="text-[10px] font-black uppercase tracking-[0.3em] opacity-30">{title}</h2>
|
|
<p className="mt-2 text-[9px] font-black uppercase tracking-[0.22em] opacity-25">{subtitle}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function metricCard({
|
|
label,
|
|
value,
|
|
icon,
|
|
tone,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
icon: ReactNode;
|
|
tone: 'blue' | 'green' | 'amber' | 'red' | 'purple';
|
|
}) {
|
|
return (
|
|
<div className="glass-panel-no-hover rounded-lg border border-white/10 p-6 shadow-2xl transition-all group hover:border-white/20">
|
|
<div
|
|
className={cn(
|
|
'mb-5 flex h-12 w-12 items-center justify-center rounded-lg border shadow-[0_0_15px_rgba(59,130,246,0.08)]',
|
|
tone === 'blue' && 'bg-blue-500/10 border-blue-500/20 text-blue-500',
|
|
tone === 'green' && 'bg-green-500/10 border-green-500/20 text-green-500',
|
|
tone === 'purple' && 'bg-purple-500/10 border-purple-500/20 text-purple-500',
|
|
tone === 'amber' && 'bg-amber-500/10 border-amber-500/20 text-amber-500',
|
|
tone === 'red' && 'bg-red-500/10 border-red-500/20 text-red-500',
|
|
)}
|
|
>
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-3xl font-black tracking-tight">{value}</h3>
|
|
<p className="mt-2 text-[10px] font-black uppercase tracking-[0.2em] opacity-40">{label}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function riskRow(label: string, active: boolean, tone: 'red' | 'amber' | 'purple') {
|
|
return statusPill(active, label, `无${label}`, tone);
|
|
}
|
|
|
|
export default function AdminFileBlobs() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [notice, setNotice] = useState('');
|
|
const [filters, setFilters] = useState(DEFAULT_FILTERS);
|
|
const [page, setPage] = useState<{
|
|
items: AdminFileBlobResponse[];
|
|
total: number;
|
|
page: number;
|
|
size: number;
|
|
} | null>(null);
|
|
|
|
async function loadFileBlobs(nextFilters = filters, isRefresh = false) {
|
|
const trimmedStoragePolicyId = nextFilters.storagePolicyId.trim();
|
|
if (trimmedStoragePolicyId) {
|
|
const parsedStoragePolicyId = Number(trimmedStoragePolicyId);
|
|
if (!Number.isInteger(parsedStoragePolicyId) || parsedStoragePolicyId <= 0) {
|
|
setError('存储策略 ID 必须是正整数');
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (isRefresh) {
|
|
setRefreshing(true);
|
|
} else {
|
|
setLoading(true);
|
|
}
|
|
setError('');
|
|
|
|
try {
|
|
const result = await getAdminFileBlobs(0, 100, {
|
|
userQuery: nextFilters.userQuery,
|
|
storagePolicyId: trimmedStoragePolicyId ? Number(trimmedStoragePolicyId) : null,
|
|
objectKey: nextFilters.objectKey,
|
|
entityType: nextFilters.entityType,
|
|
});
|
|
setPage(result);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : '加载对象实体失败');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
void loadFileBlobs();
|
|
}, []);
|
|
|
|
async function copyText(value: string) {
|
|
if (!value) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
setNotice('对象键已复制');
|
|
setError('');
|
|
} catch {
|
|
setError('复制失败，请手动复制。');
|
|
setNotice('');
|
|
}
|
|
}
|
|
|
|
const items = page?.items ?? [];
|
|
const blobMissingCount = items.filter((item) => item.blobMissing).length;
|
|
const orphanRiskCount = items.filter((item) => item.orphanRisk).length;
|
|
const referenceMismatchCount = items.filter((item) => item.referenceMismatch).length;
|
|
const anyRiskCount = items.filter((item) => item.blobMissing || item.orphanRisk || item.referenceMismatch).length;
|
|
const activeFilterLabels = [
|
|
filters.userQuery.trim() ? `用户: ${filters.userQuery.trim()}` : '',
|
|
filters.storagePolicyId.trim() ? `策略: #${filters.storagePolicyId.trim()}` : '',
|
|
filters.objectKey.trim() ? `对象键: ${filters.objectKey.trim()}` : '',
|
|
filters.entityType ? `实体类型: ${ENTITY_TYPE_LABELS[filters.entityType]}` : '',
|
|
].filter(Boolean);
|
|
const isInitialLoading = loading && !page;
|
|
const pageLabel = page ? `第 ${page.page + 1} 页 / 每页 ${page.size}` : '-';
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="flex h-full flex-col overflow-y-auto p-8 text-gray-900 dark:text-gray-100"
|
|
>
|
|
<div className="mb-10 flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h1 className="animate-text-reveal text-4xl font-black tracking-tight text-gray-900 dark:text-white">对象实体</h1>
|
|
<p className="mt-3 text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
|
|
`GET /api/admin/file-blobs` / 用户检索 / 策略过滤 / 风险巡检
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
void loadFileBlobs(filters, true);
|
|
}}
|
|
disabled={loading || refreshing}
|
|
className="flex items-center gap-3 rounded-lg glass-panel px-6 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:bg-white/40 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<RefreshCw className={cn('h-4 w-4', refreshing && 'animate-spin')} />
|
|
刷新列表
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{notice ? (
|
|
<div className="mb-8 rounded-lg border border-blue-500/20 bg-blue-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-300">
|
|
{notice}
|
|
</div>
|
|
) : null}
|
|
|
|
<motion.section variants={container} initial="hidden" animate="show" className="mb-10 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
|
|
<motion.div variants={itemVariants}>
|
|
{metricCard({
|
|
label: '当前页对象数',
|
|
value: page ? `${items.length}` : '-',
|
|
icon: <FileBox className="h-6 w-6" />,
|
|
tone: 'blue',
|
|
})}
|
|
</motion.div>
|
|
<motion.div variants={itemVariants}>
|
|
{metricCard({
|
|
label: 'blobMissing',
|
|
value: `${blobMissingCount}`,
|
|
icon: <XCircle className="h-6 w-6" />,
|
|
tone: 'red',
|
|
})}
|
|
</motion.div>
|
|
<motion.div variants={itemVariants}>
|
|
{metricCard({
|
|
label: 'orphanRisk',
|
|
value: `${orphanRiskCount}`,
|
|
icon: <AlertTriangle className="h-6 w-6" />,
|
|
tone: 'amber',
|
|
})}
|
|
</motion.div>
|
|
<motion.div variants={itemVariants}>
|
|
{metricCard({
|
|
label: 'referenceMismatch',
|
|
value: `${referenceMismatchCount}`,
|
|
icon: <ShieldAlert className="h-6 w-6" />,
|
|
tone: 'purple',
|
|
})}
|
|
</motion.div>
|
|
</motion.section>
|
|
|
|
<form
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
void loadFileBlobs(filters);
|
|
}}
|
|
className="mb-8 glass-panel-no-hover rounded-lg border border-white/10 p-6 shadow-3xl"
|
|
>
|
|
{titleBlock('筛选器', '只保留服务端支持的查询参数，避免前端做额外猜测')}
|
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-[1.2fr_0.8fr_1fr_0.8fr]">
|
|
<label className="group relative block">
|
|
<Search className="pointer-events-none absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 opacity-30 transition-colors group-focus-within:text-blue-500" />
|
|
<input
|
|
value={filters.userQuery}
|
|
onChange={(event) => setFilters((current) => ({ ...current, userQuery: event.target.value }))}
|
|
placeholder="搜索用户名 / 邮箱 / 手机号"
|
|
className="w-full rounded-lg border border-white/10 bg-white/10 py-4 pl-14 pr-5 outline-none transition-all font-black text-[11px] uppercase tracking-widest placeholder:opacity-20 focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
|
|
/>
|
|
</label>
|
|
<label className="group relative block">
|
|
<input
|
|
value={filters.storagePolicyId}
|
|
onChange={(event) => setFilters((current) => ({ ...current, storagePolicyId: event.target.value }))}
|
|
inputMode="numeric"
|
|
placeholder="存储策略 ID"
|
|
className="w-full rounded-lg border border-white/10 bg-white/10 px-5 py-4 outline-none transition-all font-black text-[11px] uppercase tracking-widest placeholder:opacity-20 focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
|
|
/>
|
|
</label>
|
|
<label className="group relative block">
|
|
<input
|
|
value={filters.objectKey}
|
|
onChange={(event) => setFilters((current) => ({ ...current, objectKey: event.target.value }))}
|
|
placeholder="对象键"
|
|
className="w-full rounded-lg border border-white/10 bg-white/10 px-5 py-4 outline-none transition-all font-black text-[11px] uppercase tracking-widest placeholder:opacity-20 focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
|
|
/>
|
|
</label>
|
|
<label className="group relative block">
|
|
<AdminSelect
|
|
value={filters.entityType}
|
|
onChange={(event) =>
|
|
setFilters((current) => ({
|
|
...current,
|
|
entityType: event.target.value as AdminFileBlobEntityType | '',
|
|
}))
|
|
}
|
|
className="w-full font-black text-[11px] uppercase tracking-widest"
|
|
>
|
|
<option value="">全部实体类型</option>
|
|
{Object.entries(ENTITY_TYPE_LABELS).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</AdminSelect>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap gap-2">
|
|
{activeFilterLabels.length ? (
|
|
activeFilterLabels.map((label) => (
|
|
<span
|
|
key={label}
|
|
className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[9px] font-black uppercase tracking-[0.2em] opacity-70"
|
|
>
|
|
{label}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className="text-[9px] font-black uppercase tracking-[0.22em] opacity-25">当前没有启用筛选条件</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFilters(DEFAULT_FILTERS);
|
|
void loadFileBlobs(DEFAULT_FILTERS);
|
|
}}
|
|
className="rounded-lg border border-white/10 bg-white/5 px-5 py-3 text-[11px] font-black uppercase tracking-widest transition-all hover:bg-white/10"
|
|
>
|
|
重置筛选
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-blue-600 px-5 py-3 text-[11px] font-black uppercase tracking-widest text-white transition-all hover:bg-blue-500"
|
|
>
|
|
应用筛选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{error ? (
|
|
<div className="mb-8 rounded-lg border border-red-500/20 bg-red-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-red-600 dark:text-red-400">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
{page ? (
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-3 text-[9px] font-black uppercase tracking-[0.22em] opacity-30">
|
|
<span>
|
|
共 {page.total} 条记录 / {pageLabel}
|
|
</span>
|
|
<span>风险对象 {anyRiskCount} 条</span>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex-1 min-h-0">
|
|
{isInitialLoading ? (
|
|
<div className="glass-panel-no-hover rounded-lg px-4 py-16 text-center text-[10px] font-black uppercase tracking-widest opacity-40">
|
|
正在加载对象实体快照...
|
|
</div>
|
|
) : page ? (
|
|
<div className="glass-panel-no-hover rounded-lg overflow-hidden shadow-3xl border border-white/10">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-[1600px] divide-y divide-white/10">
|
|
<thead className="bg-white/10 dark:bg-black/40">
|
|
<tr>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">对象键</th>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">实体 / Blob</th>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">存储策略</th>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">大小 / 类型</th>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">关联信息</th>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">风险</th>
|
|
<th className="px-6 py-5 text-left text-[9px] font-black uppercase tracking-[0.2em] opacity-40">时间</th>
|
|
</tr>
|
|
</thead>
|
|
<motion.tbody variants={container} initial="hidden" animate="show" className="divide-y divide-white/10 dark:divide-white/5">
|
|
{items.map((item) => {
|
|
const rowClassName = cn(
|
|
'group transition-colors',
|
|
item.blobMissing && 'bg-red-500/5 hover:bg-red-500/10',
|
|
!item.blobMissing && item.orphanRisk && 'bg-amber-500/5 hover:bg-amber-500/10',
|
|
!item.blobMissing && !item.orphanRisk && item.referenceMismatch && 'bg-purple-500/5 hover:bg-purple-500/10',
|
|
);
|
|
|
|
return (
|
|
<motion.tr key={`${item.entityId}-${item.blobId}`} variants={itemVariants} className={rowClassName}>
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="flex items-start gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="break-all font-mono text-[11px] font-black uppercase tracking-tight group-hover:text-blue-500">
|
|
{item.objectKey}
|
|
</div>
|
|
<div className="mt-1 text-[9px] font-black uppercase tracking-[0.18em] opacity-30">
|
|
创建者 {item.createdByUsername || `#${item.createdByUserId ?? '-'}`}
|
|
</div>
|
|
<div className="mt-1 text-[9px] font-black uppercase tracking-[0.18em] opacity-25">
|
|
样本所有者 {item.sampleOwnerUsername || '-'}
|
|
{item.sampleOwnerEmail ? ` / ${item.sampleOwnerEmail}` : ''}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => void copyText(item.objectKey)}
|
|
className="rounded-lg border border-white/10 bg-white/5 p-2 text-blue-500 opacity-30 transition-all hover:bg-blue-600 hover:text-white group-hover:opacity-100"
|
|
title="复制对象键"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="text-[11px] font-black uppercase tracking-tight">实体 #{item.entityId}</div>
|
|
<div className="mt-1 text-[9px] font-black uppercase tracking-[0.18em] opacity-30">Blob #{item.blobId}</div>
|
|
<div className="mt-2 inline-flex rounded-full border border-blue-500/20 bg-blue-500/10 px-2.5 py-1 text-[9px] font-black uppercase tracking-[0.18em] text-blue-600 dark:text-blue-400">
|
|
{ENTITY_TYPE_LABELS[item.entityType]}
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="text-[11px] font-black uppercase tracking-tight">策略 #{item.storagePolicyId}</div>
|
|
<div className="mt-1 text-[9px] font-black uppercase tracking-[0.18em] opacity-30">
|
|
{item.createdByUserId != null ? `创建者 ID ${item.createdByUserId}` : '创建者 ID -'}
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="text-[11px] font-black uppercase tracking-tight">{formatBytes(item.size)}</div>
|
|
<div className="mt-1 break-words text-[9px] font-black uppercase tracking-[0.18em] opacity-30">
|
|
{item.contentType || '-'}
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="space-y-1 text-[9px] font-black uppercase tracking-[0.18em] opacity-40">
|
|
<div>引用 {item.referenceCount ?? '-'}</div>
|
|
<div>关联文件 {item.linkedStoredFileCount}</div>
|
|
<div>关联所有者 {item.linkedOwnerCount}</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="flex flex-col gap-2">
|
|
{riskRow('blobMissing', item.blobMissing, 'red')}
|
|
{riskRow('orphanRisk', item.orphanRisk, 'amber')}
|
|
{riskRow('referenceMismatch', item.referenceMismatch, 'purple')}
|
|
</div>
|
|
</td>
|
|
|
|
<td className="px-6 py-5 align-top">
|
|
<div className="text-[10px] font-bold uppercase tracking-tighter opacity-30">{formatDateTime(item.createdAt)}</div>
|
|
<div className="mt-1 text-[9px] font-black uppercase tracking-[0.18em] opacity-25">
|
|
Blob {formatDateTime(item.blobCreatedAt)}
|
|
</div>
|
|
</td>
|
|
</motion.tr>
|
|
);
|
|
})}
|
|
|
|
{items.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-8 py-20 text-center text-[10px] font-black uppercase tracking-widest opacity-30">
|
|
没有匹配的对象实体
|
|
</td>
|
|
</tr>
|
|
) : null}
|
|
</motion.tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="glass-panel-no-hover rounded-lg px-4 py-16 text-center text-[10px] font-black uppercase tracking-widest opacity-40">
|
|
暂无对象实体数据
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|