A-32 Manage Vocabulary
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
單字查詢與刪除 - Web 版
🎨 Figma: node-698-2843 (A-30 同頁面子視圖) 🔗
🎯 核心功能
使用者： Admin / Super Admin
對特定單元（Session）內的單字進行精確檢索與清理。管理員可以查看單字的所有屬性與媒體關聯狀態，並對錯誤數據進行刪除。
🧱 畫面結構
| 區域 | 說明 |
|---|---|
| Header | Nihao Admin Course > [EKL1] > [Session 1] > Vocabulary, [👤] |
| Breadcrumbs | Course > EKL1 > Session 1，快速返回架構層 |
| Session Info | Session: [Greetings], Total Items: 25 |
| Toolbar | [🔍 Search Content/Pinyin...], [Type: All ▾], [🗑️ Delete Selected] |
| Import Entry | [⤒ Import to Add/Edit] 引導按鈕，跳轉至 A-33 |
| Vocab Table | Checkbox, #, Content, Type, Pinyin, English, Media [I][A][G], QA, Actions [🗑️] |
📦 區塊說明
| 區塊 | 元件 | 權限要求 | 功能與行為 |
|---|---|---|---|
| Breadcrumbs | Nav Links | All | Course > EKL1 > Session 1，快速返回架構層。 |
| Import Entry | ⤒ Button | Super / Admin | 引導按鈕，點擊後跳轉至 A-33 進行批量導入（新增/修改單字的唯一途徑）。 |
| Filter Bar | Input / Select | All | 支持關鍵字、類型（生字/詞語/句子）的即時過濾。 |
| Batch Delete | 🗑️ Button | Super / Admin | 勾選多個單字後，一次性刪除。 |
| Media Column | Icons | All | 使用圖示標註媒體狀態：[I] 圖片, [A] 音檔, [G] 筆順 GIF。灰色代表缺失，紅色代表文件不存在。 |
| QA Column | Badge | All | 顯示 Yes / No。如果是 Yes，滑鼠懸停可查看預設問句。 |
| Action | 🗑️ Icon | Super / Admin | 單點刪除。點擊後觸發二次確認彈窗。 |
🔐 關鍵邏輯與交互設計
為什麼不能直接編輯？
頁面顯著位置標註：「如需新增或修改單字內容，請使用批量導入功能」。
這是為了確保音檔名稱、圖片路徑與複雜的快問快答邏輯在 CSV 導入時已完成系統性校驗，避免人工單點錄入時產生的關聯錯誤。
刪除確認 (Deletion Confirmation)
- 單點刪除： 點擊 [🗑️] → 彈窗：「確定要刪除單字 [內容] 嗎？此操作不可撤銷。」 → [確定刪除]。
- 批量刪除： 勾選多項 → 點擊 [🗑️ Delete Selected] → 彈窗：「確定要刪除選中的 N 個項目嗎？」 → [確定刪除]。
媒體狀態即時檢測 (Media Check)
- Web 表格會自動比對伺服器文件夾（/uploads/audio/ 等）。
- 若 CSV 中填寫了檔案名但文件不存在，媒體圖示將顯示為紅色斷裂圖示，提醒管理員重新上傳資源包。
🔁 交互流程圖
- 查詢： 管理員進入 A-32 → 輸入關鍵字 → 表格即時顯示匹配結果。
- 清理： 發現某個句子錄入錯誤 → 點擊 [🗑️] → 二次確認 → 數據移除。
- 更新： 需要修改某個單字的拼音 → 點擊 [⤒ Import to Add/Edit] → 跳轉至 A-33 → 上傳修正後的 CSV。