tw-progress-report｜案場進度彙報
建案案場、工程或小團隊每週（或每天）都要跟主管、業主回報進度：做到哪、卡在哪、下週要做什麼、客戶跟得怎樣。
Word 檔改來改去、LINE 打一長串又難看？這個網頁幫你：
- 一個檔放好幾期：新到舊排好，下拉選單切換期別
- 自動算 完成率、各狀態幾件、逾期幾件，逾期的項目標紅
- 本期 vs 上期：新完成了什麼、誰卡關了、計畫轉成待辦、新客戶、客戶進展，一眼看出
- 客戶姓名預設遮蔽（王大明先生 → 王先生 或 王○○），文字裡的手機號碼也會遮掉
- 網頁上直接 新增／修改／刪除，存在這台電腦的瀏覽器；可 匯出／匯入 JSON 備份
- 一鍵 產生 LINE 文字版，複製貼到群組就好；也能 列印／存 PDF
免安裝、免伺服器、不連網路：雙擊 index.html 就能用。
線上試用：https://larryveryhandsome.github.io/tw-progress-report/（示範資料全部是假的）
適合誰
- 建案案場：使照進度、車位配置、交屋準備、來客追蹤，每週回報建設公司／代銷主管
- 裝修工程：各工項進度、卡在哪個廠商、下週施工計畫，回報業主
- 清潔派工：本週完成的案件、待排的現場、客戶回訪
- 小團隊週報：任何「每週要交一份進度」的團隊
5 分鐘開始
- 下載這個專案（綠色 Code 按鈕 → Download ZIP），解壓縮。
- 雙擊
index.html。一開始會顯示「示範建案」3 期的假資料，先點點看。
- 用記事本打開
config.js，把 project（案場名稱）、team（團隊名稱）改成你的，存檔、重新整理網頁。
- 勾選右上角 「編輯模式」：
- 按「＋ 新增一期」，日期會自動接在上一期後面，並帶入上期沒完成的項目、下期計畫（轉成待辦）、客戶追蹤
- 每個區塊按「＋ 新增」、每一筆按「編輯」「刪除」
- 寫好後按 「產生 LINE 文字版」→「複製」，貼到 LINE；或按 「列印／存 PDF」。
- 記得偶爾展開最下面的「資料」按 「匯出 JSON」 備份（資料只存在這台電腦的瀏覽器裡）。
想把示範資料清掉：展開「資料」→「清除這台電腦存的資料」，再「＋ 新增一期」。
換電腦：舊電腦「匯出 JSON」，新電腦「匯入 JSON」。
⚠ 個資提醒（請一定要看）
彙報常常被轉傳、截圖、印出來放桌上。依《個人資料保護法》，客戶的姓名、電話都是個人資料：
- 原則上不要放客戶全名、電話、身分證字號、地址，只寫「姓氏＋先生／小姐」或戶別代號（例如
B5 王先生）就好。
- 網頁預設會遮蔽客戶姓名（
maskClients: 'title'），畫面、列印、LINE 文字版都套用；文字裡的手機號碼會變成 0900-***-***。
- 遮蔽只是最後一道保險，不是讓你放心寫全名的理由：編輯表單、匯出的 JSON 和瀏覽器儲存裡仍是原文。
- JSON 檔不要上傳到公開的地方（包含公開的 GitHub repo）；
.gitignore 已預設排除 data/*.json（範本除外）。
- 公用電腦用完請按「清除這台電腦存的資料」。
資料格式（data/report.example.json）
一個檔 = 一個專案，裡面的 periods 是很多期，順序不拘（網頁會自動新到舊排）。
{
"project": "示範建案",
"team": "示範行銷團隊",
"periods": [
{ "start": "2026-10-12", "end": "2026-10-18", "summary": "……",
"progress": [], "todos": [], "plans": [], "completed": [], "clients": [] }
]
}
| 區塊 | 欄位 | 說明 |
|---|
| 期別 | start、end、title、summary | 日期 2026-10-12，也看得懂 2026/10/12、115/10/12（民國）；title 空白就顯示日期 |
progress 工作進度 | item、status、owner、due、priority、note | status 填設定裡的 key 或名稱（doing 或 進行中 都可以） |
todos 待辦事項 | task、status、owner、due、priority、note | 同上 |
plans 下期計畫 | plan、owner、due、details | 新增下一期時會轉成待辦 |
completed 本期完成 | item、date、owner、note | 上期的項目出現在這裡，「本期 vs 上期」會算成新完成 |
clients 客戶追蹤 | client、owner、stage、next、progress | stage 階段（初次來訪／議價／簽約…），next 下次跟進日 |
priority：high／normal／low（或 高／中／低），可以不填。- 欄位缺了會自動補空白；日期看不懂會清空並把原文移到說明；狀態不在設定裡會改成第一個狀態。網頁上方會列出修正了哪些地方。
- 舊版格式（
reports 陣列＋dateRange: "2025年4月2日 - 4月4日"＋最外層 completed、clients）也讀得進來，person 會當成負責人。
設定（config.js）
| 設定 | 說明 |
|---|
title | 標題，接在專案名稱後面（預設「工作進度彙報」） |
project | 專案／案場名稱；資料檔有 project 時以資料檔為準 |
team | 團隊名稱，顯示在副標題和 LINE 文字版 |
statuses | 狀態清單：key、label、icon（LINE 用）、color；done: true 代表算完成。可自己加，例如「待驗收」 |
priorities | 優先度清單 |
maskClients | 客戶姓名遮蔽：'title' 王先生（預設）、'circle' 王○○、'none' 不遮蔽（原則上不建議） |
overdueBase | 逾期基準：'period' 該期結束日（預設，彙報當時的角度）、'today' 今天 |
storageKey | 瀏覽器存資料的名稱；同一台電腦要管兩個案場，各複製一份資料夾並改成不同名稱 |
給開發者
index.html 畫面
css/style.css 樣式（含深色模式、手機版、列印）
config.js 設定
data/sample.js 網頁內建的示範資料（和範本 JSON 內容相同，測試會檢查）
data/report.example.json JSON 範本
js/report.js 核心（純函式）：資料驗證／整理、排序、統計、逾期、兩期比較、姓名遮蔽、LINE 文字、HTML 跳脫
js/app.js 畫面邏輯（只用 textContent 放使用者文字，不組 HTML 字串）
tests/ 單元測試（node:test，不用裝任何套件）
npm test
- 不用任何外部套件、CDN 或網路資源，
file:// 直接開就能跑。
localStorage 讀寫都包在 try/catch，無痕模式或被封鎖時網頁照常顯示（只是不會記住）。- 改了
data/report.example.json 記得同步 data/sample.js（測試會比對兩者）。
注意事項
- 示範資料的案場、人員、客戶全部是虛構的。
- 完成率、逾期等統計原則上僅供參考，實際進度以現場與各方確認為準。
已知問題
- 報告裡常有客戶姓名電話，貼到 LINE 前請自行確認。
- 完成率、逾期原則上僅供參考。
- 只實測 Chromium（桌機與 375 寬）。
完整的發布前檢查（八道閘門）見 RELEASE_CHECK.md。
需要哪些金鑰？
不需要任何金鑰、帳號或付費服務。 全部在你的瀏覽器裡執行，不連網、不呼叫任何 API。所以沒有 docs/金鑰申請.md。
授權
Apache License 2.0
🛠️ 需要客製化？
這個工具是開源的，可以免費使用。如果你想要：
- 改成符合你們公司的流程、欄位或品牌
- 串接你現在在用的系統（LINE、Google 表單、POS、會計軟體……）
- 幫你安裝、架站、教學，或長期維護
歡迎加 LINE 跟我們聊。我們會依需求的範圍與複雜度報價，原則上以實際報價單為準。
- 💬 LINE：林其衞（請註明「進度彙報 客製化」）
- 🏢 留白事務所：網頁設計、AI 自動化、房仲遠端助理
- 👤 作者：留白事務所
