fix: btn string

2026-06-24 09:06:04 +08:00
parent 2a2535ef10
commit 84df30c667
2 changed files with 111 additions and 74 deletions
@@ -329,7 +329,7 @@
              to="/appointment"
              variant="flat"
            >
-              立即預約普測
+              立即預約
            </v-btn>
          </div>
        </v-card-actions>
@@ -35,113 +35,150 @@
    └── /checkin/ResultReview
 ```

-## 備註
-
- `/checkin/:code` 使用同一個 Vue 頁面，透過 route param 顯示不同量測站內容。
- 目前路由來源以 [src/router/index.ts](../health-platform/hp-frontend/src/router/index.ts:1) 為準。
-
 ## 預計功能

 1. 帳號與身分

- 手機號碼登入
- 基本資料維護：姓名、生日、性別、身高、體重、聯絡方式
- 緊急聯絡人
- 個資同意與資料授權狀態
+- [x] 手機號碼登入
+- [x] 基本資料維護：姓名、生日、性別、身高、體重、聯絡方式
+- [ ] 緊急聯絡人
+- [x] 個資同意與資料授權狀態

 2. 健康自評

- 3 分鐘線上自評問卷
- 運動頻率、疼痛狀況、跌倒史、慢性病、用藥提醒
- 生活功能自評：走路、上下樓、起身、平衡、柔軟度
- 自評結果分級：低風險 / 需追蹤 / 建議諮詢
+- [x] 3 分鐘線上自評問卷
+- [ ] 運動頻率、疼痛狀況、跌倒史、慢性病、用藥提醒
+- [ ] 生活功能自評：走路、上下樓、起身、平衡、柔軟度
+- [x] 自評結果分級：低風險 / 需追蹤 / 建議諮詢

 3. 活動與預約

- 公益普測活動列表
- 活動詳情：地點、時間、名額、主辦單位、量測項目
- 線上報名 / 取消報名
- QR Code 報到
- 報名紀錄與到場狀態
+- [x] 公益普測活動列表
+- [ ] 活動詳情：地點、時間、名額、主辦單位、量測項目
+- [x] 線上報名 / 取消報名
+- [x] QR Code 報到
+- [x] 報名紀錄與到場狀態

 4. 現場量測結果

- 血壓 BloodPressure
- 體脂 BodyFat
- 握力 GripStrength
- 5 次坐站 Sit5x
- 30 秒椅子坐立 Sit30s
- 原地抬膝踏步 StepTest
- 肱二頭肌手臂屈舉 ArmTest
- 抓背測驗 BackTest
- 坐姿體前彎 SitReachTest
- 2.44 公尺椅子坐立繞物 UpGo8ft
- 開眼單足立 OneLegTest
+- [x] 血壓 BloodPressure
+- [x] 體脂 BodyFat
+- [x] 握力 GripStrength
+- [x] 5 次坐站 Sit5x
+- [x] 30 秒椅子坐立 Sit30s
+- [x] 原地抬膝踏步 StepTest
+- [x] 肱二頭肌手臂屈舉 ArmTest
+- [x] 抓背測驗 BackTest
+- [x] 坐姿體前彎 SitReachTest
+- [x] 2.44 公尺椅子坐立繞物 UpGo8ft
+- [x] 開眼單足立 OneLegTest

 5. 個人健康力儀表板

- 健康力總分
- 肌力、平衡、柔軟、敏捷、心肺等能力分項
- 與同年齡區間參考值比較
- 風險提示：跌倒風險、血壓異常、肌力不足等
- 最近一次量測摘要
- 歷史趨勢圖
+- [x] 健康力總分
+- [x] 肌力、平衡、柔軟、敏捷、心肺等能力分項
+- [x] 與同年齡區間參考值比較
+- [x] 風險提示：跌倒風險、血壓異常、肌力不足等
+- [x] 最近一次量測摘要
+- [ ] 歷史趨勢圖

 6. 運動處方

- 依量測結果產生建議訓練
- 每週訓練任務
- 動作說明：次數、組數、頻率、注意事項
- 禁忌提醒：血壓過高、疼痛、暈眩時暫停
- 訓練完成回填
+- [x] 依量測結果產生建議訓練
+- [x] 每週訓練任務
+- [x] 動作說明：次數、組數、頻率、注意事項
+- [x] 禁忌提醒：血壓過高、疼痛、暈眩時暫停
+- [ ] 訓練完成回填

 7. 追蹤與提醒

- 下次建議量測時間
- 回訪提醒
- 運動任務提醒
- 異常數值提醒
- 報名活動前提醒
+- [ ] 下次建議量測時間
+- [ ] 回訪提醒
+- [ ] 運動任務提醒
+- [ ] 異常數值提醒
+- [ ] 報名活動前提醒

 8. 健康紀錄

- 每次自評紀錄
- 每次量測紀錄
- 運動任務完成紀錄
- 健康報告下載 / 分享
- 可出示給教練、社區據點或照護人員的摘要頁
+- [ ] 每次自評紀錄
+- [ ] 每次量測紀錄
+- [ ] 運動任務完成紀錄
+- [ ] 健康報告下載 / 分享
+- [ ] 可出示給教練、社區據點或照護人員的摘要頁

 9. 家屬 / 照護者協作

- 授權家屬查看摘要
- 家屬提醒通知
- 協助預約活動
- 緊急聯絡資訊更新
+- [ ] 授權家屬查看摘要
+- [ ] 家屬提醒通知
+- [ ] 協助預約活動
+- [ ] 緊急聯絡資訊更新

 10. 無障礙與高齡友善

- 大字模式
- 高對比模式
- 簡化操作流程
- 語音提示 / 朗讀友善
- 明確的下一步按鈕
- 表單錯誤提示清楚可讀
+- [ ] 大字模式
+- [ ] 高對比模式
+- [x] 簡化操作流程
+- [ ] 語音提示 / 朗讀友善
+- [x] 明確的下一步按鈕
+- [ ] 表單錯誤提示清楚可讀
+
+## 前端專案現況 (`app/citizen-frontend`)
+
+本專案是一個基於 Vue 3 + Vite + Vuetify 3 建立的單頁應用程式 (SPA)，採用 TypeScript 撰寫，並使用 pnpm 進行 Workspace 多套件管理。
+
+### 1. 頁面路由與檔案對應
+
+目前已開發完成的路由及其對應的前端程式碼如下：
+
+- `/` (首頁/市民端主控台)：[index.vue](../app/citizen-frontend/src/pages/index.vue) ─ 提供個人健康力護照，展示健康力總分、五維健康力指標雷達圖（[HealthRadarChart.vue](../app/citizen-frontend/src/components/HealthRadarChart.vue)）與核心指標簡覽。並設有本週運動處方建議與動作明細對話框。
+- `/login` (登入頁)：[login.vue](../app/citizen-frontend/src/pages/login.vue) ─ 支援以手機號碼進行模擬登入，並包含個資條款同意確認。
+- `/self-assessment` (線上自評頁)：[self-assessment.vue](../app/citizen-frontend/src/pages/self-assessment.vue) ─ 提供包含基本資料、活動習慣、健康限制、自評結果四個步驟的引導式問卷。
+- `/appointment` (預約場次頁)：[appointment.vue](../app/citizen-frontend/src/pages/appointment.vue) ─ 顯示可報名活動列表，支援線上報名與取消，並可出示報到 QR Code。
+- `/checkin` (現場報到與量測清單頁)：[checkin.vue](../app/citizen-frontend/src/pages/checkin.vue) ─ 顯示檢測站點完成進度與 11 項量測關卡清單，當全部測量站完成後，可產出個人報告。
+- `/checkin/:code` (量測子頁面)：[checkinDetail.vue](../app/citizen-frontend/src/pages/checkinDetail.vue) ─ 用於在各個測量站出示 PID 條碼給儀器掃描，包含量測進度狀態模擬與高齡正常參考標準。
+
+### 2. 狀態管理與業務邏輯
+
+狀態管理採用 Pinia 實作在 [stores/app.ts](../app/citizen-frontend/src/stores/app.ts)：
+
+- **使用者資料 (`userProfile`)**：保存基本資料（姓名、性別、生日、身高、體重、手機號碼等）。
+- **線上自評 (`selfAssessment`)**：根據受測者輸入的慢性病數量、疼痛狀況與運動習慣，動態計算風險分級（低風險 / 需追蹤 / 建議諮詢）。
+- **活動預約 (`appointments`)**：追蹤並更新活動狀態（未報名、已報名、已報到）。
+- **關卡量測數據 (`measurements`)**：集中儲存 11 項長者體能檢測數值，並於報告產出時，依據檢測結果動態計算五維能力雷達分數與健康力總分。
+
+### 3. 現階段實作限制
+
+- **資料持久化**：目前所有使用者資料與量測數值皆保存在記憶體中（Pinia store），重新整理頁面會重置為預設 Mock 資料。
+- **後端與設備串接**：現場設備上傳及報到功能，目前以 `setTimeout` 與前端狀態按鈕進行非同步模擬交互。
+- **未實作功能**：家屬與照護者協作、歷史紀錄趨勢圖、訓練完成回填、大字/高對比無障礙模式、系統自動提醒通知等，目前保留為未來待開發項目。

 ## 使用者流程

-登入 / 建檔 → 線上自評 → 預約普測 → QR Code 報到 → 查看量測結果 → 取得運動處方 → 追蹤回訪
+目前前端專案已實作的完整流程為：
+訪客進站 → 線上自評 (免登入) 或 模擬登入 → 線上預約普測 → 模擬現場報到 (出示 QR Code) → 現場量測 (模擬數據同步) → 計算並產出健康力報告 → 個人健康力儀表板 (雷達圖與運動處方)

-訪客進站
-→ 點擊「開始自評」
-→ 建立帳號 / LINE 登入 / 手機驗證
-→ 基本資料與同意書
-→ 自評問卷
-→ 顯示初步分級
-→ 推薦普測或課程
-→ 預約場館 / 社區據點
-→ 報到 QR Code
-→ 完成普測與運動處方
-→ 4 週 / 12 週提醒回測
-→ 個人報告與獎勵點數
+### 1. 訪客自評與預約流程 (免登入狀態)
+
+1. 訪客進入首頁 `/`
+2. 點擊「開始自評」前往線上自評頁 `/self-assessment`
+3. 完成基本資料、同意書、功能習慣與健康限制自評問卷
+4. 顯示自評分級結果（低風險 / 需追蹤 / 建議諮詢），並引導點擊「立即預約」
+5. 跳轉至登入頁 `/login`（由於預約與現場量測為路由保護頁面，需先進行手機號碼登入）
+
+### 2. 市民量測與處方流程 (登入狀態)
+
+1. 於登入頁 `/login` 輸入手機號碼進行模擬登入
+2. 進入預約場次頁 `/appointment` 點擊「線上報名活動」
+3. 已報名的活動可點擊「出示 QR Code」，並透過點擊「模擬掃描報到」將狀態更新為「已報到」
+4. 進入現場量測頁 `/checkin` 開始進行 11 項長者體能普測：
+   - 可逐一進入量測細項網頁 `/checkin/:code`，出示 PID 條碼並點擊「狀態模擬」按鈕，等待 1.5 秒模擬設備數據上傳至伺服器同步。
+   - 亦可於現場量測頁直接點擊「一鍵模擬完成」快速填入 11 項健康數值。
+5. 11 項量測均完成後，點擊「產出個人健康力報告」
+6. 彈出報告計算完成提示，引導點擊前往「個人健康力儀表板」
+7. 返回首頁 `/` 查看動態計算更新後的健康力總分、五維健康指標雷達圖，以及對應分級的本週運動處方建議與動作明細。
+
+_(註：LINE 實際一鍵登入、實體設備藍牙/API 即時串接、4 週 / 12 週自動提醒回測、獎勵點數發放與報告 PDF 下載分享等流程，在現階段前端專案中皆以模擬或靜態展示。)_
+
+## 線上DEMO

 [cloudflare](https://health-platform-8u1.pages.dev/)