From cc1a3f95e2e6da3e07b0c5619915f77de27b9f6f Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Tue, 23 Jun 2026 11:48:29 +0800
Subject: [PATCH] style: checkin

---
 .../src/components/layout/DefaultLayout.vue   | 10 +--
 .../src/pages/appointment.vue                 |  2 +-
 app/citizen-frontend/src/pages/checkin.vue    | 83 +++++++------------
 3 files changed, 38 insertions(+), 57 deletions(-)

diff --git a/app/citizen-frontend/src/components/layout/DefaultLayout.vue b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
index 223df88..6a26b30 100644
--- a/app/citizen-frontend/src/components/layout/DefaultLayout.vue
+++ b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
@@ -188,15 +188,15 @@
         <span class="bottom-nav-text">自評</span>
       </v-btn>
 
-      <v-btn v-if="store.isLoggedIn" to="/appointment" value="appointment">
-        <v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
-        <span class="bottom-nav-text">預約</span>
-      </v-btn>
-
       <v-btn v-if="store.isLoggedIn" to="/checkin" value="checkin">
         <v-icon :color="getBottomNavIconColor('checkin')">mdi-qrcode-scan</v-icon>
         <span class="bottom-nav-text">量測</span>
       </v-btn>
+
+      <v-btn v-if="store.isLoggedIn" to="/appointment" value="appointment">
+        <v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
+        <span class="bottom-nav-text">預約</span>
+      </v-btn>
     </v-bottom-navigation>
 
     <!-- 隱私授權對話框 -->
diff --git a/app/citizen-frontend/src/pages/appointment.vue b/app/citizen-frontend/src/pages/appointment.vue
index 4062508..bef06af 100644
--- a/app/citizen-frontend/src/pages/appointment.vue
+++ b/app/citizen-frontend/src/pages/appointment.vue
@@ -2,7 +2,7 @@
   <Layout>
     <template #main>
       <v-card class="mb-6" variant="flat">
-        <v-card-title class="text-primary">公益普測與活動預約</v-card-title>
+        <v-card-title class="text-primary">預約</v-card-title>
 
         <v-card-subtitle class="text-grey-darken-3">
           報名免費體能普測，取得個人運動處方
diff --git a/app/citizen-frontend/src/pages/checkin.vue b/app/citizen-frontend/src/pages/checkin.vue
index b5c387b..37102dd 100644
--- a/app/citizen-frontend/src/pages/checkin.vue
+++ b/app/citizen-frontend/src/pages/checkin.vue
@@ -1,20 +1,19 @@
 <template>
   <Layout>
     <template #main>
-      <div class="mb-4 text-center">
-        <h1 class="text-h5 font-weight-black text-primary">現場量測與報到</h1>
-        <p class="text-caption text-grey">在各量測站出示此頁面，由現場教練或志工登錄數據</p>
-      </div>
+      <v-card class="mb-6" variant="flat">
+        <v-card-title class="text-primary">現場量測</v-card-title>
+
+        <v-card-subtitle class="text-grey-darken-3">
+          在各量測站出示此頁面，由技術人員登錄數據
+        </v-card-subtitle>
+      </v-card>
 
       <!-- 報到活動資訊 -->
-      <v-card
-        v-if="activeAppointment"
-        class="rounded-xl elevation-3 border-accent-light mb-6"
-        color="surface"
-      >
-        <v-card-text class="pa-4">
-          <div class="d-flex align-center justify-between mb-3">
-            <span class="text-subtitle-2 font-weight-bold text-primary">
+      <v-card v-if="activeAppointment" class="rounded-xl elevation-3 mb-6" color="surface">
+        <v-card-text>
+          <div class="d-flex align-center justify-space-between mb-3">
+            <span class="text-title-small font-weight-bold text-primary">
               <v-icon class="mr-1" icon="mdi-map-marker-radius" />
               現場檢測站：{{ activeAppointment.location.split(' ')[0] }}
             </span>
@@ -24,20 +23,18 @@
             </v-chip>
           </div>
 
-          <h2 class="text-subtitle-1 font-weight-black text-grey-darken-4 mb-2">
+          <h2 class="text-title-large font-weight-black text-grey-darken-4 mb-2">
             {{ activeAppointment.title }}
           </h2>
 
