Vantage
後台管理系統設計
你的後台，長你業務需要的樣子
假想情境：Vantage 是一個 B2B 訂閱制協作工具，前台功能完整、介面精緻，但後台卻是三個外掛拼在一起的管理頁面。想查一個用戶的付款狀態，要開四個視窗；想寄通知要登入另一套系統；想開關一個功能要修改設定檔——每個操作都是繞路。這是很多成長中產品的共同卡點：前台做得漂亮，後台卻是工程師的後院。
好的後台設計從業務流程出發，不是從資料表出發。常見場景有兩種：(1) 已有前台、需要一套適合非技術人員操作的後台介面；(2) 新 SaaS 產品從零開始，後台需求一起規劃。無論哪種，架構都拆成三層：總覽指標（讓業主看懂自己的數字）、會員控制（狀態、方案、通知一個畫面搞定）、模組設定（業主自己就能開關功能、調整規則，不用找工程師）。
每個用戶的狀態、方案、加入日期，一個畫面搞清楚
3,000 個用戶的產品，找一個特定用戶平均要操作 4–6 步。好的會員管理介面把搜尋、篩選、狀態一次攤開，把「看看這個用戶到底怎麼了」從 5 分鐘壓到 15 秒。付費 / 免費 / 暫停一眼分清，操作在行內完成，不用跳頁。
搜尋放在最顯眼的地方
後台的第一需求幾乎都是「找到某個特定用戶」。搜尋框放在 header 正中間，不是藏在 filter 選單裡——省去業主每次都要找搜尋在哪裡。
狀態用顏色說話
活躍 / 暫停 / 待確認用綠 / 紅 / 黃直接區分，不需要閱讀文字才能判斷。業主掃一眼就能感知整個用戶列表的健康狀態。
常用操作在列表行內完成
「升級方案」「暫停帳號」「寄通知」等高頻操作直接在表格行內，不需要進入用戶詳情頁再找按鈕。把 3 次點擊壓成 1 次。
業主自己就能開關功能、調規則，不用找工程師
每個客戶的後台需求不一樣。有的需要 LINE 通知、有的需要 SMS、有的需要 ECPay、有的要 Stripe。模組化設計讓業主用切換按鈕控制哪些功能開啟，細節設定（觸發條件、訊息模板、發送上限）在同一個介面完成，不需要改程式碼或找工程師。
設定頁是業主的操作介面，不是工程師的 config 檔
功能開關用切換鈕（不是 feature flag）、觸發條件用勾選框（不是 JSON）、訊息模板用文字輸入框（不是程式碼編輯器）。讓非技術的業主有信心自己操作，不需要打電話給我們。
模組可以獨立啟用 / 停用
客戶 A 只需要 LINE 通知、不需要 SMS；客戶 B 需要 Stripe 但不用 ECPay。模組化讓我們可以用同一套後台框架，交付對每個客戶完全不同的功能組合——後台跟著業務長，不是反過來。
MRR、流失率、方案分佈——決策數字一眼到位
企業級後台的核心不是管理介面，是讓決策者在 30 秒內看懂自己的業務現況。MRR 折線圖顯示成長趨勢、方案分佈堆疊條顯示升級機會、最高貢獻帳號讓業務知道要優先維護哪些客戶。資料是即時的，不是 CSV 匯出再開 Excel。
MRR 優先於 GMV
SaaS 業務的健康指標是 MRR（每月經常性收入），不是 GMV 或總流水。MRR 變化才能反映訂閱制業務的真實成長或衰退，放在最顯眼的位置讓 CEO 和投資人每次打開後台第一眼就看到。
流失率顯示在 stats bar
流失率是 SaaS 業務最容易被忽視、傷害最大的數字。把它和 MRR、成長率放在同一排——讓它不可能被忽略。如果只在報表深處才能查到，決策者永遠不會主動去看。
哪個功能用最多 Token、花最多錢——有數字才有辦法優化
導入 AI 功能最常見的問題：月底帳單比預期高、不知道哪個功能在吃掉成本、Haiku 和 Sonnet 的比例沒有最佳化。AI 用量儀表板讓工程師和業主都看得到：每日呼叫量依模型分色、功能用量占比、費用 vs 預算進度。比省 GPT-4 費用的 62% 不是靠猜測，是靠這個頁面做出的決策。
依模型分色的堆疊長條圖
Haiku 和 Sonnet 的費用差距巨大——同一個功能用 Haiku 比 Sonnet 省 80%。把兩個模型用不同顏色疊在同一根柱子裡，工程師一眼就能看出哪天 Sonnet 呼叫量異常飆高，立刻查原因。
側欄顯示預算進度
把月份費用 vs 預算的進度條放在 sidebar 永久顯示，而不是藏在設定頁。每次打開 AI 用量頁面都能看到「已用 61%」——讓財務異常在還有時間應對的時候被發現。
這個方案會用的工具
- Next.js 15
- Tailwind CSS
- Supabase (PostgreSQL)
- NextAuth / Lucia
- LINE Messaging API
- Resend
- ECPay / Stripe
- Vercel