# UI 概览

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [boards/ui/overview.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/ui/overview.zh-CN.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-CN/guides/boards/getting-started/installation.md)。

## 画布选项

`IUniverBoardsUIConfig` 还控制网格外观、插入默认值、可用形状与便签颜色、工具栏工具、视口滚动条、渲染适配器，以及快速添加、精确选区、尺寸提示和协同光标等设置。