From 12519f7809bc0e4ae18c2b3a5e99b280d89113e9 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Mon, 31 Aug 2026 10:04:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E6=95=B8=E6=94=B9=E7=82=BA?=
 =?UTF-8?q?=E5=88=86=E7=B5=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/citizen-frontend/src/pages/index.vue  | 109 +++++++++++-----------
 app/citizen-frontend/src/stores/app.ts    |   7 --
 app/citizen-frontend/src/stores/course.ts |  50 +++++++++-
 3 files changed, 101 insertions(+), 65 deletions(-)

diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index d308398..926e65a 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -15,16 +15,47 @@
             </v-col>
 
             <v-col class="d-flex justify-center" cols="4">
-              <!-- 健康力分數大圓盤 -->
+              <!-- 體適能分組徽章 -->
               <div
-                class="score-disk d-flex flex-column justify-center align-center"
+                :class="[
+                  'score-disk',
+                  'd-flex',
+                  'flex-column',
+                  'justify-center',
+                  'align-center',
+                  courseStore.groupLoaded
+                    ? `bg-${courseStore.groupMeta.color}`
+                    : 'bg-primary',
+                ]"
               >
-                <span class="score-val">{{ displayedHealthScore }}</span>
-                <span class="score-unit">分</span>
+                <v-progress-circular
+                  v-if="courseStore.groupLoading"
+                  color="white"
+                  indeterminate
+                  size="28"
+                  width="3"
+                />
+                <span v-else-if="courseStore.groupLoaded" class="group-label">
+                  {{ courseStore.groupMeta.label }}
+                </span>
+                <span v-else class="group-label">無資料</span>
               </div>
             </v-col>
           </v-row>
 
+          <v-card-subtitle v-if="courseStore.groupError" class="text-error">
+            {{ courseStore.groupError }}
+            <v-btn
+              class="ml-2"
+              color="error"
+              size="small"
+              variant="text"
+              @click="loadFitnessGroup"
+            >
+              重試
+            </v-btn>
+          </v-card-subtitle>
+
           <!-- 四項核心能力數值簡覽 -->
           <v-row class="mt-4" no-gutters>
             <v-col class="text-center border pa-2" cols="3">
@@ -201,59 +232,31 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import BrandAvatar from "@/components/BrandAvatar.vue";
 import HealthRadarChart from "@/components/HealthRadarChart.vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
 import ModuleRouterCard from "@/components/ModuleRouterCard.vue";
 import { useAppStore } from "@/stores/app";
+import { useCourseStore } from "@/stores/course";
 
 const store = useAppStore();
-const displayedHealthScore = ref(1);
-let healthScoreTimer: number | undefined;
+const courseStore = useCourseStore();
 
