# UI 概覽

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [bases/ui/overview.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/ui/overview.zh-TW.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-TW/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`。