Skip to content
Chameleon Docs

内置插件列表

内置插件列表

Chameleon Engine 提供了一套完整的内置插件系统。以下是所有可用的内置插件：

核心插件

默认插件列表 (DEFAULT_PLUGIN_LIST)

以下插件包含在 DEFAULT_PLUGIN_LIST 中，是编辑器的核心功能：

插件名描述是否必需使用文档源码链接
Designer设计器画布，负责页面渲染和编辑✅ 必需查看详情Github
OutlineTree展示页面层级结构的树形视图建议查看详情Github
ComponentLibrary组件库面板，显示可用组件建议查看详情Github
GlobalStatePanel全局数据管理面板可选查看详情Github
RightPanel右侧面板容器建议查看详情Github
History操作历史记录管理（撤销/重做）建议查看详情Github
Hotkeys快捷键支持建议查看详情Github

右侧面板子插件

以下插件在 RightPanel 中使用，提供具体的编辑功能：

插件名描述使用文档源码链接
PropertyPanel元素属性编辑面板查看详情Github
VisualPanelPlus元素样式编辑面板查看详情Github
ComponentStatePanel组件状态管理面板查看详情Github
AdvancePanel组件高级设置面板查看详情Github
EventPanel事件绑定面板查看详情Github

独立插件

以下插件可以独立使用，不包含在默认列表中：

插件名描述使用文档源码链接
DisplaySourceSchema源码展示插件，查看页面 JSON Schema查看详情Github

使用方式

使用默认插件列表

import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';


const { DEFAULT_PLUGIN_LIST } = plugins;


function App() {
  return <Engine plugins={DEFAULT_PLUGIN_LIST} schema={pageSchema} material={materials} />;
}

自定义插件列表

import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';


const { DesignerPlugin, ComponentLibPlugin, OutlineTreePlugin, RightPanelPlugin, HistoryPlugin } = plugins;


function App() {
  // 只使用必要的插件
  const customPluginList = [
    DesignerPlugin, // 必需
    ComponentLibPlugin, // 组件库
    OutlineTreePlugin, // 结构树
    RightPanelPlugin, // 右侧面板
    HistoryPlugin, // 历史记录
  ];


  return <Engine plugins={customPluginList} schema={pageSchema} material={materials} />;
}

添加独立插件

import { Engine, plugins } from '@chamn/engine';
import '@chamn/engine/dist/style.css';
import { Button } from 'antd';
import { DisplaySourceSchema } from '@chamn/engine';


const { DEFAULT_PLUGIN_LIST } = plugins;


function App() {
  const onReady = (ctx) => {
    const workbench = ctx.engine.getWorkbench();


    // 使用 DisplaySourceSchema 插件
    workbench?.replaceTopBarView(
      <DisplaySourceSchema pageModel={ctx.engine.pageModel} engineCtx={ctx}>
        <Button>查看源码</Button>
      </DisplaySourceSchema>
    );
  };


  return <Engine plugins={DEFAULT_PLUGIN_LIST} schema={pageSchema} material={materials} onReady={onReady} />;
}

插件依赖关系

  • DesignerPlugin 是核心插件，其他插件都依赖它
  • RightPanelPlugin 是右侧面板的容器，PropertyPanel、VisualPanelPlus 等子面板依赖它
  • HistoryPlugin 依赖于页面模型的事件系统
  • HotkeysPlugin 依赖 DesignerPlugin 和 HistoryPlugin

下一步