App - Sites Related Pages

App 的 View 頁把裝置改成依 Site 分組呈現。清單為攤平（flattened）結構：每個 群組標題直接顯示該 Site 或 Area 的完整路徑（Site > Area > ...），而非縮排樹狀；群組 可收合。Site 列表與 Portal Site module 同步，Portal 為單一真實來源。

流程 Happy Path

1. 進入 App 的 View 頁（底部 tab bar：View / Customized View / Message / Message / More）。
2. 頂部 control bar 顯示 Site 數量（截圖為「15 sites」）與一個「全部收合」控制。
3. 裝置依所屬 Site / Area 分組；群組標題以攤平的完整路徑呈現：
   • 直接掛在 Site 下：標題為 Site 名稱。
   • 掛在 Area 下：標題顯示自 Site 起算的完整路徑，各層以 > 分隔（如 Site > Area、 最深至 L4：Site > Area > Area > Area > Area）。
4. 每列裝置顯示縮圖、裝置類型圖示、裝置名稱（截圖佔位為「Camera name」）與「...」更多選單。
5. 點群組標題右側的箭頭可展開 / 收合該群組。

by-Site 路徑的顯示為 Sites Breadcrumbs 顯示慣例的 App 應用；該慣例（含截斷）的權威在 06 Sites Breadcrumbs。App 端的 分隔符與排序以 app-site-sync 為準，此處不重述截斷規則。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 進入 View 頁，Then 裝置依所屬 Site / Area 分組顯示。
• Given 某群組掛在 Area 下，Then 標題顯示自 Site 起算、以 > 分隔的完整路徑。
• Given 攤平清單載入，Then Site 與 Area 依顯示標題升冪 alphanumeric 排序。
• Given Portal 端改名某 Site，Then App View 清單反映新名稱。
• Given 組織有未指派裝置，Then 清單出現以組織名稱命名的系統 Site；當其清空後自動移除。

元件與 Token 決策

• 群組為可收合的 accordion；群組標題採攤平完整路徑（非縮排樹狀）。
• 每列裝置：縮圖 + 類型圖示 + 裝置名稱 + 「...」更多選單。
• 攤平顯示與 Device Picker（見 Section 2）共用；tree 顯示則用於 Site Picker（見 Section 3）。

TODO / 未解問題

• control bar 的 Site 計數文案（截圖為「15 sites」）與「全部收合」控制的實際文案 / 圖示，以實作為準。
• 未指派裝置的指派引導文案（app-site-migration 定義行為，未定義 App 端文案），以實作為準。

一個共用的裝置選取元件，取代 App 原本的 device picker。裝置依 Site 階層分組、以攤平 的群組標題呈現，支援多選。所有需要選裝置的 App 頁面都改用這個元件。

流程 Happy Path

1. 任一 App 頁面開啟裝置選取器，navbar 標題為「Device」，右上為「Save」。
2. 頂部搜尋列「Search devices」可在階層內搜尋，結果顯示其所屬 Site / Area 路徑。
3. control bar 顯示已選數量（截圖為「15 / 15 selected」）與右側「Deselect all」。
4. 裝置依所屬 Site / Area 分組；群組標題為攤平完整路徑（Site、Site > Area、最深 L4）， 可展開 / 收合。
5. 每列與每個群組標題左側都有 checkbox；群組層級的 checkbox 可一次選取 / 取消該群組下的裝置。
6. 選取完成點「Save」套用。

群組標題的 by-Site 路徑（Site > Area > ...）與 View by Site（Section 1）同為 Sites Breadcrumbs 顯示慣例的 consumer；該慣例的路徑組成與截斷規則權威在 06 Sites Breadcrumbs，此處不重述截斷規則。

套用此元件的頁面 Integration points

Message System event：NVR 與 RX Bridge 裝置顯示在其所屬的 Site 或 Area 之下。

Add Device / Move Device 的 Site 選取用的是 Site Picker（tree，見 Section 3 / 4）， 不是本裝置選取器。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 任一 App 頁面開啟裝置選取器，Then 裝置依其 Site > Area 階層分組顯示。
• Given 選取器顯示裝置，Then 涵蓋 Camera、NVR、VSS、RX Bridge、IP Speaker、PoE Switch 六類。
• Given 展開一個 Site 群組，Then 顯示其下的 Area 與裝置。
• Given 在「Search devices」搜尋，Then 過濾出相符裝置並顯示其 Site / Area 路徑。
• Given Member 使用者開啟選取器，Then 只顯示其有權限的 Site 與裝置。
• Given 在 Message System event 使用，Then NVR 與 RX Bridge 顯示於其所屬 Site 或 Area 之下。

元件與 Token 決策

