From 3839f8f4cc9833afd2d79259c1d4f98cadc00bcb Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Wed, 12 Aug 2026 09:23:02 +0800
Subject: [PATCH] style: card

---
 app/citizen-frontend/src/pages/course.vue | 63 ++++++++++++++++-------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/app/citizen-frontend/src/pages/course.vue b/app/citizen-frontend/src/pages/course.vue
index 436d1a5..340244a 100644
--- a/app/citizen-frontend/src/pages/course.vue
+++ b/app/citizen-frontend/src/pages/course.vue
@@ -9,20 +9,24 @@
       </div>
 
       <!-- 體適能組別：本頁所有內容都依它而定，因此獨立成一張顯眼的卡片 -->
-      <v-card class="rounded-xl mb-6 overflow-hidden" variant="flat">
-        <div class="d-flex align-center ga-4 pa-4" :class="`bg-${store.groupMeta.color}`">
-          <v-avatar class="group-avatar" size="60">
-            <v-icon color="white" :icon="store.groupMeta.icon" size="34" />
-          </v-avatar>
+      <v-card class="rounded-xl mb-6 overflow-hidden" 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>
 
-          <div>
-            <div class="text-title-small group-caption">你的體適能組別</div>
+          <template #subtitle>
+            <span class="text-title-small group-caption">你的體適能組別</span>
+          </template>
 
-            <div class="text-h5 font-weight-black text-white">{{ store.groupMeta.label }}</div>
-          </div>
-        </div>
+          <template #title>
+            <span class="text-h5 font-weight-black text-white">{{ store.groupMeta.label }}</span>
+          </template>
+        </v-card-item>
 
-        <v-card-text class="text-body-medium text-grey-darken-2">
+        <v-card-text class="text-body-medium text-grey-darken-2 pa-4">
           {{ store.groupMeta.description }}
         </v-card-text>
       </v-card>
@@ -224,7 +228,11 @@
                   {{ DAY_NAMES[row.day - 1] }}
                 </td>
 
-                <td v-for="slot in visibleSlots" :key="slot.key" class="slot-cell text-body-medium text-wrap">
+                <td
+                  v-for="slot in visibleSlots"
+                  :key="slot.key"
+                  class="slot-cell text-body-medium text-wrap"
+                >
                   <div class="d-flex flex-column flex-md-row align-center ga-1 ga-md-3">
                     <v-avatar class="slot-avatar flex-shrink-0" rounded="lg">
                       <v-img
@@ -281,31 +289,46 @@ const SHOW_SLOT_FILTER = false
 const DAY_NAMES = ['一', '二', '三', '四', '五', '六', '日']
 
 // 課表小卡：檔名為「星期-時段」，逐一匯入 21 張圖並依 day/slot 查表取用
-const scheduleCardModules = import.meta.glob<{ default: string }>('../assets/course/schedule/*.png', { eager: true })
+const scheduleCardModules = import.meta.glob<{ default: string }>(
+  '../assets/course/schedule/*.png',
+  { eager: true }
+)
 
-const SCHEDULE_CARD_DAY_KEYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
-const SCHEDULE_CARD_SLOT_KEYS: Record<TimeSlot, string> = { morning: 'morning', noon: 'noon', night: 'evening' }
+const SCHEDULE_CARD_DAY_KEYS = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+]
+const SCHEDULE_CARD_SLOT_KEYS: Record<TimeSlot, string> = {
+  morning: 'morning',
+  noon: 'noon',
+  night: 'evening',
+}
 
 const SCHEDULE_CARDS: Record<string, string> = Object.fromEntries(
   Object.entries(scheduleCardModules).map(([path, module]) => [
     path.replace(/^.*\/|\.png$/g, ''),
     module.default,
-  ]),
+  ])
 )
 
-function scheduleCardImage (day: number, slot: TimeSlot): string {
+function scheduleCardImage(day: number, slot: TimeSlot): string {
   const key = `${SCHEDULE_CARD_DAY_KEYS[day - 1]}-${SCHEDULE_CARD_SLOT_KEYS[slot]}`
   return SCHEDULE_CARDS[key]
 }
 
-const SLOTS: { key: TimeSlot, label: string, icon: string, headerClass: string }[] = [
+const SLOTS: { key: TimeSlot; label: string; icon: string; headerClass: string }[] = [
   { key: 'morning', label: '早上', icon: 'mdi-weather-sunset-up', headerClass: 'bg-deep-orange' },
   { key: 'noon', label: '中午', icon: 'mdi-white-balance-sunny', headerClass: 'bg-amber-darken-2' },
   { key: 'night', label: '晚上', icon: 'mdi-weather-night', headerClass: 'bg-deep-purple' },
 ]
 
 // 依目前選取的時段決定表格要顯示哪幾欄，順序固定為早上/中午/晚上
-const visibleSlots = computed(() => SLOTS.filter(slot => store.selectedSlots.includes(slot.key)))
+const visibleSlots = computed(() => SLOTS.filter((slot) => store.selectedSlots.includes(slot.key)))
 
 // 今天對應的星期幾，換算成與 CourseRow.day 相同的規則（1 = 週一 … 7 = 週日）
 const todayDay = computed(() => {
@@ -316,7 +339,7 @@ const todayDay = computed(() => {
 // v-btn-toggle 以陣列表達勾選狀態，store 則以 Y/N 保存，兩者在此橋接
 const selectedSlots = computed<TimeSlot[]>({
   get: () => store.selectedSlots,
-  set: value => {
+  set: (value) => {
     for (const slot of SLOTS) {
       const next: YesNo = value.includes(slot.key) ? 'Y' : 'N'
       store.setSlot(slot.key, next)