01系統概述
「全模組人資戰情室」是李奕勳擔任禾樂映像股份有限公司（HOLO+FACE Co., Ltd.）執行長特別助理期間， 以 Vibe Coding 方式獨立建置的內部人資決策工具。目的是把原本分散在人資、財會、營運三個部門、 每週要靠人工彙整的報表，重構成一份可即時查詢、可下判斷的儀表板。
系統以 8 個功能模組 組成：戰情中心、組織架構、人才招募、薪酬福利、績效評核、 教育訓練、部門管理、P&L 報表分析。每個模組在獨立的對話階段中與 AI（Gemini、GitHub Copilot） 一輪一輪生成，最後打包進同一個殼層檔案，形成一份可攜、可離線執行的單檔應用。
本文件涵蓋殼層架構、資料流程、AI 整合方式與 8 個模組的功能規格，依現存最終版原始碼
2026041301.html（530 KB、7,641 行）與同一工作區的建置歷程逆向整理，
不涉及任何真實人事、薪資與財務數值——文中出現的數字皆為系統示範資料。
02技術棧
整套系統不透過任何打包工具（Webpack / Vite）產出，所有函式庫皆以 <script> 標籤從 CDN 載入，執行期直接掛在瀏覽器的全域物件上。
| 函式庫 | 版本 | 用途 |
|---|---|---|
| React / ReactDOM | 18（production, UMD） | 8 個模組各自的元件樹與 createRoot 掛載 |
| @babel/standalone | latest | 瀏覽器內即時把 JSX 編譯成可執行的 JS，免建置流程 |
| prop-types | 15.8.1 | 元件參數型別檢查 |
| Recharts | 2.10.3（UMD） | 多數模組的圖表繪製（趨勢線、長條、圓餅） |
| Chart.js + react-chartjs-2 | — | 部門管理（Work Sheet）模組的折線／甜甜圈／圓餅圖 |
| Tailwind CSS | Play CDN | 樣式系統，透過 tailwind.config 擴充 CSS 變數主題 |
| Lucide | latest | 圖示庫 |
| marked.js | latest（延遲載入） | AI 回傳的 Markdown 內容轉 HTML 渲染 |
| 技術 | 角色 | 說明 |
|---|---|---|
| window.HR_GLOBAL_STORE | 資料匯流排 | 全域物件，保存各模組的解析結果與原始 CSV（mod00–mod07、csv01–csv07） |
| window.HR_UTILS.parseCSV | 資料解析 | 手寫 CSV 解析器：BOM 去除、逗號／Tab 自動判斷、欄位錯位校正 |
| IndexedDB | 持久化 | HR_CMD_CENTER_DB，物件庫 ModuleData，開啟頁面自動還原上次資料 |
| CustomEvent | 事件廣播 | hr-store-updated，任一模組更新資料即廣播給全體訂閱者 |
| Google Sheets 匯出 | 資料來源 | 貼上共用連結 → 組成 export?format=csv 網址 → 經公開 CORS 代理讀取 |
| Gemini API | AI 分析 | generativelanguage.googleapis.com，模型含 gemini-2.5-flash／-preview，金鑰存於使用者本機 |
03程式架構
系統不是單一 SPA，而是「一個殼層 + 8 個獨立微前端」：外殼負責導覽與外觀，內容區的每個分頁 各自是一棵完整、彼此不相依的 React 元件樹。一個模組寫壞，不會牽動其他七個。
主題系統用一組 CSS 變數（--theme-bg、--theme-primary 等）
綁進 Tailwind 設定，讓元件可以直接寫 bg-theme-card；深色模式沒有另外維護一套色票，
而是對整個 :root 套一行 filter: invert(1) hue-rotate(180deg)，
圖片與影片再反相一次抵銷，是相當俐落的取巧解法。
04資料與 AI 流程
資料匯入
AI 角色扮演分析
以「AI 智能人資監測中心」為例，按下 CHRO 分析 會把當前篩選出的資料， 包成一段類似這樣的角色扮演指令送給 Gemini：
「請以 CHRO 的角度，針對台灣的零售服務業、攝影服務業為對比，提出 10 點關鍵洞察與 10 點行動計畫。」
回傳內容以 dangerouslySetInnerHTML 渲染進卡片，載入中顯示 pulse 動畫，失敗則顯示警告框，避免白屏。
05模組規格
八個模組共用同一套資料匯流排與 AI 分析元件，各自負責不同的人資職能面向。
| 模組 | 名稱 | 核心內容 | 資料狀態 |
|---|---|---|---|
| 00 | 戰情中心 | 全域篩選、八項核心 KPI、組織擴張／人事成本趨勢、高離職風險部門、戰略風險雷達 | 即時 |
| 01 | 組織架構 | 在職／留停／離退／新進人數、平均年齡、期間異動人員清單 | 即時 |
| 02 | 人才招募 | 招募漏斗、各管道轉換率、人員結構佔比 | 待匯入資料 |
| 03 | 薪酬福利 | 固定／浮動薪資總額、人均月薪與月成本、薪資與獎金趨勢 | 即時 |
| 04 | 績效評核 | 績效等級常態分配、各項職能平均得分、需啟動 PIP 計畫人數 | 即時 |
| 05 | 教育訓練 | L1–L4（滿意度／測驗／績效提升／策略掛勾）、部門訓練資源投入 Top 5 | 即時 |
| 06 | 部門管理（Work Sheet） | 工時彙報、每日工時趨勢、工作分類組成；獨立子系統含篩選器、排序表格與 AI 四大分析按鈕 | 待匯入資料 |
| 07 | P&L 報表分析 | 總營業收入、營業毛利率、稅前淨利、每月人均生產值與人均成本 | 即時 |
模組 06・部門管理（Work Sheet）細節規格
這是唯一留有完整書面規格（原始建置指令）的模組，規格顆粒度足以還原成一份標準功能規格：
- 資料結構：CSV 五欄（日期、職稱、工作分類、工時、工作項目），內建防呆錯位校正邏輯。
- 互動元件：日期區間／職稱／分類篩選器、四張 KPI 卡（總記錄數／總工時／分類數量／職稱數量）、可點擊排序的明細表格（僅顯示前 50 筆）。
- 視覺化：每日工時趨勢折線圖、職稱佔比甜甜圈圖、工作類別分佈圓餅圖，皆隨篩選條件即時連動。
- AI 功能：CHRO 策略洞察、績效評語建議、自動化流程建議、培訓方案規劃，四顆各自對應不同 prompt 模板的按鈕。
- 容錯設計：CDN 套件載入失敗時以空白佔位或文字提示取代白屏；重複掛載前檢查並清空
__reactRoot快取，避免 React 18 的重複掛載警告。
06開發方法論
八個模組是分開、一輪一輪跟 AI 對話生出來的：每一版都另存新檔，用「日期＋序號」當檔名
（例如 2026022101.html 到 2026022105.html），
逐版存檔的方式取代傳統的 Git commit 歷程，也留下了完整的建置軌跡可回溯。
邊界指令：防止 AI 在單一大檔案裡改壞其他東西
整合進主殼層時風險最高的環節，是要求 AI 在一個 500KB+ 的檔案裡動刀，卻不能牽動其他七個模組。 實際採用的做法是每次都下極度明確的邊界指令：
「在維持主程式框架下，請將以下的程式碼打包至 02.Talent Acquisition 的分頁模組，嚴禁變更整體主框架、其他模組。」
「請保留所有 const 數據變數、文字內容與 Recharts 的參數設定。只修改 HTML 標籤中的 className 以及外層的排版容器。」
這相當於在沒有測試框架、沒有型別系統的前提下，用自然語言邊界取代單元測試——先切好模組化的責任邊界， 再要求每次修改都聲明「動了什麼、沒動什麼」。
讓 AI 反過來稽核自己的產出
專案後期新增了一個客製化 GitHub Copilot agent（.github/agents/data-structure-evaluator.agent.md），
職責是專門檢查 DB/ 資料夾的正規化程度、命名一致性與資料關聯是否合理，
並輸出「現況分析 → 優點 → 問題 → 建議 → 執行步驟」的固定格式報告。等於除了用 AI 寫程式，
也讓另一個 AI 角色定期審查資料架構本身。
07已知限制與後續方向
誠實記錄這套系統的邊界，也是它後來演化成 CMoney 那套正式架構的起點。
- !
API 金鑰暴露於前端：Gemini 金鑰存在瀏覽器
localStorage／IndexedDB，直接從客戶端呼叫，會出現在瀏覽器開發者工具的網路請求中——適合單機示範與內部工具，不適合對外公開部署。 - !
依賴公開 CORS 代理：Google 試算表的跨網域讀取，繞道一個第三方公開服務（
api.allorigins.win），沒有官方 SLA 保證，服務中斷會直接影響資料匯入。 - !
版本控制以檔名流水號取代 Git：換取零建置與高度可攜性，代價是無法做傳統的 diff、branch 或 code review。
- !
無自動化測試：正確性仰賴嚴格的 prompt 邊界指令與人工驗證畫面，而非單元測試或 CI。
- !
資料只存在單一瀏覽器：IndexedDB 屬於本機儲存，換裝置、換瀏覽器不會同步，也沒有多人協作的資料層。
這幾條限制，後來在 CMoney 的 HR Data Lake 專案裡逐一被正式化：PostgreSQL / SQL Server 取代 IndexedDB，MCP Server 搭配 Google OAuth 五級分權取代前端明碼金鑰，每日排程抽取取代 手動貼連結。同一套「用 AI 把自己動手蓋系統」的判斷力，換了一套更嚴謹的技術棧。