對話框結構
Device Picker 是一個模態對話框，讓使用者跨站、跨裝置類型搜尋並挑選裝置。固定尺寸 1116 × 747，分三塊。它有多選與單選兩種模式（見 Section 02）；本節以多選預設狀態說明結構，兩種模式的區塊配置相同。
三個區塊 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）政策。
說明與訊息（選配） Descriptions & messages
呼叫端可為對話框帶入兩段選配文字：
- Header 說明副標：標題下方一行，描述「這個挑選器用在什麼情境」；帶入後 header 由 70px 長到 100px。
- Footer 訊息：footer 左側一則訊息（例如目前的錯誤或狀態說明），以警示色顯示。
兩者都不影響中間的篩選面板與結果清單。
各區塊細節見後續 Section；tokens 與 chip/search 樣式沿用 filter-combo 的 VORTEX 1.0 設計。
兩種模式：多選與單選
Device Picker 依呼叫功能的需求，分成多選與單選兩種模式。兩者共用同一套篩選面板與結果清單（搜尋、Sites 樹、Device types、站點分組、breadcrumb 都一樣），差別只在「選幾台」以及隨之而來的介面。
差異總覽 Multiple vs single
| 面向 | 多選 Select Devices | 單選 Select Device |
|---|---|---|
| 標題 | Select Devices（複數） | Select Device（單數） |
| 選取控制 | 每列左側 checkbox，可勾多台 | 每列無 checkbox，點整列即選取，一次只留一台 |
| 計數列 | 有，右上顯示 N/50 selected（見 Section 05） | 無 |
| 數量上限 | 一次最多 50 台 | 恰好 1 台 |
| 已選檢視 | 有（見 Section 06） | 無（只挑一台，不需檢視清單） |
| Footer 確認 | 選 ≥1 台後「Select」可按 | 選 1 台後「Select」可按 |
Premium camera 開關不是模式差異——它在兩種模式都是「勾選 Camera 後才條件出現」的項目（見 Section 03）。
單選長什麼樣 Single mode
- 標題是「Select Device」（單數）。
- 結果清單沒有 N/50 計數列，最上方直接是第一個 site 的 breadcrumb 標頭。
- 每一列沒有左側 checkbox：點整列即把該台設為目前選取，一次只有一台；改點別列就改選別台。
- 篩選面板與多選相同（搜尋、Sites、Device types）；Premium camera 一樣是勾 Camera 後才出現。
- Footer 的「Select」在選到一台後才可按。
單選載入態 Single · loading
單選一樣有初始載入態：清單區顯示置中的 48×48 spinner，載入完成後帶出裝置清單（多選的載入態見 Section 04）。
各用在哪 Where each is used
- 多選：需要一次指派多台裝置時，例如裝置層級權限指派（見 Section 07）。
- 單選：功能只需要鎖定一台裝置作為對象時，例如指定某一台裝置進行後續設定或綁定。
驗收條件 QA · Given-When-Then
- Given 單選模式，Then 標題為「Select Device」、無 N/50 計數列、每列無 checkbox。
- Given 單選模式點某一列，Then 只有該台被選取；改點另一列則改選該台。
- Given 單選模式，Then 篩選面板與多選相同（搜尋、Sites、Device types），Premium camera 仍是勾 Camera 後才出現。
- Given 單選且已選一台，Then Footer「Select」可按。
篩選面板
篩選面板在多選與單選兩種模式完全共用（見 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 筆，捲動到底再載下一批（見 Section 04）。
- 有字時尾端出現清除「X」。
超量結果由「分批 50 + 捲動載入」處理，行為已達成。設計文件另建議在此顯示一句「Showing first 50 results」提示文字，目前 prototype 未顯示該文字——是否加上此文案以實作為準。
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；結果超過一批時捲動載入下一批。
- Given 在 Sites 選單勾選站點，Then 結果只顯示這些站點範圍內的裝置。
- Given 勾選 Camera，Then 出現 Premium camera 開關；取消 Camera，Then 該開關消失。
結果清單
右側 716px 的結果區：上方是 N/50 計數列（多選模式，見 Section 05），下方是可捲動的裝置清單。裝置依所屬 site 分組，每組上方有一條 breadcrumb 標頭。
分組與 breadcrumb Grouping & breadcrumb
- 每個 site 一段：40px 標頭（該 site 的階層路徑）＋ 該 site 底下的裝置列。
- breadcrumb：整條為 semibold；根層與中間層為灰色，用「>」接到最末層；最末層（葉）改以白色顯示、永不截斷（葉的區別在顏色，不是更粗）。
- 截斷規則：空間不夠時，優先保留「葉」與「根」，中間層先用 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」空狀態。
選取與 50 上限
本節描述多選模式（Select Devices）。單選模式沒有計數與上限，見 Section 02。
多選勾選，一次最多 50 台。計數列（N/50 selected）在結果區的最上方、右對齊。
N/50 計數的三種狀態 Counter states
| 狀態 | 樣式 | 可點 |
|---|---|---|
| 0 selected | 一般灰字（@color-text-03） |
否 |
| 1–49 selected | 藍色連結字（@color-primary-default、semibold） |
是 → 開啟「已選檢視」（見 Section 06） |
| 50/50 selected | 紅色（@color-danger-default），提示已達上限 |
是 → 開啟已選檢視 |
達到上限 At limit
- 選滿 50 台後，未勾選的列變為停用（變暗）、不能再勾；計數列同時轉紅顯示 50/50（見上表）。
- 已勾選的仍可取消；取消後未勾選的列恢復可勾。
50 上限本身已強制（未選列停用 ＋ 計數轉紅 50/50），行為已達成。設計文件另建議加一句「Maximum 50 devices reached」提示（tooltip / inline message），目前 prototype 未顯示該文字——是否加上此文案以實作為準。
選取跨篩選保留 Persistence
- 改變篩選或搜尋不會取消已選的裝置。
- 已選的裝置即使目前不在過濾結果中，仍保持勾選狀態（要檢視/移除可用 Section 06 的已選檢視）。
條件之間取交集 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 計數轉紅色顯示 50/50，未勾選的列停用（變暗）不可再勾。
- Given 改變篩選或搜尋，Then 已選裝置維持勾選、不被清掉。
- Given 同時套用多個條件，Then 結果為各條件的 AND 交集。
已選檢視
已選檢視僅多選模式（Select Devices）才有；單選只挑一台，不需要檢視清單。
點計數列（有選取時）會切換到已選檢視：把「篩選 ＋ 結果」的版面換成一份全寬的已選裝置清單，讓使用者不離開對話框就能逐筆確認、移除。
版面 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 回到主畫面且已選狀態保留。