> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# 面板

> 兩個分頁式面板——右側面板與下方面板——用於差異、模擬器、Config Editor、檔案、瀏覽器分頁、終端機、裝置清單與裝置 DevTools

CTOR 有兩個分頁式面板：沿著視窗右緣的**右側面板**，以及橫跨聊天與右側面板下方、佔滿整個視窗寬度的**下方面板**。兩者都提供相同的一組分頁——[差異檢視](/zh-Hant/ctor/reference/diff-view)、[模擬器](/zh-Hant/ctor/reference/simulator)、[Config Editor](/zh-Hant/ctor/reference/editor)、[檔案檢視器](/zh-Hant/ctor/reference/file-viewer)、可開啟 [BRICKS Controller](/zh-Hant/controller) 或任何網頁的[瀏覽器分頁](/zh-Hant/ctor/reference/browser)、終端機、您工作區的裝置清單，以及裝置 [DevTools](/zh-Hant/foundation/local-debugging)——讓您依視窗配置自由安排，並同時檢視一個以上的分頁。

## 開啟面板

點選頂端列的**右側面板**或**下方面板**按鈕。無論面板是開啟或關閉，這兩個按鈕都固定在各自的位置——**右側面板**位於右上角，**下方面板**則緊鄰其左側。CTOR 會個別記住每個面板的開啟/關閉狀態，並在您下次啟動應用程式時還原。

