Wordat 是一個 Local-first 的英文單字學習本，適合用來建立個人字庫、整理單字意思、例句與分類，並透過搜尋、篩選、排序和統計快速回顧學習狀態。

此 App 以 Vite、React、TypeScript 和 Tailwind CSS 開發，資料預設儲存在瀏覽器的 localStorage，不需要登入或後端資料庫即可使用。專案也具備 PWA 與離線快取能力，部署後可在支援的瀏覽器中安裝成接近原生 App 的使用體驗。

核心特色

• Local-first 資料儲存：單字與分類存在使用者本機瀏覽器，操作快速，不依賴伺服器。

• PWA 離線支援：透過 Service Worker 快取 App 資源，已載入後可支援離線使用與更新提示。

• 單字 CRUD：可新增、編輯、刪除單字。

• 一字多義：同一個英文單字可保存多組詞性、中文意思、例句與分類。

• 重複單字處理：新增已存在單字時，可選擇取代既有字義、加入新字義，或只累計重複次數。

• 分類管理：可新增、編輯、刪除自訂分類，並為分類配置顏色。

• 搜尋與篩選：支援全域搜尋、分類篩選、A-Z 首字母篩選。

• 排序功能：可依 A-Z、最近新增、重複次數排序。

• TTS 發音播放：使用瀏覽器語音合成功能播放英文單字發音。

• 儀表板統計：顯示總單字量、累計重複次數、最不精熟單字，以及概覽字卡。

• 單字清單：以表格化清單呈現單字、詞性、意思、例句、重複次數與操作按鈕。

• 備份匯出與匯入：可匯出 JSON 備份檔，也可匯入既有備份合併資料。

• 深色 / 淺色模式：支援主題切換，並記住使用者偏好。

• 響應式介面：桌面使用側邊欄，手機使用抽屜式導覽。

主要畫面

單字清單

單字清單是主要工作區，提供新增單字、搜尋、分類篩選、字母篩選、排序、分頁、編輯與刪除操作。每筆單字可包含多個字義，每個字義可獨立設定詞性、意思、例句與分類。

儀表板

儀表板用於快速掌握目前字庫狀態，包含總單字量、累計重複次數、最不精熟單字，並以字卡方式展示目前篩選條件下的單字概覽。

分類管理

分類管理可建立自己的學習分類，例如 TOEIC、日常、商務、學校、易混淆字等。分類可被套用到單字或單一字義上，方便後續篩選與複習。

備份與還原

Wordat 的資料存在瀏覽器本機，因此建議定期使用匯出功能保存 JSON 備份。更換瀏覽器、清除網站資料或換裝置時，可使用匯入功能恢復或合併資料。

技術架構

• 前端框架：React

• 開發工具：Vite

• 語言：TypeScript

• 樣式：Tailwind CSS

• PWA：vite-plugin-pwa

• 資料儲存：localStorage

• 語音播放：Web Speech API

使用限制

• 資料預設只存在目前瀏覽器與目前網域，不會自動同步到其他裝置。

• 如果清除瀏覽器網站資料，localStorage 內的單字資料可能會被刪除。

• TTS 發音品質與可用語音取決於使用者的瀏覽器與作業系統。

• 離線功能需先成功開啟過 App，讓瀏覽器完成必要資源快取。