feat: 示意圖

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

@@ -18,7 +18,8 @@
           {{ store.groupMeta.description }}
         </v-card-subtitle>
 
-        <v-card-text class="pt-4">
+        <!-- 時段篩選尚未開放給使用者操作，先隱藏 -->
+        <v-card-text v-if="SHOW_SLOT_FILTER" class="pt-4">
           <div class="text-title-small text-grey mb-2">選擇要顯示的時段</div>
 
           <v-btn-toggle
@@ -46,12 +47,7 @@
 
       <!-- 載入中 -->
       <template v-if="store.loading">
-        <v-skeleton-loader
+        <v-skeleton-loader v-for="n in 3" :key="n" class="rounded-xl mb-4" type="article" />
-          v-for="n in 3"
-          :key="n"
-          class="rounded-xl mb-4"
-          type="article"
-        />
       </template>
 
       <!-- 載入失敗 -->
@@ -82,11 +78,15 @@
 
       <!-- 一週課表：仿 doc/課程表示意 的表格版型，星期為列、時段為欄 -->
       <template v-else>
-        <v-card class="rounded-xl elevation-1 overflow-hidden">
+        <v-card class="rounded-xl elevation-1 mb-4 overflow-hidden">
+          <v-img :alt="`${store.groupMeta.label}課表示意圖`" :src="groupIllustration" />
+        </v-card>
+
+        <v-card class="rounded-lg elevation-1 overflow-hidden">
           <v-table class="course-table" density="comfortable">
             <thead>
               <tr>
-                <th class="day-col bg-secondary text-white text-center">星期</th>
+                <th class="day-col bg-primary text-white text-center">星期</th>
 
                 <th
                   v-for="slot in visibleSlots"
@@ -101,16 +101,16 @@
             </thead>
 
             <tbody>
-              <tr v-for="row in store.courseList" :key="row.day">
+              <tr
+                v-for="row in store.courseList"
+                :key="row.day"
+                :class="{ 'bg-teal-lighten-5': row.day === todayDay }"
+              >
                 <td class="day-col text-center font-weight-bold text-primary">
                   {{ DAY_NAMES[row.day - 1] }}
                 </td>
 
-                <td
+                <td v-for="slot in visibleSlots" :key="slot.key" class="text-body-medium text-wrap">
-                  v-for="slot in visibleSlots"
-                  :key="slot.key"
-                  class="text-body-medium text-wrap"
-                >
                   {{ row[slot.key] }}
                 </td>
               </tr>
@@ -123,13 +123,27 @@
 </template>
 
 <script setup lang="ts">
-import type { TimeSlot, YesNo } from '@/api/types'
+import type { FitnessGroup, TimeSlot, YesNo } from '@/api/types'
 import { computed, onMounted } from 'vue'
+import highIllustration from '@/assets/course/high.png'
+import lowIllustration from '@/assets/course/low.png'
+import mediumIllustration from '@/assets/course/medium.png'
 import Layout from '@/components/layout/DefaultLayout.vue'
 import { useCourseStore } from '@/stores/course'
 
 const store = useCourseStore()
 
+const GROUP_ILLUSTRATIONS: Record<FitnessGroup, string> = {
+  low: lowIllustration,
+  medium: mediumIllustration,
+  high: highIllustration,
+}
+
+const groupIllustration = computed(() => GROUP_ILLUSTRATIONS[store.group])
+
+// 時段篩選功能尚未開放，UI 先隱藏；之後要開放時把這個常數改回 true 即可
+const SHOW_SLOT_FILTER = false
+
 const DAY_NAMES = ['一', '二', '三', '四', '五', '六', '日']
 
 const SLOTS: { key: TimeSlot, label: string, icon: string, headerClass: string }[] = [
@@ -141,6 +155,12 @@ const SLOTS: { key: TimeSlot, label: string, icon: string, headerClass: string }
 // 依目前選取的時段決定表格要顯示哪幾欄，順序固定為早上/中午/晚上
 const visibleSlots = computed(() => SLOTS.filter(slot => store.selectedSlots.includes(slot.key)))
 
+// 今天對應的星期幾，換算成與 CourseRow.day 相同的規則（1 = 週一 … 7 = 週日）
+const todayDay = computed(() => {
+  const jsDay = new Date().getDay()
+  return jsDay === 0 ? 7 : jsDay
+})
+
 // v-btn-toggle 以陣列表達勾選狀態，store 則以 Y/N 保存，兩者在此橋接
 const selectedSlots = computed<TimeSlot[]>({
   get: () => store.selectedSlots,