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:
@@ -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 || '-'}
|
||||||
|
|||||||
Reference in New Issue
Block a user