-function animateHealthScore(targetScore: number) {
-  if (healthScoreTimer !== undefined) {
-    window.clearInterval(healthScoreTimer);
-  }
-
-  if (targetScore <= 1) {
-    displayedHealthScore.value = targetScore;
+async function loadFitnessGroup() {
+  if (!store.isLoggedIn) {
+    courseStore.resetGroup();
     return;
   }
 
-  displayedHealthScore.value = 1;
-
-  const duration = 900;
-  const stepDuration = Math.max(12, Math.floor(duration / targetScore));
-
-  healthScoreTimer = window.setInterval(() => {
-    if (displayedHealthScore.value >= targetScore) {
-      window.clearInterval(healthScoreTimer);
-      healthScoreTimer = undefined;
-      return;
-    }
-
-    displayedHealthScore.value += 1;
-  }, stepDuration);
+  try {
+    await courseStore.loadGroup();
+  } catch {
+    // 錯誤狀態由 course store 提供給畫面顯示與重試。
+  }
 }
 
-onMounted(() => {
-  animateHealthScore(store.healthScore);
-});
-
-onBeforeUnmount(() => {
-  if (healthScoreTimer !== undefined) {
-    window.clearInterval(healthScoreTimer);
-  }
-});
-
-watch(
-  () => store.healthScore,
-  (score) => {
-    animateHealthScore(score);
-  },
-);
+watch(() => store.isLoggedIn, loadFitnessGroup, { immediate: true });
 
 const todayTimeString = computed(() => {
   const now = new Date();
@@ -314,26 +317,22 @@ const todayTimeString = computed(() => {
 }
 
 .score-disk {
-  background: radial-gradient(circle, #157ba9 0%, #13967f 100%);
   border: 3px solid #ffffff;
-  width: 72px;
+  width: min(100%, 108px);
   height: 72px;
-  border-radius: 50%;
+  padding: 0 10px;
+  border-radius: 22px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
   flex-shrink: 0;
 }
 
-.score-val {
-  font-size: 1.75rem;
+.group-label {
+  font-size: clamp(0.95rem, 3vw, 1.1rem);
   font-weight: 900;
   line-height: 1;
   color: #ffffff;
-}
-
-.score-unit {
-  font-size: 0.65rem;
-  font-weight: bold;
-  color: rgba(255, 255, 255, 0.8);
+  white-space: nowrap;
 }
 
 .transition-card {
diff --git a/app/citizen-frontend/src/stores/app.ts b/app/citizen-frontend/src/stores/app.ts
index 6fe5b3c..fa89ccd 100644
--- a/app/citizen-frontend/src/stores/app.ts
+++ b/app/citizen-frontend/src/stores/app.ts
@@ -327,7 +327,6 @@ export const useAppStore = defineStore("app", () => {
   const measurements = ref<Record<string, MeasurementStation>>(
     createDefaultMeasurements(),
   );
-  const healthScore = ref(72);
   const radarData = ref(createDefaultRadarData());
   const isReportGenerated = ref(false);
 
@@ -674,10 +673,6 @@ export const useAppStore = defineStore("app", () => {
       cardio: cardScore,
     };
 
-    const avg = Math.round(
-      (strScore + balScore + flexScore + agiScore + cardScore) / 5,
-    );
-    healthScore.value = Math.min(100, avg + 5);
     isReportGenerated.value = true;
   }
 
@@ -693,7 +688,6 @@ export const useAppStore = defineStore("app", () => {
     }
 
     isReportGenerated.value = false;
-    healthScore.value = 72;
     radarData.value = createDefaultRadarData();
   }
 
@@ -705,7 +699,6 @@ export const useAppStore = defineStore("app", () => {
     selfAssessment,
     appointments,
     measurements,
-    healthScore,
     radarData,
     isReportGenerated,
     completedStationsCount,
diff --git a/app/citizen-frontend/src/stores/course.ts b/app/citizen-frontend/src/stores/course.ts
index e5b7b32..6aa5faa 100644
--- a/app/citizen-frontend/src/stores/course.ts
+++ b/app/citizen-frontend/src/stores/course.ts
@@ -209,8 +209,15 @@ function mockCourseList(params: CourseListParams): CourseList {
   });
 }
 
+function isFitnessGroup(value: unknown): value is FitnessGroup {
+  return value === "low" || value === "medium" || value === "high";
+}
+
 export const useCourseStore = defineStore("course", () => {
   const group = ref<FitnessGroup>("medium");
+  const groupLoaded = ref(false);
+  const groupLoading = ref(false);
+  const groupError = ref("");
   const morning = ref<YesNo>("Y");
   const noon = ref<YesNo>("Y");
   const night = ref<YesNo>("Y");
@@ -241,11 +248,43 @@ export const useCourseStore = defineStore("course", () => {
     () => selectedSlots.value.length > 0 && courseList.value.length > 0,
   );
 
+  /** 只取得目前登入使用者的體適能組別，供首頁摘要使用。 */
+  async function loadGroup(): Promise<FitnessGroup> {
+    groupLoading.value = true;
+    groupError.value = "";
+
+    try {
+      const groupValue = USE_MOCK ? "medium" : await fetchGroup();
+
+      if (!isFitnessGroup(groupValue)) {
+        throw new Error("體適能組別資料格式不正確。");
+      }
+
+      group.value = groupValue;
+      groupLoaded.value = true;
+      return groupValue;
+    } catch (error_) {
+      groupLoaded.value = false;
+      groupError.value =
+        error_ instanceof Error
+          ? error_.message
+          : "體適能組別載入失敗，請稍後再試。";
+      throw error_;
+    } finally {
+      groupLoading.value = false;
+    }
+  }
+
+  function resetGroup() {
+    group.value = "medium";
+    groupLoaded.value = false;
+    groupError.value = "";
+  }
+
   /** 前 4 支 API：平行取得組別與三個時段設定 */
   async function loadPreferences() {
     if (USE_MOCK) {
-      await delay(MOCK_DELAY);
-      group.value = "medium";
+      await loadGroup();
       morning.value = "Y";
       noon.value = "Y";
       night.value = "Y";
@@ -254,7 +293,7 @@ export const useCourseStore = defineStore("course", () => {
 
     // 真實後端：course/group 由登入 Cookie 識別使用者；
     // course/morning、noon、night 需要 group，兩者有相依順序。
-    const groupValue = await fetchGroup();
+    const groupValue = await loadGroup();
 
     const [morningValue, noonValue, nightValue] = await Promise.all([
       fetchMorning(groupValue),
@@ -338,10 +377,15 @@ export const useCourseStore = defineStore("course", () => {
     courseList,
     loading,
     error,
+    groupLoaded,
+    groupLoading,
+    groupError,
     groupMeta,
     selectedSlots,
     hasCourse,
     loadAll,
+    loadGroup,
+    resetGroup,
     loadCourseList,
     loadPreferences,
     setSlot,