From 643aeb498d27ec8dbbf9b8154a32632664d5c743 Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Wed, 13 May 2026 19:29:22 +0100
Subject: [PATCH] fix: show relevant option progress for scoped practice

---
 src/pages/PerformanceDomainPracticePage.tsx | 58 ++++++++++++++++-----
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/pages/PerformanceDomainPracticePage.tsx b/src/pages/PerformanceDomainPracticePage.tsx
index caed628..bfb40d1 100644
--- a/src/pages/PerformanceDomainPracticePage.tsx
+++ b/src/pages/PerformanceDomainPracticePage.tsx
@@ -369,30 +369,60 @@ export default function PerformanceDomainPracticePage() {
           </div>
         </div>
 
-        <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
-            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>
+          {(() => {
+            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 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 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
                     className={clsx(
                       'h-full rounded-full transition-all duration-300',
                       isFull ? 'bg-gray-300 dark:bg-gray-500' : 'bg-indigo-500'
                     )}
-                    style={{ width: `${item.data.percent}%` }}
+                    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">