diff --git a/.agents/mcp_config.json b/.agents/mcp_config.json new file mode 100644 index 0000000..e48f53b --- /dev/null +++ b/.agents/mcp_config.json @@ -0,0 +1,7 @@ +{ + "mcpServers": { + "vuetify-mcp": { + "serverUrl": "https://mcp.vuetifyjs.com/mcp" + } + } +} \ No newline at end of file diff --git a/.codex/config.toml b/.codex/config.toml new file mode 100644 index 0000000..e0bfb51 --- /dev/null +++ b/.codex/config.toml @@ -0,0 +1,6 @@ +[mcp_servers.vuetify-mcp] +url = "https://mcp.vuetifyjs.com/mcp" + +[mcp_servers.chrome-devtools] +command = "npx" +args = ["chrome-devtools-mcp@latest", "--browserUrl", "http://localhost:9222"] diff --git a/.gitignore b/.gitignore index 533b71c..f5ea7c8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,13 @@ -.agents .cachebro -.codex -opencode.json .eslintcache node_modules dist +# 各機器自己的環境變數覆寫（例如本機後端位址），不應進版控 +*.local + *:Zone.Identifier + +doc diff --git a/app/citizen-frontend/.env.example b/app/citizen-frontend/.env.example index 5b3652d..d327c31 100644 --- a/app/citizen-frontend/.env.example +++ b/app/citizen-frontend/.env.example @@ -1,19 +1,19 @@ # 後端 API base URL；留空則使用同網域的相對路徑 /api # -# 目前的後端沒有開放 CORS，瀏覽器直接跨網域呼叫會被擋下（OPTIONS preflight 回 405、 -# 回應也沒有 Access-Control-Allow-Origin）。因此本機開發改用下面的 API_PROXY_TARGET +# 正式站：前端與後端（/service）部署在同一台 IIS 的同一個站台/port， +# 兩者同源，不會有 CORS 問題。設定值見 .env.production（VITE_API_BASE_URL=/service/api）， +# pnpm build 會自動套用，這裡不用另外處理。 +# +# 本機開發：後端目前沒有開放 CORS，瀏覽器直接跨網域呼叫會被擋下（OPTIONS preflight +# 回 405、回應也沒有 Access-Control-Allow-Origin）。改用下面的 API_PROXY_TARGET # 讓 dev server 轉發 /api，這裡的 VITE_API_BASE_URL 留空即可，不要直接填後端網址。 # -# 本機開發：複製這份檔案為 .env.local（已在根目錄 .gitignore 以 *.local 排除，不進版控）， +# 複製這份檔案為 .env.local（已在根目錄 .gitignore 以 *.local 排除，不進版控）， # 填入內網後端位址，例如： # API_PROXY_TARGET=http://192.168.89.54:9004/service/api # VITE_API_BASE_URL= -# -# 正式站（Cloudflare Pages）：後端目前是內網位址，Cloudflare 的邊緣節點連不到， -# 尚未有可用的正式站串接方式（例如另開對外網址、或架 Cloudflare Tunnel）， -# 待確定後再設定 Cloudflare Pages 專案的 Settings → Environment variables。 VITE_API_BASE_URL= # 後端尚未完成前保持 true，改為 false 才會實際發出 API 請求 -# 本機串接測試請在 .env.local 覆寫為 false +# 本機串接測試請在 .env.local 覆寫為 false；正式站見 .env.production VITE_USE_MOCK=true diff --git a/app/citizen-frontend/.env.production b/app/citizen-frontend/.env.production new file mode 100644 index 0000000..3b0dfd3 --- /dev/null +++ b/app/citizen-frontend/.env.production @@ -0,0 +1,5 @@ +# 正式站設定：前端與後端（/service）部署在同一個 IIS 站台/port， +# 直接用相對路徑打後端，不需要主機名稱，也不會有 CORS 問題。 +# pnpm build 預設走 production mode，會自動套用這份檔案。 +VITE_API_BASE_URL=/service/api +VITE_USE_MOCK=false diff --git a/app/citizen-frontend/public/web.config b/app/citizen-frontend/public/web.config new file mode 100644 index 0000000..1831378 --- /dev/null +++ b/app/citizen-frontend/public/web.config @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/doc/PLAFORM_MODULES.md b/doc/PLAFORM_MODULES.md deleted file mode 100644 index 2102d26..0000000 --- a/doc/PLAFORM_MODULES.md +++ /dev/null @@ -1,81 +0,0 @@ -# 五端一體的平台模板 - -### 首頁導覽以市民服務為主，登入後依角色切換工作台。 - -- 市民端 [x] -- 場館端 -- 政策端 -- 研究端 -- 企業 ESG - -## 市民端：健康護照與預約入口 - -看見體測結果、課程進度、運動護照點數，完成自評、預約、報到與回測。 -個人健康檔與目標設定、快速自評、普測預約、處方與課程建議、追蹤回測。 -自評邏輯可以分兩層：一般成人版本與 65+ 版本。65+ 版本可對接台灣已經成熟的「量六力」思路，也就是認知、行動、營養、視力、聽力、憂鬱六大面向，並在結果異常時直接導向附近醫療院所、社區據點或場館課程。 - -- 3 分鐘自評與量六力入口 -- 功能雷達圖與趨勢報表 -- 個人化運動處方與課程推薦 -- 場館地圖、預約、提醒與報到 QR Code - -## 場館端：服務流程工作台 - -把「運動中心的現場流程」數位化 - -管理報到、預約、設備使用、課程名單、教練回報與異常提醒。 - -- 今日報到與普測排程 -- 課程與教練名單管理 -- 測驗數據輸入與審核 -- 高風險提醒與轉介紀錄 - -## 政策端：城市健康治理儀表板 - -看參與率、回測率、區域差異、資源配置與高風險族群覆蓋。 - -- 行政區／里別參與熱區 -- 年齡、性別、功能類型交叉分析 -- 場館服務量與資源缺口 -- 月報、季報與年度成效輸出 - -## 研究端：匿名化資料與分析申請 - -累積去識別化資料，支援運動科學、健康促進與功能老化研究。 - -- 資料集目錄與欄位字典 -- IRB／資料使用申請流程 -- 群體趨勢與模型驗證 -- 資料下載紀錄與稽核軌跡 - -## 企業 ESG 端：公益普測與成效報告 - -把企業贊助轉化為可追蹤的社區健康服務與量化社會效益。 - -- 贊助方案與場次管理 -- 受益人次、追蹤率與改善指標 -- 企業品牌露出與公益故事 -- 年度 ESG 成效報告下載 - -## 公益普測贊助計畫 - -企業買公益名額，社區得健康服務，城市累積健康資料。 - -| 共好種子企業 | 社區守護企業 | 健康力行動企業 | 城市健康企業 | 年度 ESG 夥伴 | -| -------------- | --------------------- | --------------------- | ---------------- | ---------------------------- | -| NT$98,000 起 | NT$280,000 起 | NT$480,000 起 | NT$980,000 起 | NT$1,500,000 起 | -| 100 人公益普測 | 300 人普測 + 群體報告 | 300 人普測 + 4 週追蹤 | 1,000 人巡迴普測 | 多場次、多族群、年度成果報告 | - -### 洽談合作 - -邀請企業成為健康共好夥伴 - -從 100 人公益普測包開始，打造可追蹤、可擴展的 ESG 健康促進行動。 - -### 合作洽詢 - -運動玩轉健康力 - -功能儲備 × 健康閉環 × 城市運動健康網絡 - -資料安全 隱私權政策 成效透明 專業團隊 diff --git a/doc/PRD.md b/doc/PRD.md deleted file mode 100644 index c62f2f4..0000000 --- a/doc/PRD.md +++ /dev/null @@ -1,184 +0,0 @@ -# 運動玩轉健康力 - -## 頁面路由結構 - -```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/) diff --git a/opencode.json b/opencode.json new file mode 100644 index 0000000..2ed2257 --- /dev/null +++ b/opencode.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://opencode.ai/config.json", + "mcp": { + "vuetify-mcp": { + "type": "remote", + "url": "https://mcp.vuetifyjs.com/mcp" + } + } +} \ No newline at end of file