Section 01
對話框結構
Device Picker 是一個模態對話框，讓使用者跨站、跨裝置類型搜尋並挑選最多 50 台裝置。固定尺寸 1116 × 747，分三塊。
三個區塊 Regions
| 區塊 | 高 | 內容 |
|---|---|---|
| Header | 70px | 標題「Select Devices」（左）＋ 關閉鈕（右上） |
| Content | 607px | 左：篩選面板（280px）；右：結果清單（716px）；中間間距 40px |
| Footer | 70px | 右對齊的「Select」＋「Cancel」兩顆按鈕 |
為什麼是「左篩選 ＋ 右結果」 Layout rationale
- 需求是跨站搜尋，不是「先選站再看裝置」，所以不用左樹右清單（會造成心智模型衝突）。
- 挑選器的目的是「選東西」，所以一進來就顯示結果（預設 50 筆），不強迫先設篩選才看得到。
- 左側篩選維度（搜尋、Sites、Device types）常駐可見，不用額外點擊；右側結果區獨立、寬敞。
組裝了哪些 pattern Composition
Device Picker 不是原子元件，而是組裝：
- Sites 篩選 用 Design Pattern: Tree View（節點含入式三態）。
- 多條件取交集 沿用 Design Pattern: Filter Combo 的 cross-filter（AND）政策。
各區塊細節見後續 Section；tokens 與 chip/search 樣式沿用 filter-combo 的 VORTEX 1.0 設計。
Section 02
篩選面板
左側 280px 的篩選面板，由上到下：Filter 標題（含 Reset）、搜尋、Sites、Device types，以及條件出現的 Premium camera。
Filter 標題 Header
- 「Filter」標題 ＋ filter icon。
- Reset：只要有任一篩選在作用（搜尋有字、選了 site、勾了類型、或 Premium 開啟）就出現在右側；點了一次清空所有篩選。
搜尋 Search
- placeholder：「Filter by device name」。
- 範圍：跨所有 site、所有類型搜尋裝置名稱。
- 觸發：輸入 2 個字以上、停頓 300ms；命中片段以 highlight 標示。
- 結果上限：最多顯示 50 筆；超過時顯示「Showing first 50 results」。
- 有字時尾端出現清除「X」。
Sites 站點篩選
點開 Sites 會展開一個站點樹選單（沿用 Design Pattern: Tree View）：頂部有搜尋框、命中自動展開祖先，採節點含入式三態勾選——
- 勾選：此節點與其所有子孫都納入。
- 半選：此節點本身納入（其直屬裝置算數），但有子孫被排除。
- 未勾：此節點與子孫都不納入。
選了站點後，結果清單只顯示這些站點範圍內的裝置。
Device types 裝置類型
- 七種：Camera / NVR / Bridge / Speaker / PoE Switch / VSS / Unknown。
- 多選；全不勾＝顯示所有類型；勾選任意組合則只留那些類型。
- 版面自然換行（不強制三欄），依標籤寬度排成三列。
Premium camera 條件出現
- 只有當「Camera」被勾選時才出現（在篩選群組下方獨立一行）。
- 開啟：結果只顯示 premium 攝影機；關閉（預設）：顯示所有攝影機。
- Camera 取消勾選時，這一行消失。
驗收條件 QA · Given-When-Then
- Given 有任一篩選在作用，Then 右上出現 Reset；點 Reset 清空全部篩選。
- Given 搜尋輸入 2 字以上並停頓，Then 跨站跨類型過濾、命中 highlight；超過 50 筆顯示「Showing first 50 results」。
- Given 在 Sites 選單勾選站點，Then 結果只顯示這些站點範圍內的裝置。
- Given 勾選 Camera，Then 出現 Premium camera 開關；取消 Camera，Then 該開關消失。
Section 03
結果清單
右側 716px 的結果區：上方是 N/50 計數列（見 Section 04），下方是可捲動的裝置清單。裝置依所屬 site 分組，每組上方有一條 breadcrumb 標頭。
分組與 breadcrumb Grouping & breadcrumb
- 每個 site 一段：40px 標頭（該 site 的階層路徑）＋ 該 site 底下的裝置列。
- breadcrumb：根層在左（灰色），一路用「>」接到最末層；最末層（葉）以白色、粗體顯示、永不截斷。
- 截斷規則：空間不夠時，優先保留「葉」與「根」，中間層先用 ellipsis 縮短、再折成「⋯」；「⋯」不可點，hover 顯示完整路徑。
兩種列模式 Row modes
| 模式 | 觸發 | 列高 | 縮圖 |
|---|---|---|---|
| 混合類型（預設） | 未特別只選 Camera | 60px | 攝影機列 hover 時浮現預覽縮圖（128×80，游標上方） |
| 只有攝影機 | Device type 只勾 Camera | 100px | 每列直接內嵌縮圖，不需 hover |
載入與排序 Loading & sort
- 初始：一進來就顯示前 50 筆（不是空的）。
- 捲動載入：捲到底自動載入下一批 50 筆，載入時在清單末端顯示一顆置中 spinner（沒有獨立的「Load more」按鈕）。
- 預設排序：使用者上次選過裝置的 site 排前面（記在 localStorage），其次依 site 名稱字母序；同一 site 內依裝置名稱字母序。
空狀態 Empty state
無任何符合時，清單中央顯示插圖 ＋「No Matches Found」＋「Please try adjusting filters or use different keywords.」（picker 情境下不放 CTA 按鈕）。
驗收條件 QA · Given-When-Then
- Given 開啟對話框，Then 立即顯示前 50 筆（非空），依預設排序分組。
- Given 捲到清單底部且還有更多，Then 顯示 spinner 並載入下一批 50 筆。
- Given 只勾選 Camera，Then 列切換為 100px 內嵌縮圖模式；混合類型時攝影機列改為 hover 才出現縮圖。
- Given 篩選/搜尋無任何結果，Then 顯示「No Matches Found」空狀態。
Section 04
選取與 50 上限
多選勾選，一次最多 50 台。計數列（N/50 selected）在結果區的最上方、右對齊。
N/50 計數的三種狀態 Counter states
| 狀態 | 樣式 | 可點 |
|---|---|---|
| 0 selected | 一般灰字（@color-text-03） |
否 |
| 1–49 selected | 藍色連結字（@color-primary-default、semibold） |
是 → 開啟「已選檢視」（見 Section 05） |
| 50/50 selected | 紅色（@color-danger-default），提示已達上限 |
是 → 開啟已選檢視 |
達到上限 At limit
- 選滿 50 台後，未勾選的列變為停用、不能再勾；提示「Maximum 50 devices reached」。
- 已勾選的仍可取消。
選取跨篩選保留 Persistence
- 改變篩選或搜尋不會取消已選的裝置。
- 已選的裝置即使目前不在過濾結果中，仍保持勾選狀態（要檢視/移除可用 Section 05 的已選檢視）。
條件之間取交集 Cross-filter (AND)
搜尋、Sites、Device types、Premium 之間彼此獨立、取 AND 交集——條件全部成立的裝置才留在結果中；篩選之間不互相縮限彼此的選項（與 Filter Combo 的 cross-filter 政策一致）。
驗收條件 QA · Given-When-Then
- Given 0 選取，Then 計數為灰字、不可點。
- Given 選了 1–49 台，Then 計數變藍色連結、可點開已選檢視。
- Given 選滿 50 台，Then 計數轉紅色，未勾選的列停用並提示上限。
- Given 改變篩選或搜尋，Then 已選裝置維持勾選、不被清掉。
- Given 同時套用多個條件，Then 結果為各條件的 AND 交集。
Section 05
已選檢視
點計數列（有選取時）會切換到已選檢視：把「篩選 ＋ 結果」的版面換成一份全寬的已選裝置清單，讓使用者不離開對話框就能逐筆確認、移除。
版面 Layout
- 篩選面板隱藏，清單橫跨整個內容區（1036px 寬）。
- 頂部：返回鈕 ＋ 標題「N/50 selected」。
- 清單同樣依 site 分組、用相同的 breadcrumb 標頭。
移除 Remove
- 每一列hover 時右端才出現移除「X」（紅色）；點了就從已選中移除。
- 移到 0 台時，自動返回原本的「篩選 ＋ 結果」版面。
- 返回鈕可隨時回到主畫面（已選狀態保留）。
驗收條件 QA · Given-When-Then
- Given 有選取並點計數，Then 進入已選檢視、清單全寬、篩選面板隱藏。
- Given 在某列 hover，Then 右端出現移除鈕；點擊後該裝置從已選移除。
- Given 移除到 0 台，Then 自動返回主畫面。
- Given 點返回鈕，Then 回到主畫面且已選狀態保留。