diff --git a/app/citizen-frontend/src/pages/self-assessment.vue b/app/citizen-frontend/src/pages/self-assessment.vue index 288d013..d555f2a 100644 --- a/app/citizen-frontend/src/pages/self-assessment.vue +++ b/app/citizen-frontend/src/pages/self-assessment.vue @@ -329,7 +329,7 @@ to="/appointment" variant="flat" > - 立即預約普測 + 立即預約 diff --git a/doc/PRD.md b/doc/PRD.md index 500b907..c62f2f4 100644 --- a/doc/PRD.md +++ b/doc/PRD.md @@ -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/)