工具列結構
Filter Combo 是一條可組合的篩選工具列：一個搜尋框，加上一組 filter chip，最右側是一顆「Reset」。每個頁面只挑自己需要的 chip 放進去，互動方式則完全一致。
所謂「combo」指兩個以上同時作用的 filter（其中一個可以是搜尋框）——多個條件一起對清單取交集。只有單一個搜尋框、沒有其他 filter 時，還構不成 combo（也就不會產生交集）。
下圖為一條完整工具列（搜尋 ＋ 多個 chip）：
組成 Anatomy
| 區塊 | 說明 |
|---|---|
| 搜尋框 Search | 跨「目前清單所有可見欄位」的關鍵字搜尋，永遠放在最左側 |
| 分隔線 Divider | 搜尋框與各 chip、chip 與 chip 之間的 1px 細線 |
| Filter chip | 一個篩選維度一顆（Sites / Statuses / Device type / Event types / Time…）；點擊開啟選單 |
| Reset | 當有兩個以上篩選項（chip 或有字的搜尋框，各算一項）偏離預設時才出現在最右側；一鍵重設所有篩選 |
單一 chip 的組成 Chip parts
| 部位 | 說明 |
|---|---|
| 左側 icon（可選） | 部分 chip 有（如 Sites、Statuses），用來輔助辨識；非必要 |
| Label | 空值時顯示維度名稱（如「Sites」）、有值時顯示已選摘要（如「3 sites, 2 areas」） |
| 尾端符號 | 空值時是向下箭頭（chevron）、有值時是清除該 chip 的「X」 |
組合原則 Composition
工具列依頁面情境組合，chip 的名稱也反映該頁的範圍：
| 情境 | 裝置類 chip | Device type chip |
|---|---|---|
| 只有攝影機的頁面（如 Message Center 事件） | 顯示為「Cameras」／「{N} cameras」 | 省略（全部都是攝影機，多餘） |
| 一般裝置頁面（如 Devices 清單） | 顯示為「Devices」／「{N} devices」 | 保留（與類型正交的篩選） |
各頁實際的 chip 組合見 Section 06；每個 chip 選單的細節見 Section 03。
篩選預設為空 Empty by default
過去 VORTEX 的 filter 多半預設為「All（全選）」。改版後，幾乎所有 filter 預設為空——使用者主動建立篩選條件，而不是從全選往下刪。
| 面向 | 說明 |
|---|---|
| 根本原因 | 單一 org 的裝置量可達上萬。Device 這類 filter 不可能預設全選，因此「預設為空」一併套用到近乎所有 filter，維持一致。 |
| 少數例外 | 有合理預設值的維度仍保留（如 Message Center 的 Time 預設 Last 1 hour）。 |
| 畫面不會空 | 「filter 預設為空」不等於清單空白：頁面初次載入仍會載入固定一批資料（見 Section 05），只是「篩選條件」本身從空開始。 |
Filter chip 狀態
每顆 chip 有兩個層次的變化：是否帶值（空 vs 已選），以及互動狀態（預設／hover／聚焦／停用）。下圖為 chip 的狀態矩陣（4 種變體 × 4 種狀態）：
帶值與否 Empty vs has-value
| 狀態 | 文字 | 尾端 | 左側 icon（若有） |
|---|---|---|---|
| 空值 Empty | 維度名稱、偏淡（placeholder 色） | 向下箭頭 chevron | 偏淡 |
| 有值 Has value | 已選摘要、一般文字色 | 清除該 chip 的「X」 | 一般 icon 色 |
互動狀態 Interaction states
| 狀態 | 外觀 |
|---|---|
| 預設 Default | 空值為透明背景；有值時填藍調 @color-surface-51 |
| Hover | 背景變為 @color-surface-04（有值時為藍調 @color-surface-52） |
| 聚焦 Focused | 背景填色 ＋ 1px 藍色外框（@color-outline-07）；選單開啟中即為此態 |
| 停用 Disabled | 文字轉為 @color-text-06，不可點、無 hover |
單選與多選 Single vs multi-select
- 多選 chip（Sites / Devices / Device type / Event types）：選單可連續勾選多項、保持開啟；label 顯示已選數量或摘要。
- 單選 chip（Statuses / Time）：點一項即選定並關閉選單；選單內只選、不清除，要清除得用 chip 尾端的「X」。
尺寸與 token（高度 32px、圓角 9999px、字體等）以
filter-combo元件規格與 VORTEX 1.0 token 為準。
各 chip 的選單
點擊任一 chip 會在其下方展開對應選單。選單的結構依維度而不同，但都遵循同一套開關與選取規則（見 Section 04）。
各維度選單一覽 Menu per dimension
| Chip | 選單結構 | 選取方式 |
|---|---|---|
| Sites | 站點階層樹，含節點含入式三態勾選、頂部搜尋框；預設收合，命中會自動展開祖先 | 多選（部分沿用 Tree View） |
| Devices | 平面清單，每列有裝置類型 icon ＋ 頂部搜尋框；標頭顯示「N/50 selected」；上限 50；攝影機列 hover 顯示即時預覽縮圖 | 多選，上限 50 |
| Device type | 7 列勾選（Camera / NVR / Bridge / Speaker / PoE Switch / VSS / Unknown）；無搜尋、無標頭 | 多選 |
| Statuses | 3 列單選（Online / Offline / Updating）；192px 寬 | 單選；選單內只選不清，清除用 chip 的 X |
| Event types | N 個父類別（各可展開子事件）的三態樹；父類別數量依所在頁面而定，預設全空 | 多選 |
| Time | 4 列單選（Last 1 hour / Last 12 hours / Today / Customized）；選 Customized 會改開自訂時間區間 | 單選 |
Sites 選單 站點樹
站點樹部分沿用 Design Pattern: Tree View 的規則（階層顯示、展開/收合、搜尋命中會展開並 highlight），但在 filter dropdown 裡有幾點不同：
- 預設收合：只顯示第一層，使用者手動展開才看到子層。
- 無輔助線：dropdown 內不繪製 Tree View 的縮排輔助線（indent guides）。
- 多選勾選：採「節點含入式」三態語意（Tree View 為單選）。
三態語意：
- 勾選（checked）：此節點與其所有子孫都納入。
- 半選（indeterminate）：此節點本身納入（它的直屬裝置算數），但有子孫被排除。這是與傳統三態最大的差異。
- 未勾（unchecked）：此節點與子孫都不納入。
因為裝置可以直接掛在任一層（不限最末端），這個語意讓使用者能表達「只要這個站點自己的裝置、不要底下某個區域的」。
站點計數規則 Site / Area count
chip label 與選單標頭都以「被選取的節點」計數，並區分 site 與 area（VORTEX 的 area 是 site 的子層，要分清「選了整個 site」與「只選了 site 內的某些 area」）：
- 數出所有被選取的節點：最上層（site）算一個 site，其餘子層算 area。勾選一個節點會自動帶入它底下所有子節點、一起計入；只勾子層時不會把上層 site 也算進去。
- 只顯示非零的部分、單複數自動調整。chip label 例：
3 areas、1 site, 2 areas、1 site；選單標頭在後面加「 selected」（全空時為0 selected）。
下面用一個假想結構示意 —— Site Alpha 底下有區域 North，North 底下有 N-1、N-2；另有一個底下沒有區域的 Site Beta：
| 操作 | 被選取的節點 | 顯示 |
|---|---|---|
| 勾選區域 North（自動帶入 N-1、N-2） | North、N-1、N-2（3 個 area） | 3 areas selected |
| 承上，再取消 N-2 | North、N-1（2 個 area） | 2 areas selected |
| 勾選整個 Site Alpha | Alpha（site）＋ North、N-1、N-2 | 1 site, 3 areas selected |
| 勾選底下沒有區域的 Site Beta | Beta（site） | 1 site selected |
Devices 選單 裝置清單
平面清單，每列前面是裝置類型 icon；頂部有搜尋框與「N/50 selected」計數。一次最多選 50 筆——這對應「前端永遠只看到部分資料」的原則（大型清單靠搜尋找目標，不預期整包載入）。
Camera 列 hover 縮圖：滑鼠移到「攝影機類型」的列時，會在游標上方浮現一張 128×80 的即時預覽縮圖，幫助用畫面辨識；非攝影機類型的列不顯示縮圖。
Time 選單 時間
四個預設區間單選；選「Customized」時不關閉選單，改開自訂時間區間 Customized time frame（雙月曆 ＋ 起訖時間 ＋ Apply）。
各選單的資料載入原則（站點樹逐層載入、裝置清單捲動載入、搜尋結果上限 50）以
filter-combo設計為準。
選取與清除
選取流程 Select
- 點 chip → 在其下方展開選單，chip 進入聚焦態（藍框）。
- 在選單內選值：多選 chip 可連續勾選、選單保持開啟；單選 chip（Statuses / Time）點一項即選定並關閉。
- 選完後 chip 由「空值（淡字 ＋ 箭頭）」變為「有值（一般字 ＋ X）」，label 顯示已選摘要。
預設狀態（工具列已組好，所有 filter 皆為預設、還沒出現 Reset）：
清除 Clear
| 操作 | 效果 |
|---|---|
| 點某 chip 尾端的「X」 | 只清除該 chip 的值 |
| 點最右側「Reset」 | 重設所有 chip 回各自預設（多數頁面預設為空，等於清空），並清掉搜尋框 |
| Reset 何時出現 | 當偏離預設的篩選項（chip、或有字的搜尋框，各算一項）達到兩個以上時才出現在最右側；一個以下不顯示 |
關閉選單 Dismissal
- 點 chip 本身（已開啟的那顆）→ 關閉選單。
- 單選 chip（Statuses / Time）：選一個項目 → 立即關閉（Time 選「Customized」例外，改開自訂時間區間、不關閉，見 Section 03）。
- 多選 chip：在選單內部連續選取、捲動、打字都保持開啟；點 chip 本身、或 menu 區域以外的任何地方 → 關閉選單。
- 按 Esc → 關閉選單（若開著自訂時間區間，先關裡層的時間下拉，再關區間，最後才關選單）。
chip 之間是 AND 交集 Cross-filter policy
- 每個 chip 都是對結果清單的一個獨立 AND 條件——多個條件同時成立才留下（取交集），沒有例外。
- chip 之間互不影響彼此選單裡的選項：開 Device type 永遠是完整 7 類、開 Statuses 永遠是 3 項、開 Devices／Sites 也都是完整內容，不會因為別的 chip 選了什麼而變少。
驗收條件 QA · Given-When-Then
- Given 在選單內選值，Then chip 由空值態變為有值態、label 顯示摘要。
- Given 有兩個以上篩選項（chip 或有字的搜尋框）偏離預設，Then 最右側出現 Reset；只有一個時不出現。
- Given 點某 chip 的 X，Then 只清該 chip、其餘不動。
- Given 點 Reset，Then 所有 chip 回預設、搜尋框清空、Reset 消失。
- Given 點選單與其 chip 以外之處（或按 Esc），Then 關閉選單。
- Given 已選 Device type，Then Devices 選單仍顯示完整裝置清單（不被 Device type 縮限）。
搜尋、觸發與結果
這一節說明使用者操作工具列後，清單如何更新。以 filter-combo-pages（關閉選單即套用）版本為準。
搜尋 Search
- 搜尋跨「目前清單所有可見欄位」（如裝置的 name、model；事件的 device name、event type）。
- 輸入 2 個字以上、停頓 300ms 才觸發；1 個字不觸發。
- 不分大小寫，命中片段以 highlight 標示。
- 點搜尋框的「X」立即清除並重新載入。
觸發來源 Trigger sources
| 來源 | 觸發時機 |
|---|---|
| 搜尋框輸入 | 停頓 300ms、且長度 ≥ 2 字 |
| 搜尋框清除（X） | 立即 |
| 關閉某 chip 選單 | 僅當這次「開→關」期間值有變動才觸發（選了又取消回原狀不算） |
| chip 尾端 X／Reset | 立即 |
| 點欄位排序標頭（Site） | 立即（先切換升/降冪箭頭） |
| 切換頁面（左側導覽） | 立即，且會先把目的頁的篩選重設為預設 |
觸發後的流程 Pipeline
每次觸發都走同一條流程：
- 進入載入態。
- 等待資料回來（示範中為 0.8–1.5 秒）。
- 以所有條件的 AND 交集 算出結果。
- 顯示結果列，或在無交集時顯示空狀態。
載入期間工具列仍可操作；若載入未完又觸發新的一次，會取消前一次、以新觸發重跑。
結果狀態（預設以 site 排序）：
無任何交集時的空狀態：
結果與載入 Result & lazy load
- 初次載入：進入頁面時多數 filter 預設為空（Time 等少數例外見 Section 01），但仍會跑同一條流程載入一批預設資料，因此畫面不會空白。
- 預設排序：裝置清單與 Device / System 事件預設 sort by site（location first）；Access 事件依 access control point、Sensor 事件依 sensor 名稱（見 Section 06）。
- 捲動載入：一次先顯示 50 筆；捲到接近底部時顯示 spinner，再載入下一批 50 筆。
- 空狀態：顯示插圖 ＋「No Matches Found」＋「Please try adjusting filters or use different keywords.」
驗收條件 QA · Given-When-Then
- Given 在搜尋框輸入 2 字以上並停頓，Then 觸發載入並顯示交集結果。
- Given 只輸入 1 個字，Then 不觸發。
- Given 改了某 chip 的值後關閉其選單，Then 觸發載入；未改值就關閉則不觸發。
- Given 多個條件同時成立，Then 結果為各條件的 AND 交集。
- Given 交集為空，Then 顯示「No Matches Found」空狀態。
- Given 結果超過 50 筆，Then 先顯示 50 筆、捲動到底再載入下一批。
- Given 進入裝置清單或 Device / System 事件清單，Then 預設以 site 排序（Access / Sensor 另有預設，見 Section 06）。
使用場景
同一套工具列，不同頁面組不同的 chip。以下是四個主要模組的組合。細節以 OpenSpec unify-search-filter-tag-ux 為準，此處只帶高層次。
Devices 依裝置類型分頁
- 頂部分頁：Camera / NVR / Bridge / Speaker / PoE Switch / VSS / Unknown，各自有專屬欄位集（欄位可顯示/隱藏，偏好依使用者、依類型記住）。
- 工具列：Search（跨可見欄位）＋ Statuses（單選）＋ Sites（多選樹）。
- 預設排序：sort by site。
Message Center 依事件類型分頁
- 頂部分頁：Device / System / Access / Sensor，各自有專屬欄位與篩選維度。
- 工具列：Search ＋ Sites ＋ Cameras（攝影機專用變體）＋ Event types ＋ Time（預設 Last 1 hour）。
- 預設排序：Device / System 事件 sort by site；Access 事件依 access control point；Sensor 事件依 sensor 名稱。
Archive 封存清單
- 工具列：Search（跨可見欄位）＋ 依 site、device、date of footage 篩選。
Users 使用者清單
- 工具列：Search（跨 name、email、organization role、status 等可見欄位）＋ Organization role 篩選 chip，構成 filter combo。
一致性原則 Consistency
| 面向 | 一致做法 |
|---|---|
| 搜尋 | 一律跨「目前清單所有可見欄位」 |
| 預設排序 | 裝置與事件清單一律 location first（sort by site；特例見上） |
| 欄位 | 裝置與 Archive（列表模式）清單欄位可顯示/隱藏；事件欄位不可顯示/隱藏（欄位順序皆不可自訂） |
| 篩選 | 站點（Sites）篩選在各模組都可用 |
各模組的完整欄位集、篩選維度與行為以 OpenSpec 為準：
unify-search-filter-tag-ux（device-type-list-views / message-center-event-type-views / archive-list-view / module-search-bars），此處不逐一重列。