Site Management
Visual basis: vortex-1.0 — verify behavior / copy / structure, not pixel style.
Why we're building this
Most operator work starts after an event. When something happens, the team needs to reach the right camera fast — to review footage, trace a person across cameras, or put a report together. Almost every task that comes next depends on finding that one camera first.
But across many properties and thousands of devices, that lookup takes too long. Site Management makes location the first filter: pick the site first, then every step after gets faster.
What value it brings
Location first. Site Management makes location the first filter, so every step after an event is faster.
- Find faster — reach the right camera in seconds
- Real-world structure — Sites and Areas map to actual buildings
- Built for scale — thousands of devices across all sites
Further reading: Site management introduction for customers
建立一個 Site
流程 Happy Path
- 已有 Site 時,於側欄 Sites 面板點「+」開啟建立對話框。(若組織尚無任何 Site,入口是主區的「Create site」CTA,見 US10。)
- 開啟對話框:左側 Name / Location 表單,右側 Google 地圖。
- 輸入 Name(Location 選填),地圖隨輸入的地址定位。
- 送出「Create site」→ 進入剛建立的 Site(尚無樓層圖與設備)。
xLite: 此流程在 xLite 組織有差異,規則見 US11。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| Name 未填 | 開啟對話框 | 「Create site」維持 disabled |
| 地圖載入失敗 | Google Map API 失敗 | 顯示地址文字輸入 fallback + map unavailable 訊息(實際文案以實作為準,spec 僅描述行為) |
| 名稱重複 | 送出時他人已建同名 | 顯示衝突錯誤並建議替代名稱 |
驗收條件 QA · Given-When-Then
- Given 在對話框只填 Name 並送出,Then 建立一個無 Location 的 Site。
- Given Name 為空,Then「Create site」為 disabled。
- Given 在地圖搜尋欄輸入地址,Then 地圖 geocode 並置中到該位置。
完整行為情境(網路 / 伺服器錯誤、地圖 quota、座標驗證等)以 OpenSpec 為準,不在此重列。
元件與 Token 決策
- 對話框:分割式 1116 × 612px(左表單 558 / 右地圖 558)。
- 元件:
Input、Button/primary(Create site)、Google Map。
TODO / 未解問題
- Name 長度上限與允許字元,待與 PM 確認(OpenSpec 標為 validation error,但未定義上限)。
Add Area(在 Site 或 Area 下新增)
沿用 Create Site 對話框,差異只有一個:Area 沒有 Location 與地圖(只有第一層 Site 有 Location)。本頁不重畫,引用 Create Site 的畫面並標出差異;行為規則見 OpenSpec。
術語(已確認): 正式採用「Add Area」(與 Add Floor plan / Add Device 一致)。OpenSpec 的「Create Area」僅為需求命名,UI 一律用 Add。
xLite 不適用本節,原因與規則見 US11。
流程 Happy Path
- 選一個 Site 或 Area,點「+ Add」→「Add Area」。
- 開啟對話框:只有 Name 欄位(無 Location、無地圖)。
- 輸入 Area 名稱 → 送出 → 新 Area 巢狀出現在所選父層下。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 與 Site 的差異 | 開啟 Add Area | 不顯示 Location 欄位與 Google Map |
| Name 未填 | 開啟對話框 | 送出按鈕維持 disabled |
| 已達層級上限 | 在第 4 層 Area 下新增 | 依 OpenSpec 階層規則限制(最多 L4 Area) |
驗收條件 QA · Given-When-Then
- Given 開啟 Add Area 對話框,Then 不顯示 Location 欄位或 Google Map。
- Given 選一個 Site 並送出 Area 名稱,Then 在該 Site 下建立 Layer-1 Area。
- Given Area 名稱為空,Then 送出被拒並提示需輸入名稱。
各層級(L1–L4)建立規則與錯誤情境以 OpenSpec 為準:
site-configuration · Create Area。
元件與 Token 決策
- 沿用 Create Site 對話框,移除 Location 欄位與地圖(版面收合為單欄表單)。
- 元件:
Input、Button/primary。
瀏覽與選取 Site
流程 Happy Path
- 從導覽列點 Site icon 進入 Site 頁:左側為 Site List(樹狀),右側為 Device Display Area。初始未選取任何 Site,右側顯示「No Site Selected」。
- 在左側樹點選一個 Site。右側只顯示該 Site 直屬的樓層圖與設備(不含其 Area 底下的設備 —— 要看 Area 的設備須點選該 Area);若該 Site 無直屬設備,顯示「No Devices Added」。
- 點選有設備的 Site,右側列出設備(Name、Model、Device type、Status)。可用搜尋框過濾、展開 / 收合樹節點。
xLite: 此流程在 xLite 組織有差異,規則見 US11。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 未選取 Site | 進入頁面 | 右側顯示「No Site Selected」 + 「Select a site from the side menu to view its resources.」 |
| Site 無設備 | 選取尚無設備的 Site | 顯示「No Devices Added」空狀態 |
| 選 Site 或 Area | 點選任一節點 | 右側只顯示該節點直屬的樓層圖與設備,不含子層(Site 不含其 Area 的設備;Area 不含其子 Area 的設備) |
| IP Speaker / PoE Switch | 設備列表初始 | Status 與 Model 初始顯示「-」 |
驗收條件 QA · Given-When-Then
- Given 選取一個 Site,Then 右側只顯示該 Site 直屬的設備(不含其 Area 底下的設備)。
- Given 選取一個 Area,Then 只顯示該 Area 直屬的設備(不含其子 Area 的設備)。
- Given 在 Site 搜尋框輸入關鍵字,Then 樹只顯示名稱含關鍵字的 Site / Area。
「組織尚無 Site → 顯示首次建立提示、設備操作 disabled」由 US10「首次使用(尚未建立任何 Site)」涵蓋,本頁不重列。
載入錯誤、搜尋無結果、被他人刪除等情境以 OpenSpec 為準(site-page-layout Error Handling)。
元件與 Token 決策
- 兩欄版面:左 Site List panel + 右 Device Display Area。
- 元件:Tree View(Site / Area 樹,英數遞增排序)、device 列表表格。
- 顯示模式:List view / List view with thumbnails(Camera 顯示快照、其餘顯示產品圖)。
移動設備到別的 Site
流程 A · 批次移動 Batch move
- 在設備列表勾選一或多台設備。搜尋與篩選列不會被取代,仍然可見;「Move to」與「Delete」兩個動作在未勾選時也在(只是無對象),勾選後在同一列的搜尋與篩選右側出現已選數量文字(key screen 為
3 Devices selected,是一般文字標籤、不是藥丸)。跨頁時另有全選按鈕(LUMIXIS 實驗原型為「Select all N devices」)。
- 點「Move to」開啟移動對話框(標題「Move to」):說明列「Select a destination for N devices.」;下方為搜尋列「Search sites」與目標 Site / Area 清單(單選,目前所在場域標「Current」且不可選,但其子層仍可選)。底部按鈕為「Move N devices」與「Cancel」。
目的地選擇使用單選 Site picker,規格見 Sites Related Pages 的 Section 09。此處為攤開形式(dialog 的職責就是挑目的地)。該 picker 不是 Tree View、 沒有展開 / 收合 —— 所有層級一直可見,階層以縮排表達。裝置當前所在的節點標為
Current且 不可選,但其子層仍可選;搜尋過濾、命中 highlight 與無命中空狀態的規則同樣在該節,本節不重述。
- 可在搜尋框輸入關鍵字即時過濾目標(命中以 highlight)。選定目標後點「Move N devices」→ 移動完成、設備列表更新。
流程 B · 單個設備 · hover row Single-device via row hover
- 在設備列表 hover 某一列,該列最右側出現動作組:Settings / Move to / VCA / Delete(四個,由左至右)。
註:VORTEX key-screen 的設備列最右側提供 四個動作,由左至右為 Settings(齒輪)、Move to(資料夾箭頭)、VCA、Delete(垃圾桶)。VCA 的行為不在本 deck 範圍,僅記錄它佔了這一格。(LUMIXIS 實驗原型此處僅有 Settings 齒輪鈕——以 VORTEX key-screen 為準。)
- 點該列的「Move to」→ 開啟同一個 Move 對話框(見流程 A 步驟 2),對象為該 1 台設備;之後步驟同流程 A。(單一設備時的對話框內單 / 複數文案以 key-screen 畫面為準。)
xLite: 此流程在 xLite 組織有差異,規則見 US11。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 未勾選設備 | 進入設備列表 | 搜尋 / 篩選列與 Move to / Delete 皆在,但不顯示已選數量文字 |
| 整頁全選 | 勾表頭全選且有跨頁設備 | 顯示全選按鈕可全域選取所有頁(原型為「Select all N devices」) |
| 目前所在場域 | Move 對話框 | 標「Current」、不可選(其子層仍可選) |
| 未選目標 | 尚未選取目標 | 「Move N devices」維持 disabled |
| 搜尋無結果 | 目標搜尋無命中 | 顯示空狀態「No Matches Found」(文案與版面規則見 Section 09) |
驗收條件 QA · Given-When-Then
- Given 選取設備並點「Move to」、選目標 Site,Then 設備移到目標 Site。
- Given 選目標 Area,Then 設備移到該 Area。
- Given 設備位於 Area、目標選母 Site,Then 設備直屬到母 Site。
- Given 整頁全選且有跨頁設備,Then 顯示全選按鈕可全域選取(原型「Select all N devices」)。
- Given 在 Move 對話框,Then 目前所在場域標「Current」且不可選,但其子層仍可選。
- Given 開啟 Move 對話框,Then 目的地清單所有層級一次可見,沒有展開 / 收合控制。
- Given hover 設備列,Then 該列最右側顯示 Settings / Move to / VCA / Delete 四個動作。
- Given 點該列的 Move to,Then 開啟同一 Move 對話框、對象為該台,選定目標後可送出移動。(單 / 複數文案以 key-screen 為準。)
各裝置類型適用性、批次 / 全域選取、錯誤情境以 OpenSpec 為準(site-device-operations)。
元件與 Token 決策
- 列表工具列:搜尋 + 篩選 chip 與「Move to」/「Delete」動作共存於同一列,且不因勾選而互相取代; 勾選後多出一個已選數量的文字標籤(非藥丸),跨頁時多出全選按鈕。
- 目的地選擇:單選 Site picker(攤開形式),規格見 Sites Related Pages Section 09。 不是 Tree View(無展開 / 收合),階層以縮排表達;選取以左側打勾表示、不使用 radio; 含「Current」標記。元件細節與 token 由該節擁有,本節不重述。
TODO / 未解問題
- 單一設備(流程 B)時對話框的單複數文案(如「Move 1 device」/「Select a destination for 1 device.」)以 key-screen 為準。
- 全選按鈕的英文文案仍待 VORTEX key-screen 定版(已選數量文字已定版為
3 Devices selected的形式)。(us4-01 已改為source: figma,直接由 key screen05 - Site Hover and Device Selected and Floor Plans Collapse匯出,故文案一旦在 Figma 定版,重新建置即會更新。)
(「No Matches Found」空狀態文案原列為未解問題,已解決:它是家族統一字串,權威在 Sites Related Pages Section 09, 與 Tree View、Filter Combo、Device Picker 各節一致。)
刪除設備
流程 A · 批次刪除 Batch delete
- 在選取動作列點「Delete」。
- 開啟「Delete devices」對話框:「Delete N devices? All associated data will be permanently erased.」下方為「Type DELETE to confirm」輸入框與紅色 WARNING。輸入正確「DELETE」前,「Delete N devices」維持 disabled。
- 在輸入框打「DELETE」→ 按「Delete N devices」→ 刪除完成、設備列表更新。
流程 B · 單個設備 · hover row Single-device via row hover
- 在設備列表 hover 某一列,右側出現動作組:Settings / Move to / VCA / Delete(四個)。
- 點該列的 Delete → 開啟同一個 DELETE-confirm 對話框(見流程 A 步驟 2),對象為該 1 台設備;之後步驟同流程 A(Type DELETE 才可送出、資料抹除警示不變)。(單一設備時的對話框內單 / 複數文案未有 VORTEX key-screen,以實作為準,見 TODO。)
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 輸入非 DELETE | 確認框輸入錯誤文字 | 「Delete N devices」維持 disabled |
| 資料抹除警示 | 開啟對話框 | 紅色警示區,標題與內文是兩個獨立元素:標題「WARNING!」(紅字 + 驚嘆號圖示);內文「All associated data--including SD card and cloud recordings--will be permanently erased. Linked configurations and dependent devices will also be removed.」(key screen 用兩個半形連字號 --,不是 em dash) |
| NVR / VSS 管理的 Camera | 選取要刪除 | 不可獨立刪除,提示須透過母 NVR / VSS 管理;混選時列出不可刪者、其餘可繼續 |
驗收條件 QA · Given-When-Then
- Given 選取設備並點「Delete」,Then 開啟確認對話框並顯示資料抹除警示。
- Given 在確認框輸入「DELETE」並送出,Then 刪除所選設備、其相關資料永久抹除。
- Given 在刪除設備確認框輸入非「DELETE」,Then 刪除被拒、「Delete N devices」維持 disabled。
- Given 選取的是 NVR / VSS 管理的 Camera,Then 提示不可獨立刪除。
- Given hover 設備列並點該列 Delete,Then 開啟同一 DELETE-confirm 對話框、對象為該台,DELETE-confirm 邏輯(Type DELETE 才可送出、資料抹除警示)不變。(單 / 複數文案細節以實作為準。)
批次 / 全域刪除、混選管理相機等完整情境以 OpenSpec 為準(site-device-operations)。
元件與 Token 決策
- Delete 確認對話框:「Type DELETE to confirm」輸入框 + WARNING alert(error)。
- 進入點:選取動作列的「Delete」按鈕(元件定義見 US4)。
TODO / 未解問題
- 單一設備(流程 B)時 DELETE-confirm 對話框的實際 UI 文案(標題 / 按鈕的單複數)以實作為準。
編輯 Site / Area(改名與位置)
流程 Happy Path
- 選一個 Site 或 Area,在右側標題列點「Edit」(pencil 圖示)。
- 開啟「Edit site」對話框:top-level Site 為分割版面(左 Name / Location 表單,右 Google 地圖,預帶現有定位 marker)。
- 改 Name(必填) / 調整 Location(選填,可清空)→ 按「Save changes」。
- 對 Area 點「Edit」時,沿用同一對話框但移除 Location 與地圖(單欄、只有 Name)——只有第一層 Site 有 Location。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| Name 清空 | 編輯後清空名稱 | 拒絕儲存並要求輸入名稱(拒絕空字串) |
| Area 無 Location | 編輯 Area | 不顯示 Location 欄位與 Google Map |
| 清空 Site Location | top-level Site 清空地址 | 移除該 Site 的 Location |
驗收條件 QA · Given-When-Then
- Given 編輯 Site 名稱並按「Save changes」,Then 系統更新為新名稱。
- Given 編輯 Area 名稱並儲存,Then 系統更新該 Area 名稱。
- Given 名稱清空並送出,Then 拒絕並要求輸入名稱。(同 US1 建立一個 Site / US2 Add Area 的 Name 必填規則)
- Given 編輯 Area,Then 不顯示 Location 欄位或 Google Map。(同 US2 Add Area 規則:只有第一層 Site 有 Location)
- Given top-level Site 已有 Location 並清空,Then 移除該 Site 的 Location。
完整行為情境以 OpenSpec 為準:
site-configuration · Rename Site or Area/Edit Site Location。
元件與 Token 決策
- 進入點:Site 標題列「Edit」按鈕(pencil 圖示)。
- Edit site 對話框:沿用 Create site 的分割版面(左表單 / 右地圖),欄位預帶現有值;送出鈕「Save changes」。
- Edit Area:同一對話框移除 Location 與地圖,收合為單欄表單。
- 元件:
Input、Button/primary(Save changes)、Google Map(僅 top-level Site)。
TODO / 未解問題
- Edit Area 對話框(Name-only 單欄版)的實際 UI 以實作為準。
- 是否允許在 Edit 內變更父層(Move)?移動規則以 OpenSpec 為準(
site-configuration · Area movement restriction:Area 一旦建立即不可移動)。
刪除 Site / Area
流程 Happy Path
- 選一個 Site 或 Area,在標題列點「Delete」(trash 圖示,danger)。
- 若該 Site / Area 仍有子 Area、樓層圖或設備 → 開啟「Cannot Delete Site」警示:「"{名稱}" cannot be deleted.」 + 「Remove all areas, floor plans, and devices before deleting this site.」,只有「Cancel」。
- 若已清空(無子 Area、無設備)→ 開啟「Delete site」確認框:「Delete "{名稱}" ? This cannot be undone.」 + 「Type DELETE to confirm」輸入框。輸入正確「DELETE」前,「Delete site」維持 disabled。
- 在輸入框打「DELETE」→ 按「Delete site」→ 刪除完成、導回父層。
xLite: 此流程在 xLite 組織有差異,規則見 US11。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 仍有子層或設備 | 點 Delete | 顯示「Cannot Delete Site」警示,須先移除 areas / floor plans / devices |
| 輸入非 DELETE | 確認框輸入錯誤文字 | 「Delete site」維持 disabled |
| 取消 | 關閉對話框未確認 | 取消刪除操作 |
| 刪除其中一個 Area | 確認刪除 | 父 Site 與同層其他 Area 不受影響 |
驗收條件 QA · Given-When-Then
- Given Site / Area 仍有子 Area 或設備並點 Delete,Then 顯示不可刪除警示。
- Given Site / Area 已清空並在確認框輸入「DELETE」送出,Then 刪除該 Site / Area 並導回父層。
- Given 在刪除 Site / Area 確認框輸入非「DELETE」,Then 刪除被拒、「Delete site」維持 disabled。
- Given 關閉對話框未確認,Then 取消刪除。
- Given 刪除某個 Area,Then 父 Site 與同層其他 Area 維持不變。
各層級刪除前置條件(devices / Areas / child Areas 必須先移除或刪除)與隔離規則以 OpenSpec 為準:
site-configuration · Delete Site/Area prerequisites、Delete Area isolation。
元件與 Token 決策
- 進入點:標題列「Delete」按鈕(trash 圖示,danger)。
- Cannot Delete 警示:標題「Cannot Delete Site」 + 說明,單一「Cancel」。
- Delete 確認框:「Type DELETE to confirm」輸入框 + danger「Delete site」按鈕(輸入正確 DELETE 才 enable)。
TODO / 未解問題
- Delete Area 對話框標題文案以實作為準,行為與 Delete Site 相同。
- 不可刪除判斷的文案目前合併為單一句(areas / floor plans / devices);OpenSpec 另將「仍有 Areas / child Areas」與「仍有 devices」分列不同警示,是否細分待 PM 確認。行為以 OpenSpec 為準。
樓層圖區(瀏覽與卡片)
流程 Happy Path
- 選一個 Site 或 Area,「Floor plans」區位於 Site 資訊列與設備表之間,只顯示屬於該層的樓層圖。
- 標題列為 map 圖示 + 「Floor plans (N/10)」計數。每張卡片:上方地圖縮圖、下方樓層圖名稱 + 「N Devices」 + 右側「⋯」選單鈕;卡片以單列水平捲動排列。
- 點卡片「⋯」→ 開啟選單:「Go to floor plan」「Basic settings」「Delete」(Delete 為 danger)。〔此展開選單在 VORTEX key-screen 無對應畫面,僅文字描述。〕
- 該層無樓層圖時,區內置中顯示空狀態:「No Floor Plans Added」 + 「Add floor plans to this site to view and manage them here.」
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 切換選取 | 選不同 Site / Area | 樓層圖區內容換成新選取層的樓層圖 |
| 計數 | 3 張、上限 10 | 標題顯示「Floor plans (3/10)」;0 張顯示「Floor plans (0/10)」 |
| 卡片超出寬度 | 樓層圖多於可視寬 | 可水平捲動檢視其餘卡片 |
| 無樓層圖 | 該層 0 張 | 置中空狀態「No Floor Plans Added」 + 說明 |
驗收條件 QA · Given-When-Then
- Given 選取 Site / Area,Then 樓層圖區只顯示屬於該層的樓層圖。
- Given Site 有 3 張、上限 10,Then 標題顯示「Floor plans (3/10)」。
- Given 切換到另一個 Site / Area,Then 樓層圖區換成新選取層的樓層圖。
- Given 點卡片的「⋯」選單鈕,Then 顯示樓層圖動作下拉選單。
- Given 該層 0 張樓層圖,Then 置中顯示「No Floor Plans Added」與說明文字。
- Given 進入 Site 頁,Then Floor plans 區塊預設為展開。
- Given 點標題列的 chevron,Then 卡片列收起、區塊只留標題列,下方 Devices 區塊上移並增高以吸收釋出空間,但其內容不變。
- Given 區塊為展開狀態,Then chevron 朝下;Given 區塊為收合狀態,Then chevron 朝右(標題文字與計數不變)。
- Given xLite 組織,Then 區塊顯示「See camera coverage across your entire property at a glance.」與「Explore Floorplans」CTA,而非樓層圖卡片。
- Given xLite 組織,Then 標題為「Floor plans」且不顯示 (N/10) 計數。
各情境完整行為以 OpenSpec 為準:
floor-plan-display。
收合 Collapse
Floor plans 標題列可收合整個區塊,預設展開。chevron 緊接在「Floor plans (N/10)」文字右側
(不是靠區塊最右緣),方向隨狀態改變:展開時朝下、收合時朝右。標題文字與計數在兩種狀態下
完全相同,唯一的差別就是 chevron 方向與卡片列的有無。
| 狀態 | chevron | 區塊高度 | 卡片列 | 下方 Devices 區 y | Devices 區高度 |
|---|---|---|---|---|---|
| 展開(預設) | 朝下 | 190 | 顯示(高 154,距標題 16) | 305 | 703 |
| 收合 | 朝右 | 20(僅標題列) | 隱藏 | 135 | 873 |
收合釋出的 170 由下方 Devices 區塊吸收:Devices 區塊上移 170(y 由 305 到 135),且自身高度 增加 170(703 → 873),所以它顯示的列數更多、內容本身不變。換句話說收合不會隱藏或改變 Devices 的任何內容,但它確實會讓 Devices 區塊變高 —— 兩者不可混為一談。
收合後的樣子(與本節最上方那張展開狀態對照看)—— Floor plans (3/10) 標題列仍在、chevron 轉為
朝右、卡片列消失,Devices 區塊緊接在標題列下方:
尺寸取自 key screen:展開為
04 - Site Selected (With Devices)(6845:49523)、收合為05 - Site Hover and Device Selected and Floor Plans Collapse(6856:68408)。兩者的區塊寬度 同為 1496。
xLite Free plan
xLite 組織不提供 Floorplans 功能。此區塊改為顯示導流內容,Devices 區塊照常顯示:
- 說明文字:
See camera coverage across your entire property at a glance. - CTA:
Explore Floorplans→ 導向 Floorplans 功能頁
版面(key screen 06 - Free Org,11628:27303):區塊高度仍為 190、卡片列的位置改放一個
240 × 76 的導流區塊並水平置中;CTA 為 primary 按鈕、133 × 24。標題為 Floor plans,
不帶 (N/10) 計數(付費版才有計數);標題列的 chevron 仍在,故 xLite 的區塊同樣可收合。
這是區塊層級的行為,以 Figma key screen 為準。
add-floor-plan-license-control目前只 規範頁面層級(Floorplans 頁整個 content area 換成商業頁、直接開 URL 會 redirect,見 Sites Related Pages Section 03)。 兩者不是同一條規則:本區塊只換掉自己、Devices 仍在(key screen 中 Devices 區起始位置與付費版 相同),文案較短,且行動方向是導向功能頁而非聯絡經銷商。用詞說明:區塊標題是
Floor plans(平面圖本身),CTA 是Explore Floorplans(VORTEX 功能 名)。兩者並存且都正確,不是錯字。
元件與 Token 決策
- Floor Plans 區:標題(map 圖示 + 「Floor plans (N/10)」+ 收合 chevron,展開朝下 / 收合朝右)
- 水平捲動卡片列;展開 190 / 收合 20,寬 1496。卡片 160 × 154(縮圖 160 × 100 + 資訊列 160 × 54),卡片間距 24。
- 樓層圖卡片:上方縮圖、下方名稱 + 「N Devices」 + 「⋯」context menu(Go to floor plan / Basic settings / Delete,Delete 為 danger)。
- 空狀態:置中標題 + 說明文字。
TODO / 未解問題
- 樓層圖 context menu 展開狀態的實際 UI 以實作為準。
- 樓層圖動作(Go to floor plan / Basic settings / Delete)實際流程,以實作為準。
- 收合狀態是否需要保存(切換 Site / 重新載入後是否記得使用者收合過)未在 key screen 中呈現,待確認。
進入設備設定(Device Settings 導頁)
流程 Happy Path
- 在設備列表 hover 某一列,右側出現齒輪 icon = Device Settings(點擊後跳轉)。
- 點該列的齒輪 → 直接導向該設備的 Device Settings 頁。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| 每列都有入口 | 設備顯示於列表 | hover 該列時右側顯示連到 Device Settings 的設定圖示 |
| 有檢視權限 | 使用者可檢視該設備 | 設定圖示可點擊、可運作 |
| 權限受限 | Member 等角色 | 入口顯示 / 可用與否依權限(見 OpenSpec site-permissions) |
驗收條件 QA · Given-When-Then
- Given 設備顯示於列表,Then 每列都有可進入 Device Settings 的入口(hover 顯示設定圖示)。
- Given 點某列的設定圖示,Then 直接導向該設備的 Device Settings 頁。
- Given 使用者有檢視該設備的權限,Then 入口可點擊且可運作。
導頁目的地(Device Settings 頁)與角色權限規則以 OpenSpec 為準:
site-device-operations/site-permissions。
元件與 Token 決策
- 設備列右側 hover 顯示齒輪 icon(Device Settings 入口)。
首次使用(尚未建立任何 Site)
另一個空狀態(「有 Site 但沒選」)已由 US3 涵蓋(us3-01-no-selection 對應 key-screen 02「No Site Selected」),本頁僅描述「Organization 完全沒有 Site」的首次使用空狀態。
流程 Happy Path
- 使用者進入 Site 頁,Organization 尚未建立任何 Site。
- 主區域中央顯示空狀態:地點圖示 + 「Let’s create your first Site」 + 主要按鈕「Create site」(藍色,含「+」圖示)。
- 側欄 Site list 區為空(只保留標題「Sites」、「+」、Search sites 搜尋框,沒有任何 Site / Area 列)。
- 點「Create site」→ 進入 Create site 對話框(見 US1)。
狀態與邊界
| 狀態 | 觸發 | 畫面 / 文案 |
|---|---|---|
| Organization 無 Site | 進入 Site 頁 | 主區中央顯示「Let’s create your first Site」 + 「Create site」CTA |
| Site list 區 | 同上 | 僅保留標題列、「+」與搜尋框,無 Site / Area 列 |
| 設備相關操作 | 仍處於空狀態時 | 全部 disabled,直到至少建立一個 Site |
| 側欄「+」 | 同上 | 也可從這裡開啟 Create site(與主區 CTA 等效) |
驗收條件 QA · Given-When-Then
- Given Organization 無 Site 並進入 Site 頁,Then 主區顯眼處顯示引導使用者建立第一個 Site 的訊息。
- Given 空狀態顯示時,Then 訊息提供明確的建立 Site CTA 按鈕「Create site」。
- Given 處於空狀態時,Then 所有與設備相關的操作維持 disabled,直到至少建立一個 Site。
- Given 點主區「Create site」或側欄「+」,Then 進入 Create site 對話框(行為見 US1)。
完整行為情境以 OpenSpec 為準:
site-page-layout · Empty state prompt。
元件與 Token 決策
- 空狀態 illustration:地點圖示(與 US3 us3-01-no-selection 同元件,不同文案)。
- 標題:「Let’s create your first Site」。
- CTA:
Button/primary「Create site」 + 「+」圖示。 - 側欄保留「Sites」標題列、「+」與 Search sites(行為對應 Create site)。
xLite(免費方案)差異
xLite 是免費方案(部分文件稱 Free Org,本家族一律用 xLite)。它的限制會影響本 deck 多個 流程,規則在此陳述一次;受影響的各節不重述限制內容,一律回到本節查規則。
限制 Limits
| 項目 | xLite | 付費(xStd / xPro) |
|---|---|---|
| Site 階層 | 僅單層,不提供 Area | Site + L1–L4 Area |
| Site 數量 | 每組織最多 10 個 | 上限 1000 |
| Floorplans | 不提供,區塊改顯示導流內容(見 US8) | 提供 |
下圖可看到其中兩個限制同時成立:sidemenu 是平的單層清單(沒有 Area 子層)、Floor plans 區塊
換成導流內容;Devices 區塊則照常顯示,不受方案影響。Site 數量上限在單張畫面上看不出來
(達上限的擋下畫面沒有 key screen,見下方 TODO)。
每列仍顯示箭頭。 Site 是容器種類,依 Design Pattern: Tree View Section 01 「箭頭由「節點種類」決定,不由當下有無子項決定」的規則一律顯示箭頭 —— xLite 不提供 Area, 不代表 Site 列就不畫箭頭。展開一個沒有子項的 Site 在 site tree 這個 profile 下不顯示任何列 (同 Section 01)。箭頭與空狀態的規則權威都在該 deck,本節只記錄它在 xLite 同樣成立。 (實驗性 LUMIXIS prototype 目前只在節點有子項時才畫箭頭,與這條規則不符 —— 以 VORTEX key screen 與 Tree View 的規則為準。)這些 Site 不會變淡:Tree View 的「空容器」看的是 有沒有直屬資源,不是樹上有沒有子節點,有 device 的 Site 就不算空(同 Section 01)。
升級入口 Upgrade affordance
xLite 組織的 header 右上多一顆 Upgrade 按鈕(付費組織不顯示),位於喇叭 / 說明 / 頭像三個
既有 icon 的左側。外觀是漸層外框(青到紫) + 圓框上箭頭 icon + 文字 Upgrade,在深色 header 上
是整條列唯一的彩色元素,刻意做得顯眼。
同一顆按鈕也出現在 Floorplans 頁的商業頁(見 Sites Related Pages Section 03), 兩處是同一個 header 元件,不是各自畫的(在 Figma 上兩張 key screen 的 header 指向同一個 元件)。
這是全域的方案升級入口,不屬於 Site 管理的任何流程 —— 本節只記錄它在 xLite 才出現, 點擊後導向何處與升級流程本身都不在本 deck 範圍。
各流程的影響 Per flow
| 節 | xLite 的差異 |
|---|---|
| US1 Create site | 仍可建立 Site;已有 10 個時建立被擋下 |
| US2 Add area | 整節不適用;標題列「Add」選單不提供 Area |
| US3 Browse / select | sidemenu 為平的單層清單,沒有 Area 子層可縮排;每列仍顯示箭頭(見上方「限制」) |
| US4 Move devices | 目的地只有單層可選(picker 規格見 Sites Related Pages Section 09) |
| US7 Delete site / area | 沒有 Area 可刪 |
| US8 Floor plans | 區塊內顯示導流內容(見該節) |
Portal 沒有「先選 Site 還是 Area」這一步。 建立 Site 的入口是 Sites 面板標題列的「+」; 建立 Area 是先選一個 Site / Area,再用該節點標題列的「Add」選單 —— 兩者本來就是不同入口, 付費組織亦然。xLite 的差異是選單裡不提供 Area,不是「少了一個型別選擇步驟」。(App 端才有 segmented control 型別切換,見 App Sites Related Pages。)
邊界 Out of scope
授權還有 Grace Period、Notice Period、Renewal Overdue、KA 組織、既有組織遷移、以及降級前置 檢查(Site ≤ 10 且無 Area,合併為單一 "Site Limit" 檢查項)等狀態。本 deck 只涵蓋 xLite 與付費的差異;完整規則見
add-site-management-license-control與add-floor-plan-license-control兩份 OpenSpec。這些狀態目前沒有 key screen,寫進本 deck 會產生無圖可對照的規則。
驗收條件 QA · Given-When-Then
- Given xLite 組織,Then 仍可建立 Site,但介面不提供建立 Area 的入口。
- Given xLite 組織已有 10 個 Site,Then 再建立會被擋下並提示 10 個上限。
- Given xLite 組織,Then Site sidemenu 為平的單層清單,且每列仍顯示箭頭(Site 為容器種類)。
- Given xLite 組織開啟 Floor plans 區塊,Then 顯示導流內容而非樓層圖卡片。
元件與 Token 決策
- 本節不定義新元件:它只陳述哪些既有元件與入口在 xLite 組織不出現。
- 受影響的元件決策留在各自的節:Create site 入口見 US1、標題列「Add」選單見 US2、 sidemenu 的 Tree View 見 US3,picker 見 Sites Related Pages Section 09,Floor plan 區塊的導流內容見 US8。
TODO / 未解問題
- 付費組織的 1000 上限計算方式待確認。 OpenSpec 寫「1000 Sites」,但實驗性 prototype 的 計數把各層 Area 一併算入,App Sites Related Pages 也記為「Site + Area 合計」。三者對「算什麼」不一致,數字本身則一致。
- xLite 的 Site 數量達上限(10 個)時的擋下畫面沒有 key screen。
06 - Free Org只呈現 未達上限的正常狀態,錯誤提示的實際文案與呈現位置待確認(OpenSpec 只要求「提示 10 個上限」)。