# 核心功能

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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

---

#### Package metadata

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

Univer Slides 核心功能由簡報模型和瀏覽器編輯介面組成。模型使用 `ISlideData` 快照儲存簡報，介面則透過 Univer 命令算繪和編輯該模型。

## 功能

* **簡報模型**：管理簡報識別、頁面尺寸、投影片順序、投影片、母片頁、版面配置頁、主題、轉場效果和資源。
* **算繪與編輯**：提供投影片畫布、縮圖、選取、剪貼簿、文字與圖形編輯、對齊參考線和播放功能。
* **命令管線**：透過命令和變更套用頁面與元素更新，使模型、算繪以及復原和重做保持同步。
* **Facade API**：透過面向應用程式的物件建立和尋找簡報、儲存快照，並操作投影片和元素。
* **外掛程式架構**：表格、圖表、列印和匯入匯出等選用功能與核心外掛程式堆疊相互獨立。

## 外掛程式模式

### 安裝

#### npm

```bash
npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### pnpm

```bash
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### yarn

```bash
yarn add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/drawing @univerjs/engine-render @univerjs/ui @univerjs-pro/license @univerjs-pro/slides @univerjs-pro/slides-ui
```

### 使用

```ts
import { UniverLicensePlugin } from '@univerjs-pro/license'
import { UniverSlidesPlugin } from '@univerjs-pro/slides'
import { UniverSlidesUIPlugin } from '@univerjs-pro/slides-ui'
import SlidesUIEnUS from '@univerjs-pro/slides-ui/locale/en-US'
import SlidesEnUS from '@univerjs-pro/slides/locale/en-US'
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { FUniver } from '@univerjs/core/facade'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverDrawingPlugin } from '@univerjs/drawing'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'
import '@univerjs-pro/slides/facade'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs-pro/slides-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS, SlidesEnUS, SlidesUIEnUS),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverDrawingPlugin)
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverSlidesPlugin)
univer.registerPlugin(UniverSlidesUIPlugin)

const univerAPI = FUniver.newAPI(univer)
const presentation = univerAPI.createPresentation({ name: 'Quarterly review' })
```

如果瀏覽器只需要算繪簡報而不顯示編輯控制項，請為 `UniverSlidesUIPlugin` 傳入 `{ editor: { enabled: false } }`。在 Node.js 中，只註冊 `UniverSlidesPlugin`，無需註冊介面外掛程式。

## 預設模式

Univer Slides 目前沒有提供預設套件。無論只使用模型還是建立瀏覽器編輯器，都請使用外掛程式模式。

## 工具列分組

開始索引標籤包含主題、轉場、背景與演講者備註；插入索引標籤組織內容插入與物件清單；檢視索引標籤提供頁面尺寸、縮放與全螢幕。情境格式索引標籤隨選取內容改變：形狀顯示形狀格式、圖片顯示圖片格式、圖表顯示圖表格式，包含圖片或圖表的混合選取顯示通用物件操作。圖片格式提供裁剪與裁剪形狀、尺寸、位置及旋轉，部分控制項僅適用單張圖片。選取表格時使用表格 UI 外掛的控制項。形狀格式另有獨立浮動工具列開關。

## 選單順序與網格佈局

在既有的 `UniverUIPlugin` 註冊設定中設定 `menu` 和 `ribbonType`。它們屬於共用 UI 設定，不應傳給 `UniverSlidesUIPlugin`。以下使用 Slides 的實際選單項目 ID：

### 初始化設定

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

const menu: MenuConfig = {
  'ribbon.view': { order: -1 },
  'ribbon.start.layout': { order: -1 },
  'slide.menu.insert.text': {
    order: 1,
    gridLayout: { row: 1, column: 2, rowSpan: 2, showLabel: true, width: 96 },
  },
  'slide.menu.insert.shape': {
    order: 0,
    gridLayout: { row: 1, column: 1, rowSpan: 2, showLabel: true },
  },
}

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

`order` 依數值由小到大排列同層級頁籤、群組或選單項目，不會將項目移到其他群組。選單項目 ID 可從其 `data-u-command` 屬性取得，不應直接假設它與命令 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({
  'slide.menu.insert.text': { gridLayout: { row: 1, column: 2, width: 120 } },
})
```

`gridLayout` 僅控制網格 Ribbon。每個群組固定兩列，`row` 和 `column` 從 1 開始。明確座標優先決定位置，因此交換已佔用的儲存格時應同時修改兩個選單項目，不能只調整 `order`。未指定的選用欄位沿用既有設定或 Schema。跨列、跨欄、標籤、寬度和圖示尺寸請見 [`IRibbonGridLayout`](https://docs.univer.ai/zh-TW/reference/packages/plugins/univerjs/ui.md#iribbongridlayout)。

請保持 `UniverSlidesUIPlugin` 的編輯功能開啟：`editor.enabled: false` 會略過該產品 Ribbon 的註冊。選單覆寫設定不會建立尚未註冊的按鈕。

自訂按鈕和子選單入口也能透過 [`createMenu()`、`createSubmenu()`](https://docs.univer.ai/zh-TW/reference/packages/plugins/univerjs/ui.md#ifacademenuitem) 設定 `order` 與 `gridLayout`，再呼叫 `appendTo()` 註冊。彈出選單內部不使用 Ribbon 的網格佈局。