> ## 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

> 在瀏覽器中以視覺方式建立及編輯應用程式和模組設定

Config Editor 是 [BRICKS Controller](/zh-Hant/controller) 中的視覺化編輯器，可直接在瀏覽器中建立及編輯應用程式或模組設定。開啟任何應用程式或模組並點擊 **Config Editor** 即可開始編輯。

## BRICKS 應用程式的運作方式

BRICKS 應用程式執行於 JSON 設定之上，該設定定義了 UI、資料、邏輯與互動。[BRICKS Foundation](/zh-Hant/foundation) 運行時讀取此設定並在螢幕上渲染應用程式。

建立設定有兩種方式：

| 方式        | 工具                                               | 適合對象                  |
| --------- | ------------------------------------------------ | --------------------- |
| **視覺化**   | BRICKS Controller 中的 Config Editor               | 快速編輯、非開發人員、視覺版面配置工作   |
| **程式碼優先** | [bricks-ctor](/zh-Hant/ctor-pkg)（TypeScript SDK） | 版本控制、AI 輔助開發、CI/CD 管線 |

兩者皆產生相同的 JSON 設定。您可以先從 Config Editor 開始，之後透過 **Generate Project** 切換至程式碼優先工作流程—或從程式碼部署後繼續在 Config Editor 中編輯。

## 應用程式結構

BRICKS 應用程式是可組合實體的樹狀結構：

```
Application
└── Subspace（功能/螢幕容器）
    ├── Canvas（視圖/場景版面配置）
    │   └── Items（已定位的 Brick 或 Subspace 參照）
    ├── Brick（UI 元件）
    ├── Generator（資料/IO 提供者）
    ├── Data（狀態儲存）
    ├── Animation（視覺效果）
    └── Data Calculation（資料轉換）
```

Config Editor 提供管理上述每個實體的結構化介面。

## Subspace

Subspace 是獨立的功能單元—可將其視為一個螢幕或功能模組。每個 Subspace 擁有自己的 Brick、Generator、Data、Canvas 及 Animation。應用程式以根 Subspace 作為進入點。

使用 Subspace 將應用程式組織成邏輯區段。您可以透過在一個 Subspace 的 Canvas 中參照另一個 Subspace 來進行巢狀巢狀。

## Canvas

Canvas 定義檢視版面配置。它使用框架座標（x、y、寬度、高度）在格線上定位項目（Brick 或 Subspace 參照）。

Canvas 支援：

* **生命週期事件** — `firstEnter`、`enter` 及 `exit` 事件，在 Canvas 變為作用中或非作用中時觸發動作
* **Canvas 切換** —在多螢幕流程的 Canvas 之間導覽
* **項目定位** —在特定座標與尺寸放置 Brick 和 Subspace 參照

## Brick

Brick 是視覺建構元件—顯示內容並處理互動的 UI 元件。

| Brick               | 用途                                       |
| ------------------- | ---------------------------------------- |
| **Text**            | 顯示帶有樣式的文字                                |
| **TextInput**       | 可編輯的文字欄位                                 |
| **RichText**        | 支援 HTML 內容、多種字型與內嵌圖片的 Rich Text          |
| **Image**           | 顯示圖片                                     |
| **Video**           | 影片播放                                     |
| **VideoStreaming**  | RTSP / RTMP 即時影像串流                       |
| **WebrtcStream**    | WebRTC 影音串流                              |
| **GenerativeMedia** | 由 AI 生成的圖片與影片                            |
| **WebView**         | 嵌入式網頁內容                                  |
| **Lottie**          | `.json` 與 `.dotlottie` 動畫，支援速度、循環與影格範圍控制 |
| **Rive**            | `.riv` 動畫，支援狀態機輸入、文字取代與 artboard 切換      |
| **Svg**             | SVG 向量圖形                                 |
| **Chart**           | 資料視覺化                                    |
| **Icon**            | FontAwesome 6 Pro 圖示                     |
| **QrCode**          | QR Code 顯示                               |
| **Camera**          | 即時攝影機畫面                                  |
| **Maps**            | 地圖顯示                                     |
| **Rect**            | 帶有背景、框線、陰影的容器                            |
| **Items**           | 以陣列資料驅動的列表或網格                            |
| **Slideshow**       | 具轉場效果的自動切換幻燈片                            |

