益盛科技為 ERP 服務業者客製化開發 B2B 雲端單據協作管理系統，以 Vue 3 + TypeScript 進行全端軟體開發，整合廠商自助註冊、兩段式審核發送、樞紐分析視覺化報表，全面支援雲端與企業自建地端雙模式部署，90 個工作天完成 27 頁面全數交付，正式上線後提供一年免費保固與技術支援。
CloudLink
雲端單據協作平台
為 ERP 服務業者打造的 B2B 雲端單據交換平台，整合寄收件流程、廠商協作審核機制與雙模式部署， 取代跨企業的人工文件往返作業。
專案背景
本案客戶為台灣的 ERP 服務商，長期協助製造業客戶進行數位轉型。 他們觀察到：供應商與採購方之間的單據交換——採購單、出貨單、對帳單—— 大量仰賴 Email 附件或紙本傳真，進度追蹤全靠人工，稽核時往往找不到明確的傳送紀錄。
客戶委託益盛科技開發一套專屬的 B2B 雲端單據傳送平台， 讓雙方企業透過統一的入口完成文件收發、審核與存檔，並支援地端（企業自建主機）與雲端雙模式， 適應不同規模客戶的 IT 環境。
建置前的第一步
正式開發前，我們透過一場深度需求訪談，與客戶現場釐清系統的核心邏輯。 這場會議決定了後續整個開發階段的方向。
確認系統角色與權限邊界
釐清「寄件方（地端企業）」與「收件方（協力廠商）」的操作差異：地端帳號直接存取後台完整功能；雲端廠商帳號依群組設定看到不同選單，兩套登入入口各自獨立。
定義單據傳送的兩段式流程
第一階段：使用者於「設定」頁完成表單欄位對應後，到「單據新增」上傳 Excel 並選擇接收廠商；第二階段：主管審核通過後正式發出，接收方才能看到並回覆。這個兩段式審核是整個系統的核心業務流程。
規劃 API 欄位映射機制
不同廠商的 ERP 欄位名稱不一致（例如「採購單號」vs「PO Number」），因此設計 Excel 映射表讓使用者自訂欄位對應，後端以標準化欄位 + Cloud ID 識別各公司資料，確保傳輸正確性。
選定視覺設計方向
我們提供六套參考模板供客戶評比，最終確認採用深色管理後台風格——強對比色彩、清晰的資料表格配置，符合企業後台的專業感，同時支援從 1280px 桌機到手機的響應式佈局。
使用者需求與導覽設計
系統服務兩類主要使用者：地端企業的內部操作人員（有完整後台權限） 與外部協力廠商（透過雲端帳號自助進行單據收發）。 UI/UX 檢核表共規劃 27 個頁面，分屬六大模組， 每個模組的選單項目依使用者群組動態產生。
寄件服務・寄件待審
待審清單以紅點標示未讀項目，每筆顯示接收公司、單據類型（採購單／技術文件）、傳送狀態與單據碼。支援勾選批次操作：確定送出、刪除、標示已讀，一次處理多筆。
寄件服務・寄件備份（明細）
單據明細頁完整列出各行項目：單據日期、單據碼、序號、品號、品名規格、單價、數量、預交日、急件預交日、通訊地址與備註欄，並提供「匯出 .xlsx」按鈕供存檔或對帳使用。
收件服務・已收單據（明細）
三個快捷操作置於頁首：匯出 .xlsx、交期回覆（廠商可直接填寫最後交日與分批交貨）、產出出貨單。明細表格支援行內編輯，廠商不需要另開視窗即可完成回覆。
協力廠商・審核管理
進階搜尋列提供關鍵字、職稱、日期、排序四維度篩選。列表顯示廠商名稱、註冊人、職稱、信箱、審核狀態（已審核 / 待審核）與註冊日期，底部可批次執行「審核失效」或「審核通過」。
協力廠商・廠商清單
主廠商清單列出統一編號、公司抬頭名稱、會員帳號、公司電話、通訊地址與好友狀態（星號標記）。頂部快捷按鈕支援「發送邀請」與「取消好友」，搜尋欄可同時輸入統一編號或會員帳號。
設計亮點
以精選深色管理後台風格為基礎，整體視覺針對「大量清單資料的快速瀏覽」與「跨企業協作」兩個使用情境優化， 並非只是套用模板，而是重新定義頁面層級與互動回饋。
深色專業風格
深色主題降低長時間使用的視覺疲勞，對比色強調操作按鈕，關鍵狀態一眼辨別。
雙入口登入設計
地端企業與雲端廠商使用各自獨立的登入頁，路由保護機制依群組自動決定可進入的頁面範圍。
響應式佈局
從 1280px 桌機到手機全尺寸適配，Bootstrap 5 格線搭配客製 SCSS，表格在小螢幕自動橫向捲動。
操作即時回饋
SweetAlert2 提示彈窗統一管理確認與錯誤訊息，Pinia Loading 狀態讓使用者清楚知道請求進行中。
樞紐分析視覺化
已收單據內建樞紐分析表，圓餅圖、折線圖等最多三種圖表，讓採購主管快速掌握收件趨勢。
人機驗證整合
廠商註冊流程嵌入 Google reCAPTCHA v2，防止自動化帳號建立，保護平台資料安全。
功能與技術架構
採前後端分離的單頁式應用（SPA）架構，前端以 Vue 3 + TypeScript 開發， 以 Vite 5 為建置工具，搭配 Pinia 管理全域狀態、vite-plugin-pages 自動產生路由。 部署採 Docker 多階段建置 + Nginx，支援 SPA 回退規則與 100MB 上傳限制， 整個系統可在雲端主機或企業自建主機上以同一套程式碼執行， 透過環境變數 VITE_API_HOST 切換指向。
| 分類 | 採用技術 | 用途說明 |
|---|---|---|
| 前端框架 | Vue 3TypeScriptVite 5 | SPA 架構，元件化開發，型別安全保證 |
| 狀態管理 / 路由 | PiniaVue Routervite-plugin-pages | 自動產生路由、AuthMiddleware 驗證、動態選單產生 |
| 樣式 | SCSSBootstrap 5 | 響應式格線、元件樣式統一管理 |
| 資料請求 / 驗證 | AxiosJWTZodVee-Validate | Axios 攔截器統一處理 Token 刷新、錯誤導流；Zod 做 API 回應型別驗證 |
| UI 元件 / 互動 | SweetAlert2Luxonxlsx | 彈窗通知、日期格式化、前端 Excel 讀寫 |
| 安全性 | Google reCAPTCHA v2useCipher | 廠商註冊人機驗證；Token 以 SessionStorage 加密儲存 |
| 建置 / 部署 | DockerNginx | 多階段建置、非 root 容器；SPA 回退、Gzip 壓縮、安全標頭 |
| 開發輔助 | Mock 模式Auto Import | 未設定 API_HOST 自動切換 Mock 資料，前後端可平行開發 |
專案管理流程
採三階段里程碑付款制：每一期驗收通過後才進入下一階段開發， 避免需求漂移，也確保雙方在每個節點對交付內容有明確共識。 每階段均有書面驗收檢核表，逐條對照功能完成狀態。
需求訪談 ＆ UI 規格確認
現場需求訪談，確認系統流程、權限架構、API 欄位映射機制，並選定視覺設計方向。
UI/UX 設計完成（27 頁面）
完成全系統 UI 設計稿，輸出 UI/UX 檢核表，逐一核對頁面數量與功能規格後進入開發階段。
第一期款項到位，正式開工
前端框架搭建、路由架構、Auth 模組、登入頁與廠商註冊流程率先開發。
期中驗收（第二期）
完成登入／寄件服務／收件服務／系統功能（分頁、搜尋、彈跳視窗）的書面驗收，進入協力廠商與設定模組開發。
期末驗收 ＆ 系統交付
所有 27 頁面及 API 串接測試通過書面驗收，交付程式碼、安裝手冊、API 規格文件，進入一年保固期。
上線成果
期末驗收檢核表所有項目標記「已完成」， 系統以 Docker 容器化部署於客戶指定主機，並同步提供雲端測試環境供端到端測試。
頁面 100% 交付
含所有互動功能
API 端點串接完成
Auth、文件、廠商、設定
部署環境
雲端 ＋ 地端同一份程式碼
免費保固
正常操作下的異常免費維護
AI 輔助功能
CloudLink 的核心架構採模組化設計，預留 AI 服務介接層。 以下功能部分已在系統內以規則型邏輯實現基礎版本，部分作為下一步 AI 強化的明確目標， 讓整套管理系統從「人工處理」逐步演進為「智慧輔助決策」。
reCAPTCHA 人機驗證
廠商自助註冊流程嵌入 Google reCAPTCHA v2，透過行為分析自動攔截自動化帳號建立請求，無需人工審查每一筆申請。
樞紐分析自動視覺化
收件資料進入系統後，自動聚合生成圓餅圖與折線圖，讓採購主管不需要手動整理數據，直接從圖表掌握廠商收件趨勢。
智慧欄位自動映射建議
現行版本由使用者手動維護 Excel 映射表。AI 強化版可根據歷史對應紀錄，自動推薦新廠商的欄位對應，將設定時間從數小時壓縮到數分鐘。
單據異常偵測
透過 AI 模型比對歷史單據，自動標記疑似重複送出的採購單號、金額離群值或異常廠商行為，在審核通過前提示主管確認。
OCR 掃描文件轉入
目前系統接受 Excel 格式上傳。加入 AI OCR 後，可支援紙本掃描檔或 PDF 單據直接讀取，自動解析欄位並填入對應位置，擴大適用場景。
審核優先排序
根據廠商歷史配合紀錄、單據金額與交期急迫性，AI 自動對「寄件待審」清單重新排序，讓審核人員先處理高風險或高優先順序的項目。
未來可擴充規劃
系統以模組化架構與標準化 API 設計，每個擴充方向都有清楚的技術介接點， 不需要重寫核心邏輯即可疊加新功能。以下規劃依優先順序分為三個階段。
行動裝置 App
以 Vue + Capacitor 封裝現有 Web App，快速推出 iOS / Android 版本。廠商可直接在手機接收單據通知、確認收件，不需要開啟瀏覽器。
推播通知整合
串接 Firebase Cloud Messaging，當新單據抵達或審核狀態變更時，即時推播通知至廠商手機，取代現行的 Email 通知機制。
電子簽章整合
串接電子簽章服務（如台灣自然人憑證或第三方 e-Sign 平台），讓單據在系統內完成法律效力的電子簽核，取代紙本用印流程。
主流 ERP 直接對接
開發鼎新 DIGIWIN、SAP Business One 等本土常用 ERP 的官方 Connector，讓採購訂單自動從 ERP 推送至 CloudLink，消除手動上傳 Excel 的步驟。
進階 BI 報表中心
以 Apache ECharts 或 Recharts 建置獨立報表模組，提供跨廠商、跨時段的採購量統計、到貨準時率、退單率等 KPI 看板，支援排程自動寄送 PDF 報表。
EDI 電子資料交換
支援 ANSI X12 / EDIFACT 標準格式，讓系統可與國際供應鏈夥伴直接交換結構化訂單資料，打開外銷製造業的應用場景。
多語系與多幣別支援
加入 i18n 國際化框架，支援英文與日文介面切換，並整合即時匯率 API 顯示多幣別換算金額，服務有跨境採購需求的製造業客戶。
