feat(ui): use icons with tooltips for material results

- Replace text badges with icons for cleaner UI
- Map database values: 'success'→deleted, 'skipped', 'uncertain', 'failed_*'→failed
- Add hover tooltip showing status name (Deleted, Skipped, Uncertain, Failed)
- Icons: CheckCircle (green), CircleMinus (gray), AlertTriangle (amber), XCircle (red)
- Add cursor-help to indicate hoverable elements
This commit is contained in:
Misaka_Company
2026-04-14 14:34:32 +08:00
parent 343cb24234
commit cba3c8c4f0

View File

@@ -16,6 +16,8 @@ import {
ChevronRight, ChevronRight,
CheckCircle, CheckCircle,
XCircle, XCircle,
CircleMinus,
AlertTriangle,
Clock, Clock,
Copy, Copy,
FlaskConical FlaskConical
@@ -566,29 +568,51 @@ const BatchItem = React.memo(({ batch, isAdmin, onDelete }: BatchItemProps) => {
{mat.rowNumber} {mat.rowNumber}
</td> </td>
<td className="px-3 py-1.5"> <td className="px-3 py-1.5">
<span {mat.result === 'success' || mat.result === 'deleted' ? (
className={`px-1.5 py-0.5 rounded text-xs font-medium ${ <span
mat.result === 'deleted' className="inline-block cursor-help"
? 'bg-green-100 text-green-700' title="Deleted"
: mat.result === 'skipped' >
? 'bg-gray-100 text-gray-700' <CheckCircle
: mat.result === 'failed' size={16}
? 'bg-red-100 text-red-700' className="text-green-600 flex-shrink-0"
: mat.result === 'uncertain' aria-label="Deleted"
? 'bg-amber-100 text-amber-700' />
: 'bg-gray-100 text-gray-700' </span>
}`} ) : mat.result === 'skipped' ? (
> <span
{mat.result === 'deleted' className="inline-block cursor-help"
? '已删除' title="Skipped"
: mat.result === 'skipped' >
? '已跳过' <CircleMinus
: mat.result === 'failed' size={16}
? '失败' className="text-gray-400 flex-shrink-0"
: mat.result === 'uncertain' aria-label="Skipped"
? '不确定' />
: mat.result} </span>
</span> ) : mat.result === 'uncertain' ? (
<span
className="inline-block cursor-help"
title="Uncertain"
>
<AlertTriangle
size={16}
className="text-amber-600 flex-shrink-0"
aria-label="Uncertain"
/>
</span>
) : mat.result?.startsWith('failed') ? (
<span
className="inline-block cursor-help"
title="Failed"
>
<XCircle
size={16}
className="text-red-600 flex-shrink-0"
aria-label="Failed"
/>
</span>
) : null}
</td> </td>
<td className="px-3 py-1.5 text-gray-600 max-w-xs truncate"> <td className="px-3 py-1.5 text-gray-600 max-w-xs truncate">
{mat.reason || '-'} {mat.reason || '-'}