页面侧边栏
页面侧边栏（页边栏）本质上是一个可配置的插槽，它允许您向其中添加自定义内容，以实现个性化内容展示，也可以和工具栏实现联动，见工具栏扩展。
AI 聊天助手就是通过页边栏实现的，具体展示效果见AI 聊天助手。
使用场景
- 接入“复杂但高价值”的业务面板（自定义业务面板等）
- 放置文档导航与结构面板（目录、章节列表、模板库、版本列表）
- 承载审批/发布/归档等业务流程（表单 + 进度 + 操作按钮）
- 做跨文档能力入口（全文检索、引用管理、术语库、知识库问答）
- 多插件并存：用 extensions 注入多个侧边栏分组，按需展示
与其他功能协同使用
- 工具栏（toolbar）：工具栏提供触发入口，页边栏承载交互与状态展示
- AI（ai）：Chat/Assistant 等复杂交互更适合放在页边栏中长期驻留
- 评论（comments）与修订（revision）：审阅相关记录流可统一放入侧边栏面板
- 历史版本（versions）：侧边栏适合承载版本列表、预览与对比入口
演示视频
页边栏配置
const defaultOptions = {
// 页边栏相关配置
page: {
aside: {
show: [],
extensions: [],
},
},
}配置项说明
page.aside.show
说明：页边栏显示配置，您也可以通过 openAside、closeAside 方法来动态显示或隐藏页面侧边栏。
类型：Array
配置项示例
aside: {
show: ['office', 'plugins'], // 按数组顺序依次显示
},page.aside.extensions
说明：页边栏扩展配置，可通过此配置动态注入个性化页边栏。
类型：Array
配置项
title：String，自定义扩展页边栏的显示名称。key：String，自定义扩展页边栏的唯一标识，是插槽注入的重要依据，不允许和默认分组标识重复。目前不可设置值有chatPage等。
配置项示例
aside: {
extensions: [
// 数组中的每一项代表一个新的分组
{ title: '办公助手', key: 'office' },
{ title: '扩展插件', key: 'plugins' },
],
},插槽配置项
插槽设置和标准的工具栏插槽格式相同，其中标识为#page_aside_{key} 依据扩展配置项中key值来处理。
插槽示例
<template #page_aside_office="props">
<span>page_aside_office slot：{{ props }}</span>
</template>
<template #page_aside_plugins="props">
<span>page_aside_plugins slot：{{ props }}</span>
</template>页边栏插槽
通过具名插槽，向页边栏插入自定义内容。
<template>
<umo-editor v-bind="options">
<template #page_aside_office="props">
<span>page_aside_office slot：{{ props }}</span>
</template>
<template #page_aside_plugins="props">
<span>page_aside_plugins slot：{{ props }}</span>
</template>
</umo-editor>
</template>
<script setup>
import { ref } from 'vue'
import { UmoEditor } from '@umoteam/editor'
const options = ref({
// 配置项
// ...
page: {
aside: {
show: ['office', 'plugins'],
extensions: [
{ title: '办公助手', key: 'office' },
{ title: '扩展插件', key: 'plugins' },
],
},
},
})
</script>方法列表
openAside
说明：根据页边栏标识展开页边栏面板。
参数：extensions[].key，String，页边栏的唯一标识符。
返回值：无
closeAside
说明：根据标识关闭页边栏面板。
参数：extensions[].key，String，页边栏的唯一标识符。
返回值：无