Confluence中Expand与UI Expand的区别是什么？

嘿，这个问题问得很精准！在Confluence生态里，原生Expand组件和UI Expand组件确实容易被混淆，我给你拆解下它们的核心差异：

1. 定位与适用场景 #

• 原生Expand组件：是Confluence编辑器自带的基础工具，面向普通内容创作者。主要用来快速折叠/展开段落、列表这类基础内容，比如在文档里隐藏次要的补充说明，让页面结构更清爽，操作完全可视化，不用写代码。
• UI Expand组件：属于Confluence官方UI组件库（比如AtlasKit）的一部分，是给开发者准备的。用来在自定义插件、定制宏或者个性化页面中构建交互元素，偏向复杂前端场景的定制开发。

2. 自定义能力 #

• 原生Expand组件：自定义空间极有限——只能在编辑器里设置折叠后的标题文本，没法修改样式（比如颜色、边框），也加不了自定义交互逻辑（比如展开时触发特定事件）。
• UI Expand组件：开发者可以通过代码完全定制：
  • 自定义展开/收起触发按钮的样式、图标
  • 绑定事件（比如展开时加载异步内容、发送统计埋点）
  • 控制默认展开状态（默认展开/收起）
  • 嵌套其他UI组件在折叠面板内

3. 集成与使用方式 #

• 原生Expand组件：在Confluence编辑器工具栏直接点击“Expand”按钮插入，纯可视化操作，任何有编辑权限的用户都能快速上手。
• UI Expand组件：需要在前端项目中引入对应UI库（比如@atlaskit/expand），通过React代码调用，示例代码如下：

  import Expand from '@atlaskit/expand';
  
  const CustomExpandPanel = () => (
    <Expand
      trigger="点击查看详细内容"
      defaultExpanded={false}
      onExpand={() => console.log('面板已展开')}
      onCollapse={() => console.log('面板已收起')}
    >
      <div>这里是自定义的折叠内容，可嵌套任意UI元素</div>
    </Expand>
  );
  

4. 渲染与兼容性 #

• 原生Expand组件：渲染逻辑由Confluence核心系统控制，在所有Confluence版本（云版/服务器版）中表现一致，无需担心兼容性问题，终端用户完全无感知。
• UI Expand组件：依赖特定版本的UI组件库，不同Confluence版本可能需要匹配对应版本的组件库；服务器版还需考虑插件版本兼容，渲染效果由开发者代码决定，灵活性更高但需要维护兼容性。

5. 权限与内容控制 #

• 原生Expand组件：内容权限完全继承所在页面的权限，所有能访问页面的用户都能查看展开后的内容，无法单独控制折叠内容的访问权限。
• UI Expand组件：开发者可在代码中添加权限判断逻辑，比如仅允许特定用户组查看展开内容，或根据用户角色动态调整折叠面板内的内容。

内容的提问来源于stack exchange，提问作者Ray K.