茶業內部管理與績效系統 — 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 輔助開發。