對話框結構
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 不是原子元件，而是組裝——兩者都來自 Design Pattern: Filter Combo：
- Sites 篩選 直接沿用 Filter Combo 的 Sites chip dropdown（站點樹選單、兩態 per-node 勾選、頂部搜尋）。
- 多條件取交集 沿用 Filter Combo 的 cross-filter（AND）政策。
說明與訊息（選配） Descriptions & messages
呼叫端可為對話框帶入兩段選配文字：
- Header 說明副標：標題下方一行，描述「這個挑選器用在什麼情境」；帶入後 header 由 70px 長到 100px。
- Footer 訊息：footer 左側一則訊息（例如目前的錯誤或狀態說明），以警示色顯示。
兩者都不影響中間的篩選面板與結果清單。
來源註記：此選配的說明副標與 footer 訊息以 Figma key-screen（
9457:180563）為準（header 帶副標時長到 100px 亦依該標註）；互動 demo 未實作這兩段選配文字。
各區塊細節見後續 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 台（部分第三方裝置整合情境限 10 台，由呼叫端設定） | 恰好 1 台 |
| 已選檢視 | 有（見 Section 06） | 無（只挑一台，不需檢視清單） |
| Footer 確認 | 選 ≥1 台後「Select」可按 | 選 1 台後「Select」可按 |
Premium camera 開關不是模式差異——它在兩種模式都是「勾選 Camera 後才條件出現」的項目（見 Section 03）。
單選長什麼樣 Single mode
來源註記：互動 prototype demo 目前只實作多選模式；本節的單選畫面與行為（含下方載入態）以 Figma key-screen 為準（
9003:52141/9030:74195），demo 尚未加入單選切換。
- 標題是「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 後套用，結果區顯示置中 loading spinner 再刷新；命中片段以 highlight 標示。
- 結果載入：與清單一致——先載一批 50 筆，捲動到底再載下一批（見 Section 04）。
- 有字時尾端出現清除「X」。
超量結果由「分批 50 + 捲動載入」處理，行為已達成。設計文件另建議在此顯示一句「Showing first 50 results」提示文字，目前 prototype 未顯示該文字——是否加上此文案以實作為準。
Sites 站點篩選
點開 Sites 會展開一個站點樹選單——直接沿用 Design Pattern: Filter Combo 的 Sites chip dropdown：頂部有搜尋框、命中自動展開祖先，採兩態 per-node 勾選——
- 勾選：此節點自己的直屬裝置納入；點有子節點的節點會對稱 cascade 到所有子孫。
- 未勾：此節點自己的直屬裝置不納入；祖先永不自動連動，每個節點各自判斷。
完整語意以 Filter Combo 的 Sites 選單為準。選了站點後，結果清單只顯示這些站點範圍內的裝置——在關閉 Sites 選單時才套用（勾選期間不即時刷新；套用時結果區顯示置中 loading spinner）。
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 勾選期間結果不即時刷新；關閉選單後（若有變更）結果區顯示置中 spinner，再更新為只顯示這些站點範圍內的裝置。
- Given 勾選 Camera，Then 出現 Premium camera 開關；取消 Camera，Then 該開關消失。
結果清單
右側 716px 的結果區：上方是 N/50 計數列（多選模式，見 Section 05），下方是可捲動的裝置清單。裝置依所屬 site 分組，每組上方有一條 breadcrumb 標頭。
分組與 breadcrumb Grouping & breadcrumb
- 每個 site 一段：40px 標頭（該 site 的階層路徑 breadcrumb） + 該 site 底下的裝置列。
- breadcrumb 的顯示與截斷（葉層白色永不截斷、上層灰色以「>」相接、中間層折疊為「…」、hover tooltip 等）是跨介面共用的顯示慣例，非本 deck 專屬。
breadcrumb 的完整顯示與截斷規則以 Sites Breadcrumbs（06）為準，此處不重述。
兩種列模式 Row modes
| 模式 | 觸發 | 列高 | 縮圖 |
|---|---|---|---|
| 混合類型（預設） | 未特別只選 Camera | 60px | 攝影機列 hover 時浮現預覽縮圖（128×80，游標上方） |
| 只有攝影機 | Device type 只勾 Camera | 100px | 每列直接內嵌縮圖，不需 hover |
混合類型（預設）：60px 列，hover 到攝影機列時游標上方浮現 128×80 預覽縮圖：
只有攝影機模式：列高 100px、每列直接內嵌縮圖：
載入與排序 Loading & sort
- 初始：一進來就顯示前 50 筆（不是空的）。
- 篩選刷新：結果不即時更新；改變篩選（關閉 Sites 選單且有變更、搜尋 debounce 後、切換 Device type / Premium）時才提交，提交時結果區以置中 spinner 過場約 0.8 秒再顯示新結果——沿用 Filter Combo 的觸發模型，但此對話框用自己的轉圈 spinner、非 skeleton。
- 捲動載入：捲到底自動載入下一批 50 筆，載入時在清單末端顯示一顆置中 spinner（沒有獨立的「Load more」按鈕）。
- 預設排序：清單依 site 分組，群組依 site 完整路徑（breadcrumb）字母序；同一 site 內的裝置依裝置名稱字母序。群組內有兩個特例：unknown 裝置固定排在該群組最底；MA 攝影機的本體後面緊接著它的 MA channels（本體 + channels 相鄰，不被其他裝置打散）。
來源註記：互動 demo 與 design doc 仍寫有「上次選過裝置的 site 排前面（localStorage recent-sites）」這條排序，但實際實作並未採用此規則（依 RD 確認）；正式版即上述的裝置名稱字母序 + 兩個特例，demo 的 recent-sites 行為不代表產品。
MA 為 VORTEX 的多鏡頭攝影機（一個本體含多個鏡頭 channels，如 MA9312）；何時只顯示本體、只顯示 channels、或本體 + channels，由各頁面情境另行定義，本 deck 僅規範其排序相鄰規則。
上方初始載入態（
dp-loading）為 Figma key-screen 的設計狀態。demo 的同一顆置中 spinner 也用於篩選刷新（改變篩選後結果區過場）與捲動載入下一批。
空狀態 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 改變篩選（關 Sites 選單 / 搜尋 / 切類型），Then 結果區出現置中 spinner 過場後才更新（勾選 Sites 期間不即時刷新）。
- Given 只勾選 Camera，Then 列切換為 100px 內嵌縮圖模式；混合類型時攝影機列改為 hover 才出現縮圖。
- Given 篩選 / 搜尋無任何結果，Then 顯示「No Matches Found」空狀態。
選取與數量上限
本節描述多選模式（Select Devices）。單選模式沒有計數與上限，見 Section 02。
多選勾選有數量上限，上限值由採用它的功能設定：一般為 50 台，部分第三方裝置整合情境限 10 台（單選則固定 1 台，見 Section 02）。計數列（N/上限 selected，例如 N/50）在結果區的最上方、右對齊。
計數列的三種狀態 Counter states
| 狀態 | 樣式 | 可點 |
|---|---|---|
| 0 selected | 一般灰字（@color-text-03） |
否 |
| 1 台 ～ 未達上限 | 藍色連結字（@color-primary-default、semibold） |
是 → 開啟「已選檢視」（見 Section 06） |
| 達上限（如 50/50 或 10/10） | 紅色（@color-danger-default），提示已達上限 |
是 → 開啟已選檢視 |
達到上限 At limit
- 選滿上限台數後，未勾選的列變為停用（變暗）、不能再勾；計數列同時轉紅（如 50/50、10/10；見上表）。
- 已勾選的仍可取消；取消後未勾選的列恢復可勾。
上限本身已強制（未選列停用 + 計數轉紅），行為已達成。設計文件另建議加一句「Maximum N 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 台到未達上限，Then 計數變藍色連結、可點開已選檢視。
- Given 選滿上限（如一般情境 50、第三方整合 10），Then 計數轉紅色，未勾選的列停用（變暗）不可再勾。
- 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 回到主畫面且已選狀態保留。