UG 海外增長業務平台

專案介紹

重大成就

• Web Worker 多線程 CSV 校驗

  CSV 格式校驗原本在前端主執行緒進行，資料量大時常造成 UI 卡住。我導入 Web Worker 多線程計算系統，將校驗工作移至獨立執行緒，並解決了公司內部 Armor 框架下使用 Web Worker 的相容性限制（Blob URL、Comlink、Module Worker）。校驗規則採 Yup + Regex 建構的 Schema，並抽象為可複用的公共工具。

  此設計成功在 10 萬筆資料中 減少了 90% 的 UI 卡頓時間

• 函數快取工具優化渲染效能

  專案內部使用了自研的表單渲染引擎來加速大型表單的開發，這個渲染引擎需要提供表單內容抽象化的 JS object，其中也包含了 onChange 等函數用於連動表單不同欄位的互動。

  而這個引擎的重大效能缺陷是：每渲染表單就要計算一遍整個 schema。當表單內容很多，並且類型為 array 的時候，此效能缺陷造成的弊端會被顯著放大，肉眼可見的影響就是 UI 交互卡死，長時間等待表單生成。

  為了解決這個問題，我做了兩個簡單的小工具函數 cache / cacheMany。模仿 React useMemo，將計算結果快取進 Map，或是根據傳進來的參數為 key，存進多個 Map。

  利用這個小技巧加上其他常規優化手段，我成功讓一個沒有做分頁，一次要渲染 500 個表單 UI 的介面，其 Total Blocking Time (TBT) 降低了 98%

技術亮點

1. 01

   複雜表單互動元件開發

   基於內部自研的 JSON Schema 動態表單渲染解決方案，開發大量業務表單互動元件，涵蓋級聯選擇、動態欄位、條件顯示等複雜場景，實現配置驅動的表單渲染，支援複雜校驗規則與欄位聯動邏輯

2. 02

   高精度數值計算處理

   針對財務、報價等業務場景的 JavaScript 浮點數精度問題，實作浮點數精度計算方案

3. 03

   微前端整合

   透過公司自研框架實現子應用動態載入，支援按需載入業務模組與獨立開發部署

4. 04

   國際化多語系

   透過自研線上翻譯平台，在 runtime 獲取最新翻譯文件，實現多語系支援與動態更新

5. 05

   LLM 合約 AI 校驗功能開發

   打造全端 AI 校驗系統，以多模態大型語言模型解析合約文件，對照動態規則逐條校驗後決定是否阻斷提交。亮點：規則由線上設定平台管理，可隨時新增、修改、停用，無需改程式碼；規則分為強制阻斷與純警告兩種類型，AI 高置信度不通過才觸發阻斷；使用者可填寫說明否決強制卡點，系統記錄結果供審計；實作 DB 查詢 Tool Call 並加 SQL 過濾層確保唯讀，讓模型可依規則需求自由取得系統資料；接入文件轉 Markdown 的 MCP，讓模型能統一處理 PDF、Word、Excel 等各種格式的合約文件

   成效：每週校驗 6–7 份合約，每月省下約 5 人天（person-day）的人力

   準確度與語料庫：模型初期對不同範例結構的合約辨識度不佳，後來將常見結構的合約放入語料庫（包含錯誤合約範例與正確合約範例），告知模型哪種文字敘述通常對應什麼規則，模型的判斷力逐漸變好，仍持續優化中

   評估（eval）：修改 prompt 時以上述語料庫測試，通過才會上線；使用公司自研、內部免費使用的模型（Doubao），未更換過模型，不需考慮金錢成本

   追蹤（tracing）：模型的每次對話內容由 Go 寫入線上 log 系統，可從該系統追查判斷原因

   延遲處理：為因應模型延遲，將合約提交從同步改為非同步，使用者提交後平均約 5 分鐘收到通知，再返回頁面查看結果

專案圖片