開啟面板會顯示您已在該面板中開啟的分頁。若兩個面板都還沒有任何分頁，會顯示一個起始頁，列出可開啟的檢視——選擇其中一項即可將它載入該面板。下方面板是例外——第一次開啟且尚未有任何內容時，會直接建立一個[終端機](#終端機)分頁，而不會顯示起始頁。

## 分頁

| 分頁           | 顯示內容                    | 可用時機                    |
| ------------ | ----------------------- | ----------------------- |
| **差異**       | 來自 `git diff` 的未提交變更    | 專案位於 Git 儲存庫中           |
| **模擬器**      | 內嵌網頁檢視中已編譯的應用程式         | 已開啟專案                   |
| **編輯器**      | 連結至專案的視覺化 Config Editor | 已開啟專案（BRICKS CLI 2.25+） |
| **檔案**       | 專案的檔案樹，以及您從中開啟的任何檔案     | 已開啟專案                   |
| **裝置**       | 您工作區的裝置，與本機網路掃描結果相符     | 隨時——專案或主聊天              |
| **瀏覽器**      | BRICKS Controller 或任何網頁 | 隨時——專案或主聊天              |
| **DevTools** | 裝置的 Chrome DevTools 檢查器 | 從**本機裝置**面板開啟           |
| **終端機**      | 互動式 shell               | 隨時——專案或主聊天              |

差異、模擬器、編輯器、檔案、裝置以及各裝置的 DevTools 分頁都是唯一分頁——同一時間在兩個面板中都只會存在一份。瀏覽器與終端機分頁並非唯一分頁——可依需要開啟多個。請參閱[在面板之間移動分頁](#在面板之間移動分頁)。

### 差異

**差異**分頁顯示專案的未提交變更，並帶有目前新增與刪除行數的徽章（`+` / `−`）。檢視模式與逐檔控制請參閱[差異檢視參考](/zh-Hant/ctor/reference/diff-view)。

### 模擬器

**模擬器**分頁以內嵌網頁檢視執行已編譯的專案，並提供 Chrome DevTools Protocol (CDP) 端點。其工具列包含 **DevTools** 切換，可停靠模擬器自身的檢查器。完整的面板控制請參閱[模擬器參考](/zh-Hant/ctor/reference/simulator)。

### 編輯器

**編輯器**分頁內嵌視覺化的 Config Editor，並與您開啟的專案連動。儲存時會將您的編輯編譯進專案原始程式碼並提交。完整的編輯流程請參閱 [Config Editor 參考](/zh-Hant/ctor/reference/editor)。

### 檔案

**檔案**分頁會開啟專案的檔案樹；您從中開啟的每個檔案都會成為旁邊的獨立分頁。檔案樹、預覽、搜尋與外部編輯器交接請參閱[檔案檢視器參考](/zh-Hant/ctor/reference/file-viewer)。

### 裝置

從 **+**（新增分頁）選單新增**裝置**分頁，或點選[本機裝置](/zh-Hant/ctor/guide/agent-usage#本機裝置)對話框頁尾的**開啟裝置面板**——兩者預設都會在下方面板中開啟。它在專案與主聊天工作階段中都可使用，不需要開啟專案，並會列出您工作區的裝置，比對方式與本機裝置對話框所使用的同一份本機網路掃描結果相同。

裝置會分為**在線**與**離線**兩組（5 分鐘內回報過即視為在線），各組會顯示裝置數量。每一列的摘要會顯示其類型、正在執行的應用程式與版本；展開後可看到唯一 ID、上次連線時間、模式（其平台——iOS、iPadOS、Android、Android TV、macOS、tvOS、Windows、Linux 或 Virtual Device）、螢幕解析度、記憶體與磁碟使用量，以及——若為本機相符的裝置——其區域網路位址。

* **本機**——該裝置目前也能直接透過您的網路連線，而不只是透過雲端。
* **CDP**——本機相符的裝置若同時提供除錯端點，即會顯示此徽章；並解鎖**開啟 DevTools** 按鈕，開啟與本機裝置對話框相同的 [DevTools 分頁](#devtools)。
* **更新**——表示該裝置有可用的 BRICKS Foundation 更新。

裝置在線時，您還可以**重新整理**或**清除快取**——與 [BRICKS Foundation 自身的重新整理](/zh-Hant/foundation/launch-applications#重新整理應用程式)及[清除快取](/zh-Hant/foundation/launch-applications#清除快取)是相同的動作——或擷取**螢幕擷圖**，以行內預覽方式顯示（需要工作區已啟用媒體工作區）。裝置離線時，這些動作以及開啟 DevTools 都無法使用。

清單每 30 秒重新整理一次，本機掃描則是每 60 秒一次，但僅在**裝置**分頁是所在面板中使用中的分頁時才會進行。

#### 儀表板檢視

工具列上的**列表** / **儀表板**切換鈕可改變面板呈現這些裝置的方式，CTOR 會記住您的選擇，下次開啟時沿用。

**儀表板**會將列表換成螢幕擷圖卡片的格狀排列，同樣分為**在線**與**離線**兩組。每張卡片會顯示最新的擷圖、裝置名稱、其**本機**與 **CDP** 徽章，以及一行標註螢幕解析度與擷圖時間距今多久的說明文字。將游標移到卡片上會顯示擷取按鈕，若為 CDP 裝置則另有**開啟 DevTools**。離線裝置會以淡化方式顯示，並標示已離線多久，且沒有任何動作可用。

當您切換到**儀表板**時，CTOR 會為每一台在線裝置擷取一次；裝置清單有變動時也會重新擷取。切換鈕旁的**自動更新**下拉選單可依間隔重新擷取整個格狀排列——關閉、10s、30s（預設）或 60s——工具列的重新整理按鈕則可隨時手動擷取。與清單的重新整理相同，自動更新僅在**裝置**分頁使用中時才會執行。擷取會排入佇列，一次只處理一台裝置，避免大型工作區灌爆 API。

提供 **CDP** 的裝置會直接透過其本機除錯連線擷取——速度快，也不需要媒體工作區；這些卡片會帶有 **LIVE** 徽章。其餘裝置則會退回使用與列表檢視中**螢幕擷圖**動作相同的媒體工作區路徑，其徽章會顯示擷圖的時間長度，並在擷圖超過兩個更新間隔後轉為琥珀色。

### 瀏覽器

**瀏覽器**分頁會在面板中執行網頁——開啟 [BRICKS Controller](/zh-Hant/controller) 或輸入任何網址。您可以同時開啟多個，分散在兩個面板中，代理也能透過授權的 CDP 橋接來操作它們。工具列、在頁面中尋找、螢幕截圖與代理自動化請參閱[瀏覽器參考](/zh-Hant/ctor/reference/browser)。

從 **+**（新增分頁）選單新增：**新增瀏覽器分頁**會開啟空白分頁，**開啟 Controller** 則讓瀏覽器分頁指向使用中應用程式與 stage 的 Controller。

### DevTools

從**本機裝置**面板開啟裝置的 Chrome DevTools 檢查器——請參閱[本機裝置](/zh-Hant/ctor/guide/agent-usage#本機裝置)。每部裝置會以各自的 **DevTools** 分頁開啟，以裝置名稱為標題，並在網頁檢視中載入 `devtools://` 檢查器。

DevTools 分頁的行為與內建分頁不同：

* **依裝置去除重複**——重新開啟某部裝置會重複使用其分頁，並重新整理連線（例如在重新驗證之後）。
* **持續保留**——切換專案與工作階段時仍維持開啟，因為它們追蹤的是實體裝置，而非目前的專案。
* **彈出**——點選分頁列中的**在視窗中開啟 DevTools**，可將檢查器移至獨立視窗。此操作會關閉分頁，並還原為傳統的獨立視窗行為。

<Note>
  當您檢查的裝置是前景專案執行中的預覽時，**DevTools** 按鈕會將檢查器停靠在**模擬器**分頁內，而非開啟獨立分頁。請參閱[停靠模擬器的 DevTools](/zh-Hant/ctor/reference/simulator#停靠模擬器的-devtools)。
</Note>

### 終端機

**終端機**分頁會執行一個互動式 shell——可以是系統預設 shell，也可以是您[自訂設定的 shell](/zh-Hant/ctor/reference/settings#終端機-shell)。它在專案與主聊天工作階段中都可使用；在專案中，會以專案根目錄作為起始工作目錄。

從 **+**（新增分頁）選單新增，會排在所有其他分頁之後——或第一次開啟下方面板即可自動取得一個，請參閱[開啟面板](#開啟面板)。每個終端機都是獨立的 shell；關閉其分頁會立即結束該 shell，不會詢問確認，即使仍有指令在執行中。

當您切換離開其工作階段、將其拖曳至另一個面板，或稍後返回時，終端機都會持續執行——同一個 shell 會重新接上，而不是重新啟動。其字型會追蹤[外觀設定](/zh-Hant/ctor/reference/settings#字型)中的**程式碼字型**與**程式碼字型大小**，並即時更新；其配色主題則在建立分頁時就固定下來，之後切換應用程式的亮/暗主題也不會改變。

## 管理分頁

* **新增分頁**——點選分頁列中的 **+**（新增分頁）並選擇分頁。**新增瀏覽器分頁**與**開啟 Controller** 會開啟瀏覽器分頁；開啟**模擬器**分頁會開始編譯專案；開啟**差異**則載入目前的變更。
* **關閉分頁**——點選分頁上的 **×**。關閉**差異**或**模擬器**也會停止其後端；關閉 **DevTools** 分頁會中斷該檢查器的連線，關閉**瀏覽器**分頁則會關閉該頁面。
* **重新排序分頁**——在同一面板的分頁列中，將分頁向左或向右拖曳以變更位置。放置指示器會顯示落點。
* **以鍵盤切換分頁**——按 **Cmd+1** 至 **Cmd+9**（Windows 與 Linux 為 **Ctrl**），即可跳至**右側面板**中第 1 到第 9 個分頁，順序與其分頁列一致。此快速鍵不適用於下方面板。

當開啟的分頁超出可容納範圍時，面板的分頁列會水平捲動，讓每個分頁都能存取。若面板較窄或較矮，使用中分頁的工具列會將按鈕收合為圖示以挪出空間。

## 在面板之間移動分頁

將分頁從所在面板的分頁列拖曳出來，並放到另一個面板的分頁列上，即可將它移動過去。若目標面板目前是關閉的，拖曳時該面板邊緣會出現一條放置提示——右側面板對應視窗右緣，下方面板對應視窗下緣。放到提示上會移動分頁，並同時開啟該面板。

由於差異、模擬器、編輯器、檔案、裝置以及裝置 DevTools 分頁都是唯一分頁，拖曳是搬移它們的唯一方式——當分頁已經開啟時，從 **+** 選單、工具項目或**本機裝置**面板重新開啟它，只會將既有分頁帶到目前所在面板的最前面，而不會開啟重複的分頁。瀏覽器與終端機分頁並非唯一分頁，因此您可以在兩個面板中各自保留獨立的分頁。

<Note>
  將**瀏覽器**或 **DevTools** 分頁移動到另一個面板會重新載入該頁面。**模擬器**、**編輯器**與**終端機**分頁則不會——它們的內容（對終端機而言即執行中的 shell）會在移動後保留。
</Note>

## 將面板分割成窗格

將分頁放到分頁列下方的內容區域（而不是放到分頁列上），即可讓它與原本顯示的內容並排。放置時最靠近的邊緣決定分割方式——**左**或**右**會左右並排新窗格，**上**或**下**則會上下堆疊。一個群組最多可容納四個窗格。

同一個群組中的窗格會共用分頁列上的一個分頁，標題由各成員的名稱以 `|` 串接而成。每個窗格都有一個握把，可拖曳它到群組中的其他位置，另有一個關閉按鈕，可讓它回到分頁列成為獨立分頁。拖曳兩個窗格之間的分隔線可調整大小；任一側都無法縮小到群組的 15% 以下。

<Note>
  檔案檢視器是共用的單一檢視，因此一個群組最多只能有一個**檔案**或已開啟檔案的窗格。
</Note>

## 調整面板大小或關閉面板

### 右側面板

拖曳面板左緣的控制桿，即可相對於聊天區域調整其大小。面板最多可佔視窗寬度的 80%。將控制桿向內拖曳超過最窄寬度時，會關閉面板。

### 下方面板

拖曳面板上緣的控制桿，即可相對於上方的聊天與右側面板調整其高度。它預設以 300px 開啟，最小可縮至 120px，最大可佔視窗高度的 70%，同時保留頂端列與上方一段可用的聊天空間。將控制桿向下拖曳超過最短高度時，會關閉面板。