# 運動玩轉健康力

## 頁面路由結構

```text
/
├── /login
├── /self-assessment
├── /appointment
├── /checkin
└── /checkin/:code
```

## 路由對應頁面

```text
/
├── /                     首頁 / 市民端主控台
├── /login                登入頁
├── /self-assessment      線上自評頁
├── /appointment          預約場次頁
├── /checkin              現場報到與量測清單頁
└── /checkin/:code        量測子頁面
    ├── /checkin/BloodPressure
    ├── /checkin/BodyFat
    ├── /checkin/GripStrength
    ├── /checkin/Sit5x
    ├── /checkin/Sit30s
    ├── /checkin/StepTest
    ├── /checkin/ArmTest
    ├── /checkin/BackTest
    ├── /checkin/SitReachTest
    ├── /checkin/UpGo8ft
    ├── /checkin/OneLegTest
    └── /checkin/ResultReview
```

## 預計功能

1. 帳號與身分

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

2. 健康自評

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

3. 活動與預約

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

4. 現場量測結果

- [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) → 現場量測 (模擬數據同步) → 計算並產出健康力報告 → 個人健康力儀表板 (雷達圖與運動處方)

### 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/)