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

fix: show relevant option progress for scoped practice

Browse Source
This commit is contained in:
ittoview
2026-05-13 19:29:22 +01:00
parent 45dd71311f
commit 643aeb498d
1 changed files with 44 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/PerformanceDomainPracticePage.tsx
View File

@@ -369,30 +369,60 @@ export default function PerformanceDomainPracticePage() {
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-2"> <div>
{[ {(() => {
{ label: '目标', data: expectedGoalProgress }, const activeProgress = progress.scope === 'expectedGoal' ? expectedGoalProgress : keyPointProgress
{ label: '要点', data: keyPointProgress }, const activeLabel = progress.scope === 'expectedGoal' ? '目标' : '要点'
].map((item) => { const isFull = activeProgress.total > 0 && activeProgress.completed >= activeProgress.total
const isFull = item.data.total > 0 && item.data.completed >= item.data.total
return ( if (progress.scope === 'all') {
<div key={item.label} className="min-w-0"> return (
<div className="mb-1 flex items-center justify-between gap-1 text-[11px] text-gray-500 dark:text-gray-400"> <div className="grid grid-cols-2 gap-2">
<span>{item.label}</span> {[
<span>{item.data.completed}/{item.data.total}</span> { label: '目标', data: expectedGoalProgress },
{ label: '要点', data: keyPointProgress },
].map((item) => {
const itemFull = item.data.total > 0 && item.data.completed >= item.data.total
return (
<div key={item.label} className="min-w-0">
<div className="mb-1 flex items-center justify-between gap-1 text-[11px] text-gray-500 dark:text-gray-400">
<span>{item.label}</span>
<span>{item.data.completed}/{item.data.total}</span>
</div>
<div className="h-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
<div
className={clsx(
'h-full rounded-full transition-all duration-300',
itemFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500'
)}
style={{ width: `${item.data.percent}%` }}
/>
</div>
</div>
)
})}
</div> </div>
<div className="h-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700"> )
}
return (
<div>
<div className="mb-1 flex items-center justify-between gap-1 text-[11px] text-gray-500 dark:text-gray-400">
<span>{activeLabel}</span>
<span>{activeProgress.completed}/{activeProgress.total}</span>
</div>
<div className="h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
<div <div
className={clsx( className={clsx(
'h-full rounded-full transition-all duration-300', 'h-full rounded-full transition-all duration-300',
isFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500' isFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500'
)} )}
style={{ width: `${item.data.percent}%` }} style={{ width: `${activeProgress.percent}%` }}
/> />
</div> </div>
</div> </div>
) )
})} })()}
</div> </div>
<div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end"> <div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end">