Brick 可套用樣式、製作動畫、回應按壓事件，並將其屬性動態繫結至資料。

## Generator

Generator 處理所有外部 I/O 與資料處理。它們將應用程式連線至 API、資料庫、硬體、AI 模型等。每個 Generator 具有將資料輸出至資料節點的**輸出通道（outlets）**，以及觸發動作的**事件（events）**。

| 類別           | 範例                                                              |
| ------------ | --------------------------------------------------------------- |
| **AI & LLM** | Assistant、LLM（GGML/OpenAI/Anthropic/ONNX）、Vector Store、Reranker |
| **語音**       | Text-to-Speech、Speech-to-Text、VAD、Realtime Transcription        |
| **網路**       | HTTP、WebSocket、GraphQL、MQTT、TCP、UDP、HTTP Server                 |
| **儲存**       | File、SQLite、Data Bank、Media Flow                                |
| **硬體**       | Bluetooth LE、Serial Port、Camera、Keyboard                        |
| **控制流程**     | Tick（計時器）、Alarm Clock、Step、Iterator、Watchdog                    |
| **其他**       | WebRTC、Web Crawler、MCP、Thermal Printer                          |

## Data

Data 節點儲存應用程式狀態。它們具有型別（字串、數字、布林值、陣列、物件），並可**連結**至 Brick 或 Generator 屬性以進行響應式更新。當 Generator 輸出通道發出值時，連結的資料會更新，並且任何綁定至該資料的 Brick 都會自動重新渲染。

## Data Calculation

Data Calculation 是轉換資料的 JavaScript 函式。它們在沙盒環境中執行，內建 25 個以上的函式庫（lodash、moment、crypto 等）。用於格式化、解析或計算衍生值。

## Animation

為 Brick 定義視覺效果與轉場。Animation 可由事件觸發，並套用至位置、透明度、縮放和旋轉等屬性。

## 動作與事件

動作是由事件觸發的指令。Brick 和 Generator 會發出事件（按壓、回應、錯誤、計時器滴答），您可以將它們連線至以下動作：

* 變更 Canvas
* 更新資料
* 觸發 Generator
* 執行 Animation
* 在 Subspace 之間導覽

## 快速編輯

使用 **Short Edit** 在不建立完整發行版本的情況下快速修改屬性。Short Edit 允許您透過參照修改個別 Brick 或 Generator 屬性，非常適合快速迭代及調整生產裝置。

您也可以使用 [BRICKS CLI](/zh-Hant/cli) 以程式方式套用快速編輯：

```bash theme={null}
# 列出可用的屬性參照
bricks app short-refs <app-id>

# 套用快速編輯
bricks app short-edit <app-id> -l '<json>'
```

## 驗證設定

Config Editor 在您編輯時會根據 BRICKS 結構描述驗證設定。您也可以從 CLI 驗證設定檔：

```bash theme={null}
bricks app check-config config.json
```

## 儲存與發行

<Steps>
  <Step title="儲存變更">
    在 Config Editor 中點擊 **Save** 以保存變更。這會更新應用程式的工作設定，並自動將變更部署至已綁定的裝置。
  </Step>

  <Step title="發行版本（可選）">
    前往應用程式詳細資訊頁面並建立發行版本，將目前設定快照為版本化發行版本，以便部署至其他裝置。
  </Step>
</Steps>

<Info>
  在 Config Editor 中儲存會自動將變更部署至已綁定的裝置。當您希望將某個版本快照以部署至其他裝置時，請建立發行版本。
</Info>

## 核心參考

有關每個 Brick、Generator、資料型別及設定選項的詳細屬性文件，請參閱[核心參考](/zh-Hant/foundation/reference)。

<Card title="核心參考" icon="book" href="/zh-Hant/foundation/reference">
  所有 BRICKS 平台實體與屬性的完整文件。
</Card>