feat: 建議課程前需要分組

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

@@ -9,6 +9,18 @@
         </v-card-subtitle>
       </v-card>
 
+      <v-alert
+        v-if="showMissingGroupNotice"
+        class="rounded-xl mb-6"
+        closable
+        icon="mdi-calendar-alert"
+        type="info"
+        variant="tonal"
+        @click:close="dismissMissingGroupNotice"
+      >
+        尚未取得您的體適能分組，請先預約並完成現場普測；分組建立後即可查看個人化課程建議。
+      </v-alert>
+
       <!-- 活動分類選擇 -->
       <v-tabs
         v-model="filterTab"
@@ -249,12 +261,18 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import Layout from "@/components/layout/DefaultLayout.vue";
 import QRCode from "@/components/QRCode.vue";
 import { type Appointment, useAppStore } from "@/stores/app";
 
 const store = useAppStore();
+const route = useRoute();
+const router = useRouter();
 const filterTab = ref("all");
+const showMissingGroupNotice = ref(
+  route.query.reason === "missing-fitness-group",
+);
 
 const qrcodeDialog = ref(false);
 const selectedApt = ref<Appointment | null>(null);
@@ -301,6 +319,14 @@ function handleCancel(id: string) {
   store.cancelAppointment(id);
 }
 
+async function dismissMissingGroupNotice() {
+  showMissingGroupNotice.value = false;
+
+  const query = { ...route.query };
+  delete query.reason;
+  await router.replace({ query });
+}
+
 function showCheckinQRCode(apt: Appointment) {
   selectedApt.value = apt;
   qrcodeDialog.value = true;