上課教室・單元標題／字幕搜尋（App 版）
規劃 v0.2 ＋ 可互動 prototype（iPhone 375×812）。規格沿用 Web：Notion [ST-2904] 搜尋單元標題與字幕、Web Figma；UI 依 App Figma「上課教室」 現有元件（單元列表、語音課逐字稿搜尋）。
09:41
單元討論作業公告
複利複習複雜
ㄅㄉˇˋㄓˊ˙ㄚㄞㄢ
ㄆㄊㄍㄐㄔㄗㄧㄛㄟㄣ
ㄇㄋㄎㄑㄕㄘㄨㄜㄠㄤ
123空白搜尋
可以直接在搜尋欄打字（例如：複利、ETF、存錢、財報）。鍵盤升起時播放器收起（同逐字稿搜尋）；捲動結果或點擊結果時收鍵盤、播放器展開。點單元名稱／字幕會跳到該單元與時間點，畫面維持在搜尋結果。
事件紀錄會顯示在這裡
1. 背景與目標
- Web 已上線 [ST-2904]：學員可在上課教室搜尋單元標題與影片字幕，點擊後跳到對應單元／時間點。
- Notion 功能對照表「字幕搜尋」目前：網站 ✔、iOS ✘、Android ✘。這次要補上 iOS 和 Android。
- 使用情境（同 Web）：① 上課聽到某個關鍵字，想找其他單元有沒有提到；② 遇到特定問題，想找這堂課有沒有對應的教學。
2. 範圍
| 項目 | 內容 |
|---|---|
| 在範圍 | iOS／Android 上課教室「單元」tab；手機＋平板。搜尋對象：單元標題、影片字幕（後台已從 Vimeo 同步）。 |
| 沿用 | 字幕資料、搜尋 API、結果規則、後台「單元搜尋紀錄」沿用 Web；UI 沿用 App 現有的單元列表與語音課逐字稿搜尋元件。 |
| 不在範圍 | 全螢幕播放中搜尋、跨課程搜尋、離線（已下載）課程的本機搜尋、搜尋歷史／熱門關鍵字。 |
3. App 元件對照 出處：App Figma › 上課教室
| 區塊 | 沿用元件 | 規格 |
|---|---|---|
| 搜尋列 | 語音課「逐字稿（點擊搜尋）」搜尋列 | 高 60、padding 20/16、底線 #E3E5E8；search icon 16 #9197A1；輸入 14/20 Regular #26282C；游標 #337DFF；有字時出現清除 icon（Delete 16）；搜尋中出現分隔線＋「取消」14/20。 |
| 搜尋起始畫面 | 「逐字稿內容搜尋」空白頁 | 標題 18/28 Medium #26282C ＋ 說明 14/20 #9197A1；文案改為「課程內容搜尋／利用關鍵字搜尋單元標題或字幕」，下方保留 Web 的「回單元列表」（14 #337DFF）。 |
| 查無結果／字數不足 | 「逐字稿（搜尋無結果）」 | 純文字 16/26 #9197A1：「沒有符合的搜尋結果」／「請輸入更多關鍵字」。不用 Web 的星球插圖，與 App 一致。 |
| 章節列 | 單元列表「章節」 | 高 60、padding 18/16、14/20 Medium #17191C；搜尋結果中右側下載鈕換成收合 chevron（16 #9197A1）。章節之間 16px 灰色間隔 #EEEFF1。 |
| 單元列 | 單元列表「單元, 作業」 | padding 10/16、icon 16（Play Outline／Finish #38C784）＋ 16/26 Medium。目前單元：底色 #EBF3FF＋左側 4px #337DFF＋文字藍色（取代 Web 的「目前單元」badge）。 |
| 字幕列 | 「逐字稿選項」 | 時間 12/16 #9197A1、內容 14/22 #26282C，gap 6；左側縮排 40，對齊單元名稱。 |
| 關鍵字高亮 | 逐字稿搜尋結果 | 關鍵字文字改 #337DFF（字重不變）。App 已有這個樣式，所以單元標題與字幕都套用。 |
| 播放器 | 播放器 *375（iOS） | 鍵盤升起時收起（同逐字稿搜尋），收鍵盤後展開；跳轉時在播放器中央顯示 toast「已跳至 00:05:18」。 |
4. 狀態與流程
| 狀態 | 觸發 | 畫面 |
|---|---|---|
| 預設 | 進入上課教室單元 tab | tab 下方是搜尋列（placeholder「搜尋單元標題或字幕...」），下面接課前準備與章節列表。 |
| ① 點擊搜尋列 | focus、尚未輸入 | 鍵盤升起、播放器收起；右側出現「取消」；列表區換成搜尋起始畫面。 |
| ② 字數不足 | 字數 < 最小字數 | 「請輸入更多關鍵字」。 |
| ③ 有結果 | 停止輸入 300ms 後自動搜尋，或按鍵盤「搜尋」 | 依章節分組顯示結果，規則見第 5 節。 |
| ④ 查無結果 | API 回傳 0 筆 | 「沒有符合的搜尋結果」。 |
| 錯誤 | 無網路／API 失敗 | 沿用 App「離線狀態」頁的既有元件。 |
| 離開搜尋 | 點「取消」或「回單元列表」、Android 返回鍵、iOS 側滑 | 清空關鍵字、收鍵盤、回到單元列表，並捲動到目前單元。 |
5. 搜尋結果規則 同 Web
- 三種排列：① 章節＋單一單元標題；② 章節＋多個單元標題；③ 章節＋（單元標題＋多組字幕）×N。
- 章節可收合，預設展開。
- 同一單元的字幕最多 20 筆，預設顯示 5 筆，超過時顯示「展開更多」；展開後一次顯示第 6–20 筆，按鈕變成「收合內容」。
- 點單元名稱：切到該單元。點字幕：切到該單元並跳到字幕開始時間。點完停留在搜尋結果，正在播放的單元同步改成目前單元樣式。
- 排序：依課程章節／單元順序，單元內字幕依時間排序。Web ticket 的排序說明是圖片，需要確認
6. 開發拆分
| 角色 | 工作 |
|---|---|
| 後端 | 確認 Web 搜尋 API 能直接給 App 用（認證、回傳格式、分頁）；搜尋紀錄加上 platform（web / ios / android）。 |
| 後台 | 「用戶管理／單元搜尋紀錄」加上「平台」欄位與篩選。 |
| 設計 | 在 App Figma 上課教室頁新增「單元搜尋」section：預設、點擊搜尋、字數不足、有結果（排列組合）、無結果，以及平板版。 |
| iOS／Android | 搜尋列（共用逐字稿搜尋元件）、結果列表（分組／收合／展開更多）、點擊跳轉、播放器收合、返回行為、埋點。 |
| QA | 注音選字中不送出、超長名稱換行、無字幕單元、音檔單元、無網路、快速連續輸入（只顯示最後一次結果）。 |
| PM | 上線後把 Notion 功能對照表「字幕搜尋」的 iOS／Android 改成 ✔。 |
7. 埋點建議
unit_search_start：{ course_id }unit_search_submit：{ course_id, keyword, result_count, title_hits, subtitle_hits }unit_search_result_click：{ course_id, keyword, unit_id, type: title | subtitle, position_sec, rank }unit_search_expand：{ unit_id }
8. 待確認
| 議題 | 建議／說明 |
|---|---|
| 最小搜尋字數 | Web ticket 沒寫，prototype 暫定 2 個字。逐字稿搜尋目前 1 個字就能搜，要不要一致？ |
| 多筆結果排序 | Web ticket 的排序規則是圖片，Notion API 讀不到內容。 |
| 播放器收合 | 沿用逐字稿「鍵盤升起時收起播放器」。替代方案：一直顯示播放器，但結果區會只剩約 1.5 筆。 |
| 點單元名稱的起點 | 建議：有續播進度就從進度開始，否則從頭播。 |
| 音檔單元／未開放單元 | 要不要列入結果？點了之後怎麼處理？ |
Prototype 的課程、單元和字幕都是假資料，只示意排列組合；搜尋是前端模擬（標題或字幕包含關鍵字就算符合）。下載按鈕、tab 切換在 prototype 裡不能互動。