# UI 概览

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

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

---

`@univerjs-pro/bases-ui` 提供 Univer Bases 的授权版浏览器工作台。它负责渲染表与视图导航、网格、看板、日历、甘特图和画廊视图，以及字段编辑器、记录详情面板、菜单和选区状态。

## 注册工作台

请在 Bases 插件前注册 许可证与公式引擎。公式字段使用 `@univerjs-pro/engine-formula`，不要求应用同时使用 Sheets。

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})

univer.registerPlugin(UniverProFormulaEnginePlugin)
univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverBasesPlugin)
univer.registerPlugin(UniverBasesUIPlugin)
```

导入、样式和语言包配置请参阅[安装和基本使用](https://docs.univer.ai/zh-CN/guides/bases/getting-started/installation.md)。

## 配置初始布局

`IUniverBaseUIConfig` 控制工作台区域，以及启动后首先显示的表和视图。

```ts
univer.registerPlugin(UniverBasesUIPlugin, {
  workbench: {
    header: true,
    headerMenu: true,
    content: true,
    leftSidebar: true,
    rightSidebar: false,
    rightPanelMode: 'dock',
  },
  initialState: {
    tableId: 'tasks',
    viewId: 'kanban',
  },
})
```

只读工作台可设置 `disableEdit`。只有对应 Base 字段需要主应用提供数据时，才配置 `attachment`、`personOptions` 或 `groupOptions`。