• 攤平顯示（群組標題為完整路徑）與 View by Site（Section 1）共用；tree 顯示用於 Site Picker（Section 3）。兩種顯示模式由 app-site-sync 分別定義。
• 多選：每列 + 每群組 checkbox、control bar 顯示已選數量與「Deselect all」、navbar「Save」。
• 此元件為單一共用來源，各頁面沿用相同行為（app-site-device-picker）。

TODO / 未解問題

• 已選數量文案（截圖為「15 / 15 selected」）的實際格式，以實作為準。
• 群組層級 checkbox 的半選（部分選取）表現，截圖未涵蓋，以實作為準。

選取 Site / Area 的對話框，以 tree view 呈現，讓使用者一眼看懂 Site 與 Area 的層級 關係（與 View by Site、Device Picker 的攤平顯示不同）。有多選與單選兩種模式，另含 搜尋與空狀態；下表先總覽兩模式差異，各模式的畫面見後續小節。

兩種模式總覽 Multiple vs single select

多選模式 Multiple select

navbar 為「Cancel / Site / Save」，control bar 顯示「150 / 150 selected」與「Deselect all」， 每列右側為圓形 checkbox；勾選完成後點「Save」套用。

單選模式 Single select

navbar 為「Cancel / Site」、沒有 Save：使用者點選某一列後，該列右側顯示藍色勾選標記， 選取值即被帶回、畫面直接跳轉回原本的畫面（因此不需要 Save 按鈕）。右上提供 「Create site or area」。

未選狀態：

點選一列後（已選）：

樹狀操作 Tree expand / collapse

1. Site 位於樹的最上層（列首為定位 pin 圖示）。
2. 展開一個 Site 節點 → 顯示其下的 L1 Area；Area 以樹狀連接線（└）縮排呈現。
3. 逐層展開：L1 → L2 → L3 → L4（最多 4 層 Area）。
4. 收合 Site 或 Area 節點 → 隱藏其子節點；無子節點者不顯示展開指示器。

樹狀展開 / 收合為通用 tree pattern；Portal 端的 Tree View 元件見 03 Design Pattern - Tree View。App 端 Site Picker 的展開層級（L1–L4）以 app-site-sync 為準，此處不重述 03 的行為。

搜尋 Search

於搜尋列輸入關鍵字（截圖為「area」）後，相符文字高亮；命中節點連同其父層 Site / Area 一併顯示，不相關節點隱藏（截圖為多選模式，命中列仍帶 checkbox）。

搜尋時「顯示命中節點的所有父層、隱藏不相關節點」的比對 / 展開行為沿用 Tree View 搜尋； 其權威在 03 Design Pattern - Tree View，此處不重述。

空狀態 Empty

無任何 Site 時顯示定位 pin 圖示、「No Sites Found」與「Create a site to organize your devices.」，右上仍提供「Create site or area」。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 開啟 Site Picker，Then 以 tree view 呈現、Site 位於最上層。
• Given 展開一個 Site 節點，Then 顯示其下的 L1 Area。
• Given 展開 L1 / L2 / L3 Area 節點，Then 分別顯示 L2 / L3 / L4 Area。
• Given 收合某節點，Then 隱藏其子節點。
• Given 某 Site 或 Area 無子節點，Then 不顯示展開指示器。
• Given 在搜尋列輸入關鍵字，Then 相符文字高亮、命中節點連同其父層一併顯示、不相關節點隱藏。
• Given 單選模式點選一列，Then 該列顯示藍色勾且不出現多選的計數 / Save。
• Given 組織無任何 Site，Then 顯示「No Sites Found」空狀態。

元件與 Token 決策

• Tree view（縮排 + └ 連接線）；Site 列首為定位 pin，Area 依層級縮排。
• 兩種模式的差異：navbar（有無 Save）、每列控制（圓形 checkbox vs 藍色勾）、有無計數。
• Site Picker 用於 Add Device 的 Site 選取與 Move Device 目的地選取（見 Section 4）。

TODO / 未解問題

• 多選模式（checkbox + Save + 計數）的實際進入點 / 使用情境，app-site-sync 僅明確定義 單選目的地情境，多選入口以實作為準。
• 「150 / 150 selected」的實際計數格式，以實作為準。

搬移裝置時選取目的地 Site / Area 的畫面。沿用 Site Picker 的 tree 呈現，額外標出裝置 目前所在位置，並在底部提供固定的「Move device」按鈕。

流程 Happy Path

1. 對某裝置發動搬移，開啟「Move to」（navbar：Cancel / Move to）；control bar 左側提示 「Select a destination」，右側為「Create site or area」。以 tree 瀏覽 Site / Area，裝置目前 所在的 Area 標示「Current」。

2. 點選目的地 Site 或 Area，該列顯示藍色勾選標記。

3. 點底部固定按鈕「Move device」送出搬移。

狀態與邊界

