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;
 }