# 自定义组件

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

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

---

`UniverPdfsUIPlugin` 使用 Univer 标准工作台区域组合 PDF 界面。

| 模式                     | PDF UI 插件挂载的组件                           |
| ---------------------- | ---------------------------------------- |
| 始终挂载                   | 左侧栏中的页面缩略图栏、内容区域中的 PDF Canvas，以及 PDF 底栏。 |
| `editor.enabled: true` | 功能区与右键菜单项、属性检查器、剪贴板集成、插入控件，以及编辑器专用菜单组件。  |

将 `editor.enabled` 设为 `false` 会保留查看器区域，并省略仅用于编辑的组件和服务。

## PDF 组件边界

PDF Canvas、缩略图栏、底栏、检查器、表格选择器和工具模式标签使用的 React 视图与组件标识符都是内部实现细节。`@univerjs-pro/pdfs-ui` 根入口没有导出它们，它们也不是受支持的替换插槽。

不要猜测或复制内部组件键，再通过 `univerAPI.registerComponent` 替换这些视图。需要控制 PDF 行为时，请使用 [PDF Facade 指南](https://docs.univer.ai/zh-CN/guides/pdfs/getting-started/facade.md)中支持的 API。

## 在 PDF 旁添加应用级 UI

共享 UI Facade 仍可注册应用组件，并在 Univer 的普通侧边栏或对话框中展示。它扩展的是外围应用界面，不会替换 PDF 插件组件。

```tsx
const registration = univerAPI.registerComponent(
  'pdf-help-panel',
  () => <div>PDF workflow help</div>,
)

const sidebar = univerAPI.openSidebar({
  id: 'pdf-help',
  header: { title: 'PDF help' },
  children: { label: 'pdf-help-panel' },
  width: 320,
})

// 不再需要该扩展时：
sidebar.dispose()
registration.dispose()
```

请在 UI Facade 加载完成后注册组件，并在移除扩展时释放两个句柄。