skytek/sports-empower-hub

Fork 0

Files

T

skytek_xinliang 84df30c667 fix: btn string

2026-06-24 09:06:04 +08:00

8.0 KiB

Raw Blame History

運動玩轉健康力

頁面路由結構

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

路由對應頁面

/
├── /                     首頁 / 市民端主控台
├── /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

預計功能

帳號與身分

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

健康自評

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

活動與預約

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

現場量測結果

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

個人健康力儀表板

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

運動處方

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

追蹤與提醒

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

健康紀錄

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

家屬 / 照護者協作

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

無障礙與高齡友善

大字模式
高對比模式
簡化操作流程
語音提示 / 朗讀友善
明確的下一步按鈕
表單錯誤提示清楚可讀

前端專案現況 (`app/citizen-frontend`)

本專案是一個基於 Vue 3 + Vite + Vuetify 3 建立的單頁應用程式 (SPA)，採用 TypeScript 撰寫，並使用 pnpm 進行 Workspace 多套件管理。

1. 頁面路由與檔案對應

目前已開發完成的路由及其對應的前端程式碼如下：

/ (首頁/市民端主控台)：index.vue ─ 提供個人健康力護照，展示健康力總分、五維健康力指標雷達圖（HealthRadarChart.vue）與核心指標簡覽。並設有本週運動處方建議與動作明細對話框。
/login (登入頁)：login.vue ─ 支援以手機號碼進行模擬登入，並包含個資條款同意確認。
/self-assessment (線上自評頁)：self-assessment.vue ─ 提供包含基本資料、活動習慣、健康限制、自評結果四個步驟的引導式問卷。
/appointment (預約場次頁)：appointment.vue ─ 顯示可報名活動列表，支援線上報名與取消，並可出示報到 QR Code。
/checkin (現場報到與量測清單頁)：checkin.vue ─ 顯示檢測站點完成進度與 11 項量測關卡清單，當全部測量站完成後，可產出個人報告。
/checkin/:code (量測子頁面)：checkinDetail.vue ─ 用於在各個測量站出示 PID 條碼給儀器掃描，包含量測進度狀態模擬與高齡正常參考標準。

2. 狀態管理與業務邏輯

狀態管理採用 Pinia 實作在 stores/app.ts：

使用者資料 (userProfile)：保存基本資料（姓名、性別、生日、身高、體重、手機號碼等）。
線上自評 (selfAssessment)：根據受測者輸入的慢性病數量、疼痛狀況與運動習慣，動態計算風險分級（低風險 / 需追蹤 / 建議諮詢）。
活動預約 (appointments)：追蹤並更新活動狀態（未報名、已報名、已報到）。
關卡量測數據 (measurements)：集中儲存 11 項長者體能檢測數值，並於報告產出時，依據檢測結果動態計算五維能力雷達分數與健康力總分。

3. 現階段實作限制

資料持久化：目前所有使用者資料與量測數值皆保存在記憶體中（Pinia store），重新整理頁面會重置為預設 Mock 資料。
後端與設備串接：現場設備上傳及報到功能，目前以 setTimeout 與前端狀態按鈕進行非同步模擬交互。
未實作功能：家屬與照護者協作、歷史紀錄趨勢圖、訓練完成回填、大字/高對比無障礙模式、系統自動提醒通知等，目前保留為未來待開發項目。

使用者流程

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

1. 訪客自評與預約流程 (免登入狀態)

訪客進入首頁 /
點擊「開始自評」前往線上自評頁 /self-assessment
完成基本資料、同意書、功能習慣與健康限制自評問卷
顯示自評分級結果（低風險 / 需追蹤 / 建議諮詢），並引導點擊「立即預約」
跳轉至登入頁 /login（由於預約與現場量測為路由保護頁面，需先進行手機號碼登入）

2. 市民量測與處方流程 (登入狀態)

於登入頁 /login 輸入手機號碼進行模擬登入
進入預約場次頁 /appointment 點擊「線上報名活動」
已報名的活動可點擊「出示 QR Code」，並透過點擊「模擬掃描報到」將狀態更新為「已報到」
進入現場量測頁 /checkin 開始進行 11 項長者體能普測：
- 可逐一進入量測細項網頁 /checkin/:code，出示 PID 條碼並點擊「狀態模擬」按鈕，等待 1.5 秒模擬設備數據上傳至伺服器同步。
- 亦可於現場量測頁直接點擊「一鍵模擬完成」快速填入 11 項健康數值。
11 項量測均完成後，點擊「產出個人健康力報告」
彈出報告計算完成提示，引導點擊前往「個人健康力儀表板」
返回首頁 / 查看動態計算更新後的健康力總分、五維健康指標雷達圖，以及對應分級的本週運動處方建議與動作明細。

(註：LINE 實際一鍵登入、實體設備藍牙/API 即時串接、4 週 / 12 週自動提醒回測、獎勵點數發放與報告 PDF 下載分享等流程，在現階段前端專案中皆以模擬或靜態展示。)

線上DEMO

cloudflare

8.0 KiB Raw Blame History Unescape Escape