AccuNix 社群會員管理平台

本片亮點特色

• 多語系架構

  維護並優化中英多語系架構，確保動態內容與 UI 元件都能正確切換。

• 活動表單即時預覽

  設計並實作活動表單的即時預覽機制，降低設定錯誤與溝通成本。

• 前端快取與狀態管理

  以 Pinia 建立前端快取與狀態管理，避免重複的 API 請求，並支援手動刷新。

• 聊天室重構

  因應人員層級調整與 API 規格異動，重構聊天室的資料結構與狀態流，確保訊息與使用者的關聯正確，並保留擴充空間。

• 高複用自訂元件

  封裝並擴充 Element Plus 元件，打造可重複使用的自訂元件。

• 型別強化

  有系統地逐步移除 any，新功能全面導入 TypeScript 型別約束，提升可維護性與長期穩定度。

幕後花絮難題與解法

1. 01 在不影響既有功能下清掉 any

   難題

   舊程式碼有大量 any，要讓它通過型別檢查，又不能影響既有功能的穩定。

   解法

   從範圍小、相對獨立的頁面開始修正。每改完一處就跑 lint，確認通過、也不影響其他功能，再推進到下一處。

2. 02 優化並擴充既有元件

   難題

   既有元件需要優化與擴充，但有許多頁面在使用，不能破壞現有功能。

   解法

   以型別約束元件的介面，除非是修正 bug，否則不改動既有行為。元件內不放副作用，需要在前後執行的操作一律透過 emit 交給外部處理。

3. 03 擴充沒有交接文件的大型功能

   難題

   部分功能龐大又難以更動，當初也沒有留下交接文件。

   解法

   先用 AI 走讀相關檔案，找出重點、問題與著手點。擴充時採用不破壞既有程式碼的寫法。改寫時與後端溝通資料格式，或在前端轉譯成合適的規格，把需要改動的範圍降到最小。