style: self assessment

2026-06-23 09:59:44 +08:00
parent eb952d31cb
commit 250d1b6e40
4 changed files with 49 additions and 78 deletions
@@ -335,8 +335,7 @@ function handleLogout () {

  .v-list-item-title,
  .v-btn,
-  .v-card-title,
-  .text-subtitle-1 {
+  .text-title-medium {
    font-size: 1.25rem !important;
    line-height: unset !important;
  }
@@ -130,9 +130,7 @@
                    <v-icon color="secondary" icon="mdi-numeric-1-circle" size="24" />
                  </template>

-                  <v-list-item-title class="font-weight-bold"
-                    >下肢肌力：坐站起立訓練</v-list-item-title
-                  >
+                  <v-list-item-title class="font-weight-bold">下肢肌力：坐站起立訓練</v-list-item-title>

                  <v-list-item-subtitle class="text-caption mt-1">
                    每週 2 次，每次 3 組，每組 10-12 次。<br />
@@ -145,9 +143,7 @@
                    <v-icon color="secondary" icon="mdi-numeric-2-circle" size="24" />
                  </template>

-                  <v-list-item-title class="font-weight-bold"
-                    >靜態平衡：扶椅單腳站立</v-list-item-title
-                  >
+                  <v-list-item-title class="font-weight-bold">靜態平衡：扶椅單腳站立</v-list-item-title>

                  <v-list-item-subtitle class="text-caption mt-1">
                    每週 3 次，左右腳各 30 秒，重複 3 次。<br />
@@ -176,8 +172,7 @@
                color="primary"
                variant="flat"
                @click="prescriptionDialog = false"
-                >確認關閉</v-btn
-              >
+              >確認關閉</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
@@ -260,7 +255,7 @@ const prescriptionDialog = ref(false)
 const displayedHealthScore = ref(1)
 let healthScoreTimer: number | undefined

-function animateHealthScore(targetScore: number) {
+function animateHealthScore (targetScore: number) {
  if (healthScoreTimer !== undefined) {
    window.clearInterval(healthScoreTimer)
  }
@@ -298,9 +293,9 @@ onBeforeUnmount(() => {

 watch(
  () => store.healthScore,
-  (score) => {
+  score => {
    animateHealthScore(score)
-  }
+  },
 )

 const todayTimeString = computed(() => {
@@ -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) {
@@ -19,7 +19,6 @@ export interface SelfAssessment {
  painLevel: string
  hasFalls: boolean
  chronicDiseases: string[]
-  medicationReminders: string[]
  wantedImprovements: string[]
  scoreLevel: string
  completed: boolean
@@ -65,7 +64,6 @@ function createDefaultSelfAssessment (): SelfAssessment {
    painLevel: '輕微',
    hasFalls: false,
    chronicDiseases: ['高血壓'],
-    medicationReminders: ['每日晨間降血壓藥'],
    wantedImprovements: ['肌力', '平衡'],
    scoreLevel: '需追蹤',
    completed: true,