feat: bmi

app/citizen-frontend/src/pages/index.vue

@@ -7,39 +7,17 @@
         <!-- 頂部：我的健康力護照卡片 (Taipei Masters Hub) -->
         <v-card class="border-primary border-xl rounded-xl" variant="flat">
           <v-row class="mt-4 pa-2" no-gutters>
-            <v-col cols="8">
+            <v-col :cols="courseStore.groupMissing ? 8 : 12">
               <v-card-title>
                 {{ displayUserName }}
               </v-card-title>
               <v-card-subtitle> 資料更新於 {{ todayTimeString }} </v-card-subtitle>
             </v-col>
 
-            <v-col class="d-flex justify-center" cols="4">
+            <v-col v-if="courseStore.groupMissing" class="d-flex justify-center" cols="4">
               <!-- 體適能分組徽章 -->
-              <div
-                :class="[
-                  'score-disk',
-                  'd-flex',
-                  'flex-column',
-                  'justify-center',
-                  'align-center',
-                  courseStore.groupLoaded ? `text-${courseStore.groupMeta.color}` : 'text-primary',
-                ]"
-              >
-                <v-progress-circular
-                  v-if="courseStore.groupLoading"
-                  color="primary"
-                  indeterminate
-                  size="28"
-                  width="3"
-                />
-                <span v-else-if="courseStore.groupLoaded" class="group-label">
-                  {{ courseStore.groupMeta.label }}
-                </span>
-                <span v-else-if="courseStore.groupMissing" class="group-label">
-                  未完成體適能測試
-                </span>
-                <span v-else class="group-label">無資料</span>
+              <div class="score-disk d-flex flex-column justify-center align-center text-primary">
+                <span class="group-label">未完成體適能測試</span>
               </div>
             </v-col>
           </v-row>
@@ -73,7 +51,7 @@
           <div class="px-2">
             <ModuleRouterCard
               clickable
-              description="依 11 項測驗成績重新計算體適能分組。"
+              description="依 11 項測驗成績重新計算"
               icon="mdi-refresh-circle"
               icon-color="secondary"
               :disabled="generatePhysicalFitnessLoading"
@@ -85,7 +63,13 @@
 
           <!-- 課程建議入口 -->
 
-          <v-list-item append-icon="mdi-chevron-right" class="bg-primary py-4 mt-4" to="/course">
+          <FitnessGroupCardItem
+            v-if="courseStore.groupLoaded"
+            class="mt-4"
+            :group-meta="courseStore.groupMeta"
+          />
+
+          <v-list-item append-icon="mdi-chevron-right" class="bg-primary py-4" to="/course">
             <v-list-item-title class="font-weight-bold">
               <v-icon icon="mdi-notebook-check-outline" size="16" />
               課程建議
@@ -349,6 +333,7 @@ import { useRouter } from 'vue-router'
 import type { PhysicalFitnessItem } from '@/api/types'
 import { fetchPhysicalFitness, generatePhysicalFitness } from '@/api/physical-fitness'
 import BrandAvatar from '@/components/BrandAvatar.vue'
+import FitnessGroupCardItem from '@/components/FitnessGroupCardItem.vue'
 import HealthRadarChart from '@/components/HealthRadarChart.vue'
 import IntroductionCarousel from '@/components/IntroductionCarousel.vue'
 import Layout from '@/components/layout/DefaultLayout.vue'