About · Portfolio Demo
這是一個真實交接網站的作品集展示版。原站是我離職前為前公司同事打造的業務交接工具站——把一個人腦中的整套業務流程，變成一個開箱即用的網站。此版本已全面去識別化：所有人名、公司、機構、案件與數據均為虛構，計畫與單位名稱皆為代稱。
§01這是什麼Context
交接的難題是：文件寫得再厚，接手的人還是不知道「現在該做哪一步」。所以這個站把每項業務做成會自己排程、自己提醒、自己產文件的工具：泳道流程圖告訴你每一步寄哪封信、案件追蹤台把時程變成待辦、證書小工具直接產出 Office 檔。
整站是純前端：沒有框架、沒有 build、沒有資料庫。複製整個資料夾就能帶走，雙擊也能離線開。原站搭配一支 130 行的 Python 啟動器，就有自動存檔、多人在線與衝突保護。
DISCLAIMER本站所有資料均為程式產生的虛構範例（委員名冊、百餘家工廠、往來信件、附件文件皆是）。與任何真實人物、公司、機關雷同純屬巧合。原始碼與原站資料不公開。
§02怎麼逛Tour
建議動線（左側目錄隨時切換）；幾乎每一頁都可以實際編輯，改動只存在你的瀏覽器，點左下 DEMO 鈕可一鍵還原。多數頁面右上有 📖 操作說明 抽屜。
✉現評邀約行程
泳道流程引擎：直欄＝對象、往下＝時間，點卡片有信件範例（變數自動代入）、範本檔與做法圖解。
◉收件工廠總覽
案件追蹤台：拖入申請表自動建檔、錨點日期自動排時程待辦、選委員、預覽寄信、產出六種文件。
☰委員資料庫
委員主檔：搜尋、組別篩選、就地編輯；其他頁的委員資料都從這裡取。
✓證書製作小工具
把通過工廠攤成 94 欄案況表（綠＝自動抓、藍＝建議、紅＝手填），並在瀏覽器裡直接產出證書 pptx／契約書 docx。
◎追蹤查核輔助
每季清查在證工廠：上傳報告書自動建名冊，比對結果三色分級、一鍵複製回報告表格。
⚙小工具區
PDF 排序／編輯（含中文字型嵌入）、批次寄信小幫手、人員出差統計——各自獨立的順手工具。
§03技術重點How It Works
- 零依賴純前端：vanilla JS，資料存成 data.js 靜態載入；本機版由 Python 啟動器以 PUT 寫回檔案，帶 X-Base-Mtime 樂觀鎖（409 擋覆寫）＋心跳在線名單，多人同用不打架。
- 這個 demo 的做法：部署到靜態託管後沒有後端，改用一支 demo.js 墊片攔截存檔請求寫進 localStorage——頁面程式碼與本機版一行未改，重新整理後你的修改仍在。
- 瀏覽器內產檔：證書 pptx、契約書 docx、得分總表 xlsx 都是前端用 JSZip 直接改 Office XML 生成；docx／xlsx 也能直接在頁內預覽。
- 設計系統：藍圖方格＋紙質雜訊、印章編號、墨水滑入 hover；全站目錄與署名由 nav.js 單一來源長出。
- AI 結對開發：整站由我與 Claude（Anthropic 的 AI）結對完成——我出需求、流程知識與驗收，AI 寫碼，每個功能都經真實業務使用打磨。
§04Demo 與本機版的差異Limitations
以下功能需要本機啟動器（Windows COM／本機檔案系統／外部 API 金鑰），線上 demo 停用，按了會明確告知：
- 一鍵建立 Outlook 草稿／同串回覆（本機 Outlook COM）
- Word 轉 PDF 產檔（本機 Word）
- 高鐵班次表自動查詢（交通部 TDX API）
- 環保裁罰／職災公開資料自動比對下載
- 從本機 Excel 名單自動同步委員主檔