# UI 概覽

- Human documentation: [https://docs.univer.ai/zh-TW/guides/boards/ui/overview](https://docs.univer.ai/zh-TW/guides/boards/ui/overview)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/boards/ui/overview.md](https://docs.univer.ai/zh-TW/guides/boards/ui/overview.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [boards/ui/overview.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/ui/overview.zh-TW.mdx)

---

`@univerjs-pro/boards-ui` 提供 Univer Boards 的授權版瀏覽器畫布。它負責算繪場景、選取範圍與檢視區互動、工具列、內容選單、文字編輯、形狀編輯、連接線編輯，以及支援的 Board 元素類型 UI。

## 註冊 Board UI

請在 Board 外掛程式前設定 `UniverLicensePlugin`。Docs、Drawing、Ink 和 Shape Editor 套件是技術算繪與編輯相依套件；使用 Boards 不要求你瞭解這些品類。

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin, {
  workbench: {
    content: true,
    header: false,
    headerMenu: false,
    toolbar: false,
    footer: false,
  },
  interaction: {
    minZoomRatio: 0.1,
    maxZoomRatio: 4,
    wheelZoomWithModifier: true,
    trackpadPanEnabled: true,
  },
})
```

完整的相依套件、樣式和語言套件註冊順序請參閱[安裝與基本使用](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation.md)。

## 畫布選項

`IUniverBoardsUIConfig` 也控制網格外觀、插入預設值、可用形狀與便利貼顏色、工具列工具、檢視區捲軸、算繪配接器，以及快速新增、精確選取、尺寸提示和協作游標等設定。

## 選單設定與畫布工具列

透過 [`menu` 和 `updateMenuConfig()`](https://docs.univer.ai/zh-TW/guides/boards/features/core.md#menu-order-and-grid-layout) 覆寫快顯選單設定。Boards 的獨立畫布工具列透過 `toolbar.tools` 設定，Ribbon 的 `gridLayout` 不控制此工具列。