fix: show relevant option progress for scoped practice

src/pages/PerformanceDomainPracticePage.tsx

@@ -369,12 +369,20 @@ export default function PerformanceDomainPracticePage() {
           </div>
         </div>
 
+        <div>
+          {(() => {
+            const activeProgress = progress.scope === 'expectedGoal' ? expectedGoalProgress : keyPointProgress
+            const activeLabel = progress.scope === 'expectedGoal' ? '目标' : '要点'
+            const isFull = activeProgress.total > 0 && activeProgress.completed >= activeProgress.total
+
+            if (progress.scope === 'all') {
+              return (
                 <div className="grid grid-cols-2 gap-2">
                   {[
                     { label: '目标', data: expectedGoalProgress },
                     { label: '要点', data: keyPointProgress },
                   ].map((item) => {
-            const isFull = item.data.total > 0 && item.data.completed >= item.data.total
+                    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">
@@ -385,7 +393,7 @@ export default function PerformanceDomainPracticePage() {
                           <div
                             className={clsx(
                               'h-full rounded-full transition-all duration-300',
-                      isFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500'
+                              itemFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500'
                             )}
                             style={{ width: `${item.data.percent}%` }}
                           />
@@ -394,6 +402,28 @@ export default function PerformanceDomainPracticePage() {
                     )
                   })}
                 </div>
+              )
+            }
+
+            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
+                    className={clsx(
+                      'h-full rounded-full transition-all duration-300',
+                      isFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500'
+                    )}
+                    style={{ width: `${activeProgress.percent}%` }}
+                  />
+                </div>
+              </div>
+            )
+          })()}
+        </div>
 
         <div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end">
           {isCorrectSelected && (