驗收條件 QA · Given-When-Then

• Given 開啟 Move to，Then 以 tree 顯示 Site / Area 且裝置目前位置標示「Current」。
• Given 點選一個目的地，Then 該列顯示藍色勾。
• Given 點「Create site or area」，Then 可建立新 Site / Area 並指派為目的地。
• Given 選好目的地點「Move device」，Then 裝置搬移至該 Site / Area。

元件與 Token 決策

• Tree 呈現沿用 Site Picker（Section 3）；差異為 control bar 提示「Select a destination」、 標示「Current」、底部固定「Move device」按鈕。
• 「Create site or area」建立行為以 Section 5 為權威。

TODO / 未解問題

• 「Current」列是否可被選為目的地（或為 disabled），截圖未明確，以實作為準。

在 Add Device 與 Move Device 流程中，原本的「Create Site」按鈕改為「Create site or area」。 表單頂部以 segmented control 切換 Site / Area 兩種型別，欄位隨型別變動。xLite 組織不提供 Area，按鈕維持「Create Site」。

流程 Happy Path

1. 在 Site Picker（付費組織）點「Create site or area」，開啟建立表單（navbar：Create site or area / Create），頂部 segmented control 選「Site」或「Area」。
2. 選「Site」型別：填「Site name」（必填），「Site location (Optional)」可輸入地址或於 地圖上設定（「Type an address or set on the map」）。

3. 選「Area」型別：填「Area name」（必填），選「Parent site」（必填，「Select parent site」；父層可為 Site 或另一個 Area）。

4. 點右上「Create」建立；於 Add Device / Move Device 流程中可將裝置直接指派到新建的 Site / Area。

型別與欄位 Type-specific fields

xLite 與付費組織差異 Plan differences

結構上限 Structural limits

Site 結構的單一真實來源為 Portal Site module（見 01 Site Management）；App 端建立時以 app-site-sync 反映上述上限。

Add Device 的 Site 指派規則 Site assignment on Add Device

驗收條件 QA · Given-When-Then

• Given 付費組織於 Site Picker，Then 顯示「Create site or area」按鈕。
• Given xLite 組織，Then 顯示「Create Site」按鈕、無型別選擇、且不提供建立 Area。
• Given 選「Site」型別，Then 表單顯示 Site name（必填）與 Site location（選填）。
• Given 選「Area」型別，Then 表單顯示 Area name（必填）與 Parent site（必填）。
• Given 於 Add Device / Move Device 建立 Site / Area，Then 可將裝置指派到新建的節點。
• Given 組織無任何 Site 而發動 Add Device，Then 先提示建立 Site 才能繼續。
• Given 新增 NVR 或 VSS 並選定 Site，Then 其所有 channel 自動指派到同一 Site。
• Given 建立 Area 超過深度或每層數量上限，Then 系統擋下並提示對應上限錯誤。

元件與 Token 決策

• 表單：segmented control（Site / Area）+ list 型輸入欄位 + navbar「Create」。
• Site location 欄位帶地圖選取（chevron 進入）；Area 的 Parent site 欄位帶父層選取（chevron 進入）。

TODO / 未解問題

• navbar 標題與入口按鈕在截圖為「Create site or area」（sentence case），OpenSpec 敘述為 「Create Site or Area」（title case）；以截圖 / 實作文案為準。
• 各上限錯誤訊息的實際文案（OpenSpec 定義行為，未定義文案），以實作為準。

刪除裝置的破壞性確認畫面：要求使用者輸入「DELETE」才能執行，並明確警示資料將永久 清除。此畫面隨附於 App 設計板，但不屬於 site-management-for-app 三個 capability （app-site-sync / app-site-migration / app-site-device-picker）的需求範圍。

範圍註記：本節僅據實呈現設計板上的畫面與文案，供交接完整性參考。其行為 / 驗收的 權威來源不在 site-management-for-app 的 OpenSpec；是否納入本次 Site 專案待與 PM 確認 （見 TODO）。

畫面內容 What the screen shows

1. 頂部警示三角圖示。
2. 標題「Delete this device」，副標「All associated data will be permanently erased.」。
3. 紅色「WARNING!」與警示區塊：「All associated data--including SD card and cloud recordings--will be permanently erased. Linked configurations and dependent devices will also be removed.」
4. 「Type DELETE to confirm」輸入欄（placeholder「DELETE」）。
5. 「Delete Device」按鈕（未輸入前為 disabled 樣式）與「Cancel」。

狀態與邊界

TODO / 未解問題

• 此「Delete device」是否屬本次 Site 專案範圍待 PM 確認；site-management-for-app 的三個 capability 未定義刪除裝置需求。
• 「Delete Device」的實際啟用條件（是否需完全相符「DELETE」、大小寫等）以實作為準。