# 演示跟随

- Human documentation: [https://docs.univer.ai/zh-CN/guides/sheets/features/live-share](https://docs.univer.ai/zh-CN/guides/sheets/features/live-share)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/sheets/features/live-share.md](https://docs.univer.ai/zh-CN/guides/sheets/features/live-share.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [sheets/features/live-share.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/live-share.zh-CN.mdx)

---

#### Package metadata

```json
{
  "plugins": [
    {
      "client": "@univerjs-pro/live-share",
      "facade": "@univerjs-pro/live-share/facade",
      "style": "@univerjs-pro/live-share/lib/index.css"
    }
  ],
  "license": true,
  "server": true
}
```

> [!WARNING: 注意事项]
> 演示跟随功能需要 Univer 服务端支持，请确保你已经正确安装并配置了 Univer 服务端。具体请参考：[许可证](https://docs.univer.ai/zh-CN/guides/license.md)

演示跟随（Live Share）功能允许用户在多人协作时，将自己的视图操作（如滚动、选区变化）实时同步给其他跟随的用户，或者跟随其他用户的视角。这在会议演示、教学讲解等场景中非常有用。

## 插件模式

### 安装

#### npm

```bash
npm install @univerjs-pro/live-share
```

#### pnpm

```bash
pnpm add @univerjs-pro/live-share
```

#### yarn

```bash
yarn add @univerjs-pro/live-share
```

#### bun

```bash
bun add @univerjs-pro/live-share
```

### 使用

```typescript
import { UniverLiveSharePlugin } from '@univerjs-pro/live-share' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/live-share/lib/index.css' // [!code ++]

import '@univerjs-pro/live-share/facade' // [!code ++]

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverLiveSharePlugin)
```

如果你拥有 Univer 的商业许可证，请参考[在客户端使用许可证](https://docs.univer.ai/zh-CN/guides/license.md#in-plugin-mode)进行配置。

## Facade API

演示跟随功能在 Facade API 中扩展了相关接口，你可以通过 `univerAPI` 直接调用。

### 引入

> [!INFO: 插件模式提示]
> 仅插件模式需要手动引入 Facade 包。预设模式已内置对应的 Facade 包，无需额外导入。

```typescript
import '@univerjs-pro/live-share/facade'
```

### 状态枚举

```typescript
export enum LiveShareStatus {
  IDLE = 'idle',
  FOLLOWING = 'following',
  PRESENTING = 'presenting',
}
```

### 使用示例

```typescript
// 获取当前状态
const status = univerAPI.getLiveShareStatus()

if (status === LiveShareStatus.IDLE) {
  // 如果当前空闲，开始演示
  univerAPI.startPresenting()
} else if (status === LiveShareStatus.PRESENTING) {
  // 如果正在演示，停止演示
  univerAPI.stopPresenting()
}

// 开始跟随
univerAPI.startFollowing()

// 停止跟随
univerAPI.stopFollowing()
```