茶業內部管理與績效系統 — Demo
▶ 線上試用：https://yorroy123.github.io/teaops-demo/
這是我為「軟體開發兼職」職缺做的作品。職缺的工作內容是「運用 AI 輔助開發，製作績效系統及公司內部管理軟體」，所以我沒有丟一個通用範例，而是直接照這個題目做了一套可以登入、可以跑流程、可以多人同時改的系統。
我看過長信名茶的官網（evertrust-tea.com）：1971 年創立、南投自有茶廠、高雄建國一路門市、官網零售，加上商用茶／高山茶批發與企業客製（商品規劃）。所以整套 Demo 的通路、茶品、部門與指標都照這個實際營運樣貌設計 —— 庫存品項直接對照官網茶葉專區，製茶師的品質指標納入農殘送驗。
⚠️ 公司名稱與茶品品項參考長信名茶官網公開資訊；畫面上所有人員、客戶、訂單、金額、績效皆為虛構示範資料，與真實個人或內部資料無關，純粹用於展示系統能力。
先說重點
績效系統難的從來不是把表格畫出來，是這三件事：
| 難題 | 這套 Demo 怎麼處理 |
|---|
| 誰能看到誰的分數？ | 三級權限。員工只看得到自己，主管看部門，管理員看全部。而且員工在定版前看不到主管給的分數 |
| 評核要經過哪些關卡才算數？ | 五狀態流程：自評 → 主管評核 → 複核 → 定版，定版後可申訴退回。每一步都寫進稽核軌跡 |
| 兩個人同時改同一筆怎麼辦？ | 存檔前比對版本號。別人先改過就中止存檔、跳衝突，讓你選「載入對方版本」或「以我的覆蓋」 |
這三件事在純靜態網頁上實作的方式：身分存 sessionStorage（所以同一個瀏覽器的不同分頁可以是不同人），共用資料存 localStorage 當伺服器，跨分頁用 BroadcastChannel 即時同步。
建議這樣試（三分鐘）
1. 體驗權限差異
先用「林志偉（一般員工，帳號 zhiwei.lin）」登入 —— 營收圖表是鎖住的、績效清單只有自己一列、總分顯示「—」、庫存不能改。
再切換成「王美玲（系統管理員）」—— 全部解鎖。
2. 跑完一輪評核流程
用「吳建宏」（jianhong.wu）登入（待自評）→ 拉滑桿填自評 → 送出自評。
切換成「陳佳蓉」（他的主管，但陳佳蓉管的是業務部，這裡改用「王美玲」管理員）→ 評分 → 送出評核 → 複核 → 定版。
展開任一筆的「稽核軌跡」，看完整的操作紀錄與狀態轉移。
3. 製造一次版本衝突（最值得看的部分）
把這個網址在另一個分頁打開，用不同帳號登入 —— header 會顯示「同時在線 2」。
兩邊同時打開同一位員工的評核，A 分頁先存檔，B 分頁再存 → B 會跳版本衝突，資料不會被蓋掉。
登入與帳號安全
登入流程照企業內部系統的做法實作。示範帳號列在登入頁，點一下就會帶入，密碼都是 Evertrust#1971。
| 機制 | 做法 |
|---|
| 密碼儲存 | 不存明文。PBKDF2-SHA256，每個帳號有自己的 16 bytes 鹽值，迭代 10 萬次，用常數時間比對 |
| 防止帳號被列舉 | 帳號不存在和密碼錯誤顯示同一句「帳號或密碼錯誤」；帳號不存在時也照跑一次雜湊，回應時間一致 |
| 暴力破解防護 | 同一帳號連錯 5 次鎖定 5 分鐘，剩 2 次時先警告；管理員可以一鍵解除 |
| 兩步驟驗證 | 部門主管與管理員強制啟用。驗證碼 6 位數、5 分鐘失效、最多試 3 次、30 秒後才能重送。Demo 沒有簡訊閘道，所以驗證碼顯示在「模擬手機簡訊」區塊 |
| 工作階段 | 閒置 15 分鐘自動登出（最後 1 分鐘跳警告），登入滿 8 小時強制重新登入 |
| 稽核 | 登入成功／失敗、鎖定、驗證碼、登出、逾時、解除鎖定都會記錄，管理員在總覽頁看得到 |
| 密碼政策 | 至少 10 字元、需含大小寫英文／數字／符號、不可包含帳號名稱、不可沿用目前密碼；即時顯示強度與未達成的規則 |
| 其他 | 記住帳號、Caps Lock 提醒、顯示／隱藏密碼、不提供自助重設密碼（需由管理員核對身分） |
誠實說明：這是純前端 Demo，雜湊與帳號資料都在瀏覽器端，懂技術的人打開原始碼就能繞過。上面的機制是照「後端該怎麼做」寫的，正式上線時要原封不動搬到伺服器端執行。
系統模組
版面照企業後台的慣例：左側導覽依「營運／流程與報表／人資／系統管理」分組，上方工具列放麵包屑、全文檢索、待辦通知與使用者選單。手機上導覽列會收成抽屜。
| 模組 | 內容 |
|---|
| 營運總覽 | 依身分顯示不同內容：主管以上看公司營收、評核進度、庫存；一般員工看自己的業績與評核狀態 |
| 訂單管理 | 表格／看板（拖曳改狀態）／行事曆三種檢視；進階篩選（日期、金額、業務）與篩選條件標籤；系統檢視與個人「儲存檢視」；勾選後批次改狀態、批次列印出貨單、匯出選取；每頁 15 筆分頁；Excel／CSV 匯入（逐列檢查、只匯入通過的列）。含 5 月以來的歷史訂單 |
| 單筆表單頁 | 點任一筆訂單或茶品，右側打開表單頁：資料（分區欄位、可編輯，存檔前比對版本）、關聯資料（訂單 ↔ 茶品 ↔ 負責業務、同客戶歷史訂單、相關簽核單）、版本紀錄（每次修改的人、時間、每個欄位的舊值 → 新值）、留言。可用 Alt + ↑↓ 切換上下筆 |
| 茶品庫存 | 表格／圖卡兩種檢視，品項與商品圖對照官網；安全庫存水位告警；可銷售月數（庫存 ÷ 近三月月均銷量）；一般員工唯讀可申請補貨，主管以上可調整 |
| 簽核中心 | 補貨採購、特殊折扣、費用報支。關卡依條件產生：部門主管 →（金額 ≥ 3 萬、折扣、或無主管時）會計覆核；申請人不能簽自己的單（會計本人申請改送總經理）。駁回必填原因、申請人可撤回；兩個分頁同時簽時以先送出者為準。最後一關核准後自動入庫或改寫訂單金額，並寫入該筆資料的版本紀錄 |
| 報表中心 | 樞紐分析（列／欄／值自選，熱度著色、列欄總計）、業務排行、茶品銷售與週轉；全部套用資料權限，可匯出 CSV |
| 全文檢索 | Ctrl + K 開啟，一次搜尋頁面、訂單、茶品、同仁、簽核單，結果依權限過濾，方向鍵選擇、Enter 開啟 |
| 產生文件 | 出貨單預覽，可單筆或批次列印、另存 PDF（列印時只輸出單據本身） |
| 員工績效 | 流程狀態、加權評核、自評與主管評分對照、稽核軌跡、依狀態篩選、CSV 匯出（權限過濾會一併套用到匯出） |
| 帳號與權限（管理員） | 帳號狀態總覽、角色權限矩陣（各角色在每個模組的讀寫範圍）；停用／啟用、解除鎖定、重設密碼（臨時密碼只顯示一次，對方下次登入強制改密碼）。被停用或被重設的人，已登入的分頁會被立即登出 |
| 稽核紀錄（管理員） | 登入、驗證、帳號異動的完整紀錄，可搜尋、依事件篩選、匯出 CSV |
| 待辦與通知 | 鈴鐺與導覽列的數字由資料即時推導：等你評核的人、要你自評、申訴待處理、低庫存、待付款訂單、被鎖定的帳號；點一下直接跳到該筆 |
| 個人選單 | 帳號資訊、上次登入時間、是否通過兩步驟驗證、自行變更密碼（需輸入目前密碼，套用同一套密碼政策） |
績效制度的設計
兩套評核模板
如果全公司用同一張評分表，製茶師和會計永遠贏不過業務 —— 他們根本沒有業績數字。所以分成兩套：
| 業務型（批發／門市／電商／企業客製） | 權重 | | 職能型（茶廠製茶／品管／行政） | 權重 |
|---|
| 業績達成率 | 40% | | 工作產出 | 40% |
| 毛利貢獻 | 25% | | 品質穩定 | 25% |
| 新客開發 | 15% | | 流程改善 | 15% |
| 客戶滿意 | 10% | | 跨部門協作 | 10% |
| 出勤紀律 | 10% | | 出勤紀律 | 10% |
加權總分 = Σ（各項分數 × 權重）÷ 100，單項上限 130 分（超標可加分）。
等第：A ≥ 90、B ≥ 80、C ≥ 70、D < 70。
示範資料的分布是 2A / 3B / 2C / 1D —— 刻意不做成全員 A，因為一套每個人都拿 A 的績效制度沒有意義。
評核流程
待自評 ──送出自評──▶ 主管評核中 ──送出評核──▶ 複核中 ──定版──▶ 已定版
▲ │ │
└──────退回主管─────────┘ │
▲ │
└──────受理並重評──── 申訴中 ◀──申訴────┘
動作的權限綁在狀態機上，不是靠畫面藏按鈕：
| 動作 | 從 → 到 | 誰能做 |
|---|
| 送出自評 | 待自評 → 主管評核中 | 本人 |
| 代為跳過自評 | 待自評 → 主管評核中 | 管理員（避免有人不自評就把整個週期卡死） |
| 送出評核 | 主管評核中 → 複核中 | 直屬主管 / 管理員 |
| 定版 | 複核中 → 已定版 | 管理員 |
| 退回主管 | 複核中 → 主管評核中 | 管理員（必填複核意見） |
| 提出申訴 | 已定版 → 申訴中 | 本人（必填申訴理由） |
| 受理並重評 | 申訴中 → 主管評核中 | 直屬主管 / 管理員 |
幾個刻意做進去的規則：
- 沒有人可以評自己。 主管本人的評核由管理員處理 —— 程式層面直接排除，不是靠提醒。
- 員工在定版前看不到主管分數，避免流程中途互相影響。定版或進入申訴後才公開。
- 管理員可以開啟新週期，全員重設為待自評，上期分數封存進稽核軌跡（兩段式確認，不會手滑）。
技術決策
這些選擇都是為了「交付給非技術人員也能用」：
- 零相依、零建置步驟。 沒有 npm、沒有打包工具，就 4 個檔案。
- 視覺沿用長信名茶官網。 橄欖茶綠／茶褐配色、宋體標題、晨光山嵐茶園橫幅（自繪 SVG）。庫存表的茶品圖與登入頁的門市照片直接引用官網 CDN，沒有複製進這個 repo；離線開啟載不到時會自動隱藏，不影響功能。
- 連
file:// 都能跑。 刻意不用 ES module（會被 CORS 擋），改用傳統 script。下載 ZIP 解壓後點兩下 index.html 就能開。
- 身分放 sessionStorage、資料放 localStorage。 這個拆法讓同一個瀏覽器的不同分頁可以是不同使用者，多人情境才演得出來。
- 樂觀鎖（optimistic locking）。 每筆評核帶版本號，存檔前重讀共用資料比對；不一致就中止並跳衝突，而不是硬蓋。這跟真的後端做法是同一套，只是把 DB 換成 localStorage。
- 所有 storage 存取都包 try/catch。 無痕模式或封鎖 storage 時自動降級成唯讀瀏覽，不會白畫面。
- BroadcastChannel 做跨分頁同步與線上名單，不支援的瀏覽器退回
storage 事件。
- 統計數字全部即時計算，不是寫死的假數字。
- 手刻 SVG 圖表，不載任何圖表函式庫。
- 深／淺色主題：跟隨系統設定，也可手動切換，選擇會被記住。響應式，手機可用。
無障礙與配色
- 配色跑過色盲模擬與對比度驗證。淺色模式下部分色階低於 3:1，所以每張圖都附直接數值標籤與表格檢視切換 —— 資訊不會只靠顏色傳達。
- 狀態一律「顏色 + 文字」成對出現（例如「● 急需補貨」），不是只給一個紅點。
- 表格可用鍵盤 Tab / Enter 操作，折線圖可用左右方向鍵逐月查看。
測試
用 jsdom 寫了 78 項煙霧測試，涵蓋登入閘門、三種身分的可見範圍、完整評核流程、退回必填驗證、版本衝突的偵測／載入／覆蓋三條路徑、申訴、稽核軌跡、週期重設、跨分頁同步、權限過濾套用到 CSV 匯出、主題切換。對本機與正式網址各跑一次，全數通過。
寫測試的過程中抓到一個真的設計漏洞：原本員工不送自評，管理員沒有任何方法推進流程，整個週期會卡死。所以補了「代為跳過自評」。
在本機跑
git clone https://github.com/YORROY123/teaops-demo.git
cd teaops-demo
直接用瀏覽器開 index.html 即可。或起一個本機伺服器：
python -m http.server 8777
# 開 http://127.0.0.1:8777
檔案結構
teaops-demo/
├── index.html 登入畫面與主應用版面
├── assets/
│ ├── styles.css 設計 token、主題、元件樣式
│ ├── data.js 種子資料、評核模板、權限等級、流程狀態機、稽核軌跡
│ └── app.js 身分與權限、流程引擎、樂觀鎖、跨分頁同步、渲染、圖表、匯出
└── README.md
這套 Demo 還沒做的事
為了誠實起見，列出刻意跳過的部分 —— 這些才是真正上線前要處理的：
- 沒有後端與資料庫。 資料存在瀏覽器，換台電腦就沒了。真系統要 DB、備份、還原。
- 身分驗證在前端執行。 密碼雜湊、鎖定、兩步驟驗證、逾時登出的邏輯都完整，但跑在瀏覽器裡，能被繞過。正式版要移到後端，並串接公司的 SSO 與真的簡訊或 Authenticator App。
- 沒有與現有系統介接。 公司既有的進銷存或會計軟體要怎麼對帳，是另一個題目。
- 沒有通知。 真流程需要「輪到你自評了」的信件或 LINE 通知，否則沒人會記得。
- 衝突處理只做到整筆層級，沒有做到欄位級的合併。
以每天 4 小時計，把這些補到可上線，估計 2 到 4 個月。
關於我
- 姓名：（請填）
- 背景：（請填，例如：資工系畢業 / 3 年後端經驗 / 自學轉職）
- 常用工具：（請填，例如：Claude Code、Cursor、VS Code）
- 可配合時間：平日 13:00–17:00
- 聯絡方式：（請填 Email 或通訊軟體）
- 其他作品：（請填，沒有可刪掉這行）
這份 Demo 從需求理解到完成約花 (請填) 小時，過程中使用 AI 輔助開發。
