style: self assessment

app/citizen-frontend/src/pages/self-assessment.vue

@@ -1,10 +1,13 @@
 <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">只需 3 分鐘，評估您的運動風險與健康狀態</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">
+          只需 3 分鐘，評估您的運動風險與健康狀態
+        </v-card-subtitle>
+      </v-card>
 
       <!-- 進度指示器 -->
       <v-row class="mb-6 justify-center">
@@ -17,11 +20,11 @@
             size="28"
           >
             <v-icon v-if="currentStep > idx" icon="mdi-check" size="14" />
-            <span v-else class="text-caption">{{ idx + 1 }}</span>
+            <span v-else class="text-title-small">{{ idx + 1 }}</span>
           </v-avatar>
 
           <div
-            class="text-caption font-weight-bold"
+            class="text-title-small font-weight-bold"
             :class="
               currentStep === idx
                 ? 'text-secondary'
@@ -36,11 +39,11 @@
       </v-row>
 
       <!-- 步驟內容區 -->
-      <v-card class="rounded-xl elevation-3 border-accent-light mb-6" color="surface">
-        <v-card-text class="pa-5">
+      <v-card class="rounded-xl elevation-3 mb-6" color="surface">
+        <v-card-text class="py-2">
           <!-- 步驟 1：基本資料 -->
           <div v-if="currentStep === 0">
-            <h2 class="text-subtitle-1 font-weight-bold text-primary mb-4 d-flex align-center">
+            <h2 class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center">
               <v-icon class="mr-2" color="secondary" icon="mdi-account-circle" />
               基本資料確認
             </h2>
@@ -123,12 +126,12 @@
 
           <!-- 步驟 2：活動量與自評 -->
           <div v-if="currentStep === 1">
-            <h2 class="text-subtitle-1 font-weight-bold text-primary mb-4 d-flex align-center">
+            <h2 class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center">
               <v-icon class="mr-2" color="secondary" icon="mdi-walk" />
               活動習慣與想要改善的能力
             </h2>
 
-            <p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">
+            <p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
               1. 最近 7 天，您每週進行大運動幾次？
             </p>
 
@@ -161,7 +164,7 @@
               </v-card>
             </v-radio-group>
 
-            <p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">
+            <p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
               2. 您目前最想改善的身體功能？ (可複選)
             </p>
 
@@ -182,7 +185,7 @@
                     :icon="getImprovementIcon(imp)"
                   />
 
-                  <div class="text-caption font-weight-bold">{{ imp }}</div>
+                  <div class="text-title-large font-weight-bold">{{ imp }}</div>
                 </v-card>
               </v-col>
             </v-row>
@@ -190,12 +193,12 @@
 
           <!-- 步驟 3：身體狀況自評 -->
           <div v-if="currentStep === 2">
-            <h2 class="text-subtitle-1 font-weight-bold text-primary mb-4 d-flex align-center">
+            <h2 class="text-title-medium font-weight-bold text-primary mb-4 d-flex align-center">
               <v-icon class="mr-2" color="secondary" icon="mdi-alert-decagram" />
               身體限制與慢性病史
             </h2>
 
-            <p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">
+            <p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
               1. 過去一年是否有過跌倒史？
             </p>
 
@@ -204,7 +207,7 @@
               <v-radio label="有跌倒過" :value="true" />
             </v-radio-group>
 
-            <p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">
+            <p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
               2. 目前身體關節疼痛狀況？
             </p>
 
@@ -217,7 +220,7 @@
               variant="outlined"
             />
 
-            <p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">
+            <p class="text-body-medium font-weight-bold text-grey-darken-2 mb-2">
               3. 您有哪些慢性疾病？ (可複選)
             </p>
 
@@ -233,34 +236,6 @@
                 />
               </v-col>
             </v-row>
-
-            <v-text-field
-              v-model="medicationInput"
-              append-inner-icon="mdi-plus"
-              color="primary"
-              density="comfortable"
-              label="用藥提醒設定 (例如：每日晨間降血壓藥)"
-              placeholder="請輸入常用藥物或提醒"
-              variant="outlined"
-              @click:append-inner="addMedication"
-              @keyup.enter="addMedication"
-            />
-
-            <div
-              v-if="assessmentForm.medicationReminders.length > 0"
-              class="d-flex flex-wrap gap-2 mt-2"
-            >
-              <v-chip
-                v-for="(med, idx) in assessmentForm.medicationReminders"
-                :key="idx"
-                closable
-                color="secondary"
-                size="small"
-                @click:close="removeMedication(idx)"
-              >
-                {{ med }}
-              </v-chip>
-            </div>
           </div>
 
           <!-- 步驟 4：自評結果 -->