-          <div class="text-caption text-grey">
-            主辦單位：{{ activeAppointment.organizer }} | 日期：{{ activeAppointment.date }}
-          </div>
+          <div class="text-title-small text-grey">日期：{{ activeAppointment.date }}</div>
 
           <!-- 量測總進度條 -->
           <div class="mt-4">
             <div class="d-flex justify-space-between align-center mb-1">
-              <span class="text-caption font-weight-bold text-grey-darken-2">測量站點完成度</span>
+              <span class="text-title-small font-weight-bold text-grey-darken-2">測量站點完成度</span>
 
-              <span class="text-caption font-weight-bold text-primary">{{ completedCount }} / {{ totalCount }} ({{ progressPercent }}%)</span>
+              <span class="text-title-small font-weight-bold text-primary">{{ completedCount }} / {{ totalCount }} ({{ progressPercent }}%)</span>
             </div>
 
             <v-progress-linear
@@ -55,9 +52,9 @@
       <!-- 未報到提示 -->
       <v-card v-else class="rounded-xl elevation-3 pa-6 text-center mb-6" color="surface">
         <v-icon class="mb-3" color="warning" icon="mdi-qrcode-scan" size="64" />
-        <h3 class="text-subtitle-1 font-weight-bold mb-2">尚未在活動現場合對報到</h3>
+        <h3 class="text-title-medium font-weight-bold mb-2">尚未在活動現場合對報到</h3>
 
-        <p class="text-body-2 text-grey mb-4">
+        <p class="text-body-medium text-grey mb-4">
           請先前往「活動預約」頁面，出示您的報到條碼給現場志工進行核對。
         </p>
 
@@ -65,38 +62,20 @@
       </v-card>
 
       <!-- 快捷測試功能 (對 Demo 非常友善) -->
-      <v-card
-        v-if="activeAppointment && completedCount < totalCount"
-        class="rounded-xl mb-6 border-accent-light bg-teal-lighten-5"
-        color="primary"
-        variant="outlined"
-      >
-        <v-card-text class="pa-4 d-flex align-center justify-space-between">
-          <div>
-            <div class="text-subtitle-2 font-weight-bold text-primary">
-              <v-icon class="mr-1" icon="mdi-heart-cog" />
-              高齡友善測試輔助
-            </div>
 
-            <div class="text-caption text-grey-darken-1">
-              一鍵填入所有剩餘關卡數值，便於檢視報告
-            </div>
-          </div>
-
-          <v-btn
-            class="rounded-lg font-weight-bold text-white"
-            color="secondary"
-            size="small"
-            @click="simulateAllMeasurements"
-          >
-            一鍵模擬完成
-          </v-btn>
-        </v-card-text>
-      </v-card>
+      <div v-if="activeAppointment && completedCount < totalCount" class="d-flex justify-center">
+        <v-btn
+          class="rounded-lg font-weight-bold text-white"
+          color="secondary"
+          @click="simulateAllMeasurements"
+        >
+          一鍵模擬完成
+        </v-btn>
+      </div>
 
       <!-- 11 個量測關卡列表 -->
       <div v-if="activeAppointment" class="mb-6">
-        <h3 class="text-subtitle-2 font-weight-black text-primary mb-3">關卡列表</h3>
+        <h3 class="text-title-medium font-weight-black text-primary px-4 mb-3">關卡列表</h3>
 
         <v-row>
           <v-col v-for="(station, key) in store.measurements" :key="key" class="mb-2" cols="12">
@@ -120,18 +99,20 @@
 
                   <div>
                     <div
-                      class="font-weight-bold text-body-1"
+                      class="font-weight-bold text-body-large"
                       :class="station.completed ? 'text-success' : 'text-grey-darken-4'"
                     >
                       {{ station.name }}
                     </div>
                     <!-- 已完成，顯示數值 -->
-                    <div v-if="station.completed" class="text-caption text-grey-darken-2">
+                    <div v-if="station.completed" class="text-title-small text-grey-darken-2">
                       {{ getMeasurementSummary(key, station.values) }}
                       <span class="ml-2 text-grey-lighten-1">| {{ station.time?.split(' ')[1] }}</span>
                     </div>
                     <!-- 未完成，顯示待測 -->
-                    <div v-else class="text-caption text-grey-darken-1">等待現場檢測員登錄</div>
+                    <div v-else class="text-title-small text-grey-darken-1">
+                      等待技術人員檢測登錄
+                    </div>
                   </div>
                 </div>