feat: bmi

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

@@ -10,23 +10,7 @@
           elevation="1"
           variant="flat"
         >
-          <v-card-item class="pa-4" :class="`bg-${store.groupMeta.color}`">
-            <template #prepend>
-              <v-avatar class="group-avatar" size="60">
-                <v-icon color="white" :icon="store.groupMeta.icon" size="34" />
-              </v-avatar>
-            </template>
-
-            <template #subtitle>
-              <span class="text-title-small group-caption">你的體適能組別</span>
-            </template>
-
-            <template #title>
-              <span class="text-h5 font-weight-black text-white">{{
-                store.groupMeta.label
-              }}</span>
-            </template>
-          </v-card-item>
+          <FitnessGroupCardItem :group-meta="store.groupMeta" />
 
           <v-card-text class="text-body-medium text-grey-darken-2 pa-4">
             {{ store.groupMeta.description }}
@@ -388,6 +372,7 @@
 <script setup lang="ts">
 import type { TimeSlot, YesNo } from "@/api/types";
 import { computed, onMounted, ref } from "vue";
+import FitnessGroupCardItem from "@/components/FitnessGroupCardItem.vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
 import PageHeading from "@/components/layout/PageHeading.vue";
 import { EXERCISE_DURATION_RECOMMENDATION_ENABLED } from "@/config/features";
@@ -528,15 +513,6 @@ onMounted(() => {
   border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
-/* 組別卡片：半透明白底圓形與次級白字，Vuetify 沒有對應的 utility class */
-.group-avatar {
-  background-color: rgba(255, 255, 255, 0.22);
-}
-
-.group-caption {
-  color: rgba(255, 255, 255, 0.85);
-}
-
 .pa-0 :deep(.v-expansion-panel-text__wrapper) {
   padding: 0;
 }

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'