# 核心功能

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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

---

#### Package metadata

```json
{
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/boards",
      "facade": "@univerjs-pro/boards/facade"
    },
    {
      "client": "@univerjs-pro/boards-ui",
      "locale": "@univerjs-pro/boards-ui/locale/zh-TW",
      "style": "@univerjs-pro/boards-ui/lib/index.css",
      "facade": "@univerjs-pro/boards-ui/facade"
    }
  ],
  "license": true,
  "server": false
}
```

Univer Boards 核心功能會將頁面與元素模型和互動式瀏覽器畫布組合在一起。模型與 UI 由兩個 Web SDK 套件提供，並以獨立的 `UNIVER_BOARD` 單元執行。

## 功能

* **頁面與元素順序**：頁面儲存在 `pages` 中，可繪製物件儲存在每個頁面的 `elements` 中，兩個層級都使用明確的順序陣列。
* **畫布元素**：處理文字、圖形、圖片、連接線、群組、容器與泳道圖。
* **命令驅動的編輯**：讓元素變更、順序與父子關係統一經過命令層，並提供權限及選用歷程與協同作業整合所需的掛鉤。
* **瀏覽器畫布**：算繪元素，並提供選取、變形、剪貼簿、文字編輯、檢視區控制與面板功能。
* **可擴充的配接器**：加入表格、心智圖、圖表、資源、列印與交換等選用 Boards 功能。
* **持久化**：建立、還原與儲存包含頁面、資源、主題及使用中頁面狀態的 `IBoardData` 快照。

## 外掛模式

### 安裝

在[安裝與基本使用](https://docs.univer.ai/zh-TW/guides/boards/getting-started/installation.md)介紹的 Univer 執行環境中加入兩個 Boards 產品套件：

#### npm

```bash
npm install @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### yarn

```bash
yarn add @univerjs-pro/boards @univerjs-pro/boards-ui
```

#### bun

```bash
bun add @univerjs-pro/boards @univerjs-pro/boards-ui
```

### 註冊產品外掛

依照安裝指南先註冊共用的算繪、文件、繪圖、筆跡、圖形編輯相依套件與 授權，再註冊 Boards 外掛：

```ts
import { UniverBoardsPlugin } from '@univerjs-pro/boards'
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'

import '@univerjs-pro/boards-ui/lib/index.css'

univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin)
```

`UniverBoardsPlugin` 會註冊 Board 模型、命令、元素服務、配接器與權限。`UniverBoardsUIPlugin` 則加入已算繪的畫布與瀏覽器互動。

## 預設模式

Univer Boards 目前沒有專用預設。模型與瀏覽器 UI 都應使用外掛模式。

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

Boards 的快顯選單使用共用的 [`MenuConfig`](https://docs.univer.ai/zh-TW/reference/packages/plugins/univerjs/ui.md#menuconfig)。將 `menu` 加到既有的 `UniverUIPlugin` 註冊設定中，不應傳給 `UniverBoardsUIPlugin`。例如，將「建立副本」移到所在快顯選單群組的最前面：

### 初始化設定

```ts
import type { MenuConfig } from '@univerjs/ui'
import { UniverUIPlugin } from '@univerjs/ui'

const menu: MenuConfig = {
  'board.menu.duplicate-selection': { order: -1 },
}

univer.registerPlugin(UniverUIPlugin, { container: 'app', menu })
```

`order` 依數值由小到大排列同層級快顯選單項目，不會將項目移到其他群組。請使用產品選單定義中的項目 ID，它可能與命令 ID 不同。

### 執行階段更新

先匯入 `@univerjs/ui/facade`，再透過 `FUniver.newAPI(univer)` 建立 `univerAPI`。[`updateMenuConfig()`](https://docs.univer.ai/zh-TW/reference/facade/univer.md#updatemenuconfig) 會合併修改、保留未指定的欄位並重新整理選單，設定也會套用到之後註冊的選單。

```ts
import '@univerjs/ui/facade'

univerAPI.updateMenuConfig({
  'board.menu.duplicate-selection': { order: 5 },
})
```

### 畫布工具列

Boards 使用獨立的畫布工具列，不註冊標準的產品 Ribbon。`gridLayout` 只控制共用的網格 Ribbon，不會重新排列畫布工具列或快顯選單。畫布工具透過 `UniverBoardsUIPlugin.toolbar.tools` 設定，例如在既有外掛程式註冊中關閉畫筆工具：

```ts
import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'

univer.registerPlugin(UniverBoardsUIPlugin, {
  toolbar: { tools: { pen: false } },
})
```

`toolbar.tools` 控制工具是否可用，不提供工具順序或網格位置設定。畫布控制項與共用選單的差異請見 [Boards UI 參考](https://docs.univer.ai/zh-TW/reference/packages/plugins/univerjs-pro/boards-ui.md)。