shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize answer option highlights

Browse Source
This commit is contained in:
ittoview
2026-05-13 19:12:06 +01:00
parent 77183cb340
commit ea2413cb24
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/PerformanceDomainPracticePage.tsx
View File

@@ -339,14 +339,14 @@ export default function PerformanceDomainPracticePage() {
onClick={() => handleSelect(domain.id)}
disabled={optionDisabled}
className={clsx(
'relative flex min-h-[128px] flex-col gap-3 rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
'relative flex h-[128px] flex-col gap-3 overflow-hidden rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
currentKindDone && !isAnswerShown && 'bg-gray-50 opacity-55 dark:bg-gray-800/70',
shouldHighlightCorrect &&
'border-emerald-400 bg-emerald-50 shadow-[inset_0_0_0_2px_rgba(52,211,153,0.65)] dark:border-emerald-500 dark:bg-emerald-950/30 dark:shadow-[inset_0_0_0_2px_rgba(16,185,129,0.45)]',
'border-emerald-400 bg-emerald-50 dark:border-emerald-500 dark:bg-emerald-950/30',
isWrongSelected &&
'border-rose-300 bg-rose-50 shadow-[inset_0_0_0_2px_rgba(251,113,133,0.65)] dark:border-rose-600 dark:bg-rose-950/30 dark:shadow-[inset_0_0_0_2px_rgba(244,63,94,0.45)]'
'border-rose-300 bg-rose-50 dark:border-rose-600 dark:bg-rose-950/30'
)}
>
<div className="flex items-center gap-3">
@@ -395,17 +395,19 @@ export default function PerformanceDomainPracticePage() {
})}
</div>
{isCorrectSelected && (
<CheckCircle2 className="absolute right-3 top-3 text-emerald-500" size={18} />
)}
{isWrongSelected && (
<XCircle className="absolute right-3 top-3 text-rose-500" size={18} />
)}
{shouldHighlightCorrect && !isCorrectSelected && (
<span className="absolute right-3 top-3 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
正确
</span>
)}
<div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end">
{isCorrectSelected && (
<CheckCircle2 className="text-emerald-500" size={18} />
)}
{isWrongSelected && (
<XCircle className="text-rose-500" size={18} />
)}
{shouldHighlightCorrect && !isCorrectSelected && (
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
正确
</span>
)}
</div>
</motion.button>
)
}
@@ -553,7 +555,7 @@ export default function PerformanceDomainPracticePage() {
<div
className={clsx(
'min-h-[104px] rounded-xl border px-4 py-3 transition-colors',
'h-[132px] overflow-hidden rounded-xl border px-4 py-3 transition-colors',
answerState?.isCorrect
? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/30'
: answerState