@@ -270,13 +245,13 @@
             </v-avatar>
 
             <h2
-              class="text-h5 font-weight-bold mb-1"
+              class="text-title-large font-weight-bold mb-1"
               :class="`text-${getResultColor(resultLevel)}`"
             >
               自評分級：{{ resultLevel }}
             </h2>
 
-            <p class="text-subtitle-2 text-grey-darken-2 mb-6">您的健康自評報告已產生</p>
+            <p class="text-title-small text-grey-darken-2 mb-6">您的健康自評報告已產生</p>
 
             <v-card class="rounded-xl pa-4 text-left mb-6" color="grey-lighten-4" variant="flat">
               <div class="font-weight-bold mb-2 text-primary d-flex align-center">
@@ -284,20 +259,23 @@
                 系統評估建議：
               </div>
 
-              <p v-if="resultLevel === '低風險'" class="text-body-2 text-grey-darken-3 mb-2">
+              <p v-if="resultLevel === '低風險'" class="text-body-medium text-grey-darken-3 mb-2">
                 您的身體功能與日常活動習慣良好。建議您每週繼續保持 3
                 次以上的運動，並可以預約普測活動以獲得精準的五維健康指標與運動處方。
               </p>
 
-              <p v-else-if="resultLevel === '需追蹤'" class="text-body-2 text-grey-darken-3 mb-2">
+              <p
+                v-else-if="resultLevel === '需追蹤'"
+                class="text-body-medium text-grey-darken-3 mb-2"
+              >
                 由於您運動頻率偏低，或是過去有跌倒史，建議您可以前往運動中心預約專業普測，由現場教練為您提供適合的肌力與平衡回測建議。
               </p>
 
-              <p v-else class="text-body-2 text-grey-darken-3 mb-2">
+              <p v-else class="text-body-medium text-grey-darken-3 mb-2">
                 檢測到您有多項慢性病或中重度疼痛，運動時請特別留意。建議您先向您的家庭醫師或社區據點諮詢，並在運動普測現場合對您的健康狀態，以確保運動安全。
               </p>
 
-              <div class="font-weight-bold text-caption text-secondary mt-3">
+              <div class="font-weight-bold text-body-medium text-secondary mt-3">
                 * 禁忌提醒：若收縮壓 >
                 160mmHg、有關節強烈疼痛或暈眩時，請立即暫停所有體能檢測與訓練！
               </div>
@@ -314,7 +292,7 @@
             class="rounded-lg px-4"
             color="primary"
             variant="outlined"
-            @click="currentStep--"
+            @click="goToPreviousStep"
           >
             上一步
           </v-btn>
@@ -327,7 +305,7 @@
             color="primary"
             :disabled="currentStep === 0 && !profileForm.consent"
             variant="flat"
-            @click="currentStep++"
+            @click="goToNextStep"
           >
             下一步
           </v-btn>
@@ -395,10 +373,8 @@ const assessmentForm = reactive({
   hasFalls: store.selfAssessment.hasFalls,
   painLevel: store.selfAssessment.painLevel,
   chronicDiseases: [...store.selfAssessment.chronicDiseases],
-  medicationReminders: [...store.selfAssessment.medicationReminders],
 })
 
-const medicationInput = ref('')
 const resultLevel = ref(store.selfAssessment.scoreLevel)
 
 const improvementsOptions = ['肌力', '平衡', '心肺', '柔軟度', '敏捷', '體脂/BMI']
@@ -439,15 +415,18 @@ function toggleImprovement (imp: string) {
   }
 }
 
-function addMedication () {
-  if (medicationInput.value.trim()) {
-    assessmentForm.medicationReminders.push(medicationInput.value.trim())
-    medicationInput.value = ''
-  }
+function scrollToPageTop () {
+  window.scrollTo({ top: 0 })
 }
 
-function removeMedication (index: number) {
-  assessmentForm.medicationReminders.splice(index, 1)
+function goToPreviousStep () {
+  currentStep.value -= 1
+  scrollToPageTop()
+}
+
+function goToNextStep () {
+  currentStep.value += 1
+  scrollToPageTop()
 }
 
 function handleSubmit () {
@@ -467,12 +446,12 @@ function handleSubmit () {
     hasFalls: assessmentForm.hasFalls,
     painLevel: assessmentForm.painLevel,
     chronicDiseases: assessmentForm.chronicDiseases,
-    medicationReminders: assessmentForm.medicationReminders,
   })
 
   // 取得計算後的結果
   resultLevel.value = store.selfAssessment.scoreLevel
   currentStep.value = 3
+  scrollToPageTop()
 }
 
 function getResultColor (lvl: string) {