+
+基于 Schema 和物料组件，如何渲染出我们的页面？这一节描述的就是这个。
+
+## npm 包与仓库信息
+
+- React 框架渲染 npm 包：@alilc/lowcode-react-renderer
+- 仓库：[https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) 下的
+ - packages/renderer-core
+ - packages/react-renderer
+ - packages/react-simulator-renderer
+
+## 渲染框架原理
+### 整体架构
+
+
+
+- 协议层：基于[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
+- 能力层：提供组件、区块、页面等渲染所需的核心能力，包括 Props 解析、样式注入、条件渲染等。
+- 适配层：由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来，能起到独立可扩展的作用。
+- 渲染层：提供核心的渲染方法，由于不同运行时框架提供的渲染方法是不同的，所以其通过适配层进行注入，只需要提供适配层所需的接口，即可实现渲染。
+- 应用层：根据渲染层所提供的方法，可以应用到项目中，根据使用的方法和规模即可实现应用、页面、区块的渲染。
+
+### 核心解析
+
+这里主要解析一下刚刚提到的架构中的适配层和渲染层。
+
+#### 适配层
+适配层提供的是各个框架之间的差异项。比如 `React.createElement` 和 `Rax.createElement` 方法是不同的。所以需要在适配层对 API 进行抹平。
+
+##### React
+```typescript
+import { createElement } from 'react';
+import {
+ adapter,
+} from '@ali/lowcode-renderer-core';
+
+adapter.setRuntime({
+ createElement,
+});
+```
+##### Rax
+```typescript
+import { createElement } from 'rax';
+import {
+ adapter,
+} from '@ali/lowcode-renderer-core';
+
+adapter.setRuntime({
+ createElement,
+});
+```
+这时，在核心层使用的 `createElement` 会基于使用不同的 renderer 而使用不同的方法，自动适配框架所需的运行时方法。
+
+所需的方法包括：
+
+- `setRuntime`：设置运行时相关方法
+ - `Component`：组件类，参考 React 的 `Component`。
+ - `PureComponent`：组件类，参考 React 的 `PureComponent`。
+ - `createContext`：创建一个 `Context` 对象的方法。例如，当 React 渲染一个订阅了这个 `Context` 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 `Provider` 中读取到当前的 `context` 值。
+ - `createElement`：创建 `Component` 元素，例如在 React 中即为创建 React 元素。
+ - `forwardRef`：ref 转发的方法。Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。
+ - `findDOMNode`：是一个访问底层 DOM 节点的方法。如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。
+- `setRenderers`
+ - `PageRenderer`：页面渲染的方法。可以定制页面渲染的生命周期，定制导航，定制路由等。
+ - `ComponentRenderer`：组件渲染的方法。
+ - `BlockRenderer`：区块渲染的方法。
+
+#### 渲染层
+##### React Renderer
+内部的技术栈统一都是 React，大多数适配层的 API 都是按照 React 来设计的，所以对于 React Renderer 来说，需要做的不多。
+
+React Renderer 的代码量很少，主要是将 React API 注册到适配层中。
+
+```typescript
+import React, { Component, PureComponent, createElement, createContext, forwardRef, ReactInstance, ContextType } from 'react';
+import ReactDOM from 'react-dom';
+import {
+ adapter,
+ pageRendererFactory,
+ componentRendererFactory,
+ blockRendererFactory,
+ addonRendererFactory,
+ tempRendererFactory,
+ rendererFactory,
+ types,
+} from '@ali/lowcode-renderer-core';
+import ConfigProvider from '@alifd/next/lib/config-provider';
+
+window.React = React;
+(window as any).ReactDom = ReactDOM;
+
+adapter.setRuntime({
+ Component,
+ PureComponent,
+ createContext,
+ createElement,
+ forwardRef,
+ findDOMNode: ReactDOM.findDOMNode,
+});
+
+adapter.setRenderers({
+ PageRenderer: pageRendererFactory(),
+ ComponentRenderer: componentRendererFactory(),
+ BlockRenderer: blockRendererFactory(),
+ AddonRenderer: addonRendererFactory(),
+ TempRenderer: tempRendererFactory(),
+ DivRenderer: blockRendererFactory(),
+});
+
+adapter.setConfigProvider(ConfigProvider);
+```
+
+##### Rax Renderer
+Rax 的大多数 API 和 React 基本也是一致的，差异点在于重写了一些方法。
+```typescript
+import { Component, PureComponent, createElement, createContext, forwardRef } from 'rax';
+import findDOMNode from 'rax-find-dom-node';
+import {
+ adapter,
+ addonRendererFactory,
+ tempRendererFactory,
+ rendererFactory,
+} from '@ali/lowcode-renderer-core';
+import pageRendererFactory from './renderer/page';
+import componentRendererFactory from './renderer/component';
+import blockRendererFactory from './renderer/block';
+import CompFactory from './hoc/compFactory';
+
+adapter.setRuntime({
+ Component,
+ PureComponent,
+ createContext,
+ createElement,
+ forwardRef,
+ findDOMNode,
+});
+
+adapter.setRenderers({
+ PageRenderer: pageRendererFactory(),
+ ComponentRenderer: componentRendererFactory(),
+ BlockRenderer: blockRendererFactory(),
+ AddonRenderer: addonRendererFactory(),
+ TempRenderer: tempRendererFactory(),
+});
+```
+
+### 多模式渲染
+#### 预览模式渲染
+预览模式的渲染，主要是通过 Schema、components 即可完成上述的页面渲染能力。
+```typescript
+import ReactRenderer from '@ali/lowcode-react-renderer';
+import ReactDOM from 'react-dom';
+import { Button } from '@alifd/next';
+
+const schema = {
+ componentName: 'Page',
+ props: {},
+ children: [
+ {
+ componentName: 'Button',
+ props: {
+ type: 'primary',
+ style: {
+ color: '#2077ff'
+ },
+ },
+ children: '确定',
+ },
+ ],
+};
+
+const components = {
+ Button,
+};
+
+ReactDOM.render((
+ 自定义 react 标签
, content)
+ }
+ })
+ }
+ }
+}
+
+pluginX6DesignerExtension.pluginName = 'plugin-x6-designer-extension';
+
+export default pluginX6DesignerExtension;
+```
+x6Designer为图实例暴露出来的一些接口，可基于此进行一些图的必要插件的封装，整个插件的封装完全follow低代码引擎的插件，详情可参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/pluginWidget
+
+## 开发物料
+```bash
+npm init @alilc/element your-material-demo
+```
+
+
+仓库初始化完成
+
+
+接下来即可编写物料内容了
+图物料与低代码的dom场景存在画布的差异，因此暂不支持物料单独调试，须通过项目demo进行物料调试
+
+### 资产描述
+```bash
+npm run lowcode:build
+```
+如果物料是个React组件，则在执行上述命令时会自动生成对应的meta.ts，但图物料很多时候并非一个React组件，因此须手动生产meta.ts
+
+可参考： https://github.com/alibaba/lowcode-materials/blob/main/packages/graph-x6-materials/lowcode/send-email/meta.ts
+同时会自动生成物料描述文件
+
+### 物料调试
+#### 物料侧
+物料想要支持被项目动态inject调试，须在build.lowcode.js中加入
+```javascript
+[
+ '@alilc/build-plugin-alt',
+ {
+ type: 'component',
+ inject: true,
+ library
+ },
+]
+```
+
+
+本地启动
+```bash
+npm run lowcode:dev
+```
+#### 项目侧
+通过@alilc/lce-graph-core加载物料的天然支持了debug，因此无须特殊处理。
+若项目中自行加载，则参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/cli
+项目访问地址后拼接query "?debug"即可进入物料调试
+
+
+
diff --git a/docs/docs/guide/expand/editor/material.md b/docs/docs/guide/expand/editor/material.md
new file mode 100644
index 0000000000..6e4979553b
--- /dev/null
+++ b/docs/docs/guide/expand/editor/material.md
@@ -0,0 +1,292 @@
+---
+title: 物料扩展
+sidebar_position: 1
+---
+## 物料简述
+物料是页面搭建的原料，按照粒度可分为组件、区块和模板：
+
+1. 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；
+2. 区块：区块是一小段符合低代码协议的 schema，其内部会包含一个或多个组件，用户向设计器中拖入一个区块后可以随意修改其内部内容；
+3. 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；
+
+低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。
+## 资产包配置
+### 什么是低代码资产包
+
+在低代码 Demo 中，我们可以看到，组件面板不只提供一个组件，组件是以集合的形式提供给低代码平台的，而低代码资产包正是这些组件构成集合的形式。
+**_它背后的 Interface，_**[**_在引擎中的定义摘抄如下_**](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/assets.ts)**_：_**
+
+```typescript
+export interface Assets {
+ version: string; // 资产包协议版本号
+ packages?: Arraydumb
;
+ }
+}
+```
+
+引入 parse 工具自动解析
+
+```typescript
+import parse from '@alilc/lowcode-material-parser';
+(async () => {
+ const result = await parse({ entry: '/path/to/component' });
+ console.log(JSON.stringify(result, null, 2));
+})();
+```
+
+因为一个组件可能输出多个子组件，所以解析结果是个数组。
+
+```json
+[
+ {
+ "componentName": "FusionForm",
+ "title": "",
+ "docUrl": "",
+ "screenshot": "",
+ "devMode": "proCode",
+ "npm": {
+ "package": "",
+ "version": "",
+ "exportName": "default",
+ "main": "",
+ "destructuring": false,
+ "subName": ""
+ },
+ "props": [
+ {
+ "name": "name",
+ "propType": "string",
+ "description": "这是用于描述姓名",
+ "defaultValue": "张三"
+ },
+ {
+ "name": "age",
+ "propType": "number",
+ "description": "这是用于描述年龄",
+ "defaultValue": 18
+ },
+ {
+ "name": "friends",
+ "propType": "array",
+ "description": "这是用于描述好友列表",
+ "defaultValue": [
+ "李四",
+ "王五",
+ "赵六"
+ ]
+ }
+ ]
+ }
+]
+```
+
+## 手工配置物料描述
+
+如果自动生成的物料无法满足需求，我们就需要手动配置物料描述。本节将分场景描述物料配置的内容。
+
+### 常见配置
+
+#### 组件的属性只有有限的值
+
+增加一个 size 属性，只能从 'large'、'normal'、'small' 这个候选值中选择。
+
+以上面自动解析的物料为例，在此基础上手工加上 size 属性：
+
+```json
+[
+ {
+ "componentName": "FusionForm",
+ "title": "",
+ "docUrl": "",
+ "screenshot": "",
+ "devMode": "proCode",
+ "npm": {
+ "package": "",
+ "version": "",
+ "exportName": "default",
+ "main": "",
+ "destructuring": false,
+ "subName": ""
+ },
+ "props": [
+ {
+ "name": "name",
+ "propType": "string",
+ "description": "这是用于描述姓名",
+ "defaultValue": "张三"
+ },
+ {
+ "name": "age",
+ "propType": "number",
+ "description": "这是用于描述年龄",
+ "defaultValue": 18
+ },
+ {
+ "name": "friends",
+ "propType": "array",
+ "description": "这是用于描述好友列表",
+ "defaultValue": [
+ "李四",
+ "王五",
+ "赵六"
+ ]
+ }
+ ],
+ // 手工增加的 size 属性
+ "configure": {
+ "isExtend": true,
+ "props": [
+ {
+ "title": "尺寸",
+ "name": "size",
+ "setter": {
+ "componentName": 'RadioGroupSetter',
+ "isRequired": true,
+ "props": {
+ "options": [
+ { "title": "大", "value": "large" },
+ { "title": "中", "value": "normal" },
+ { "title": "小", "value": "small" }
+ ]
+ },
+ }
+ }
+ ]
+ }
+ }
+]
+```
+
+#### 组件的属性既可以设置固定值，也可以绑定到变量
+
+我们知道一种属性形式就需要一种 setter 来设置，如果想要将 value 属性允许输入字符串，那就需要设置为 `StringSetter`，如果允许绑定变量，就需要设置为 `VariableSetter`，具体设置器请参考[预置设置器列表](/site/docs/guide/appendix/setters)。
+
+那如果都想要呢？可以使用 `MixedSetter` 来实现。
+
+```javascript
+{
+ // ...
+ configure: {
+ isExtend: true,
+ props: [
+ {
+ title: '输入框的值',
+ name: 'activeValue',
+ setter: {
+ componentName: 'MixedSetter',
+ isRequired: true,
+ props: {
+ setters: [
+ 'StringSetter',
+ 'NumberSetter',
+ 'VariableSetter',
+ ],
+ },
+ }
+ }
+ ]
+ }
+}
+```
+
+设置后，就会出现“切换设置器”的操作项了
+
+
+
+
+
+#### 开启组件样式设置
+
+
+
+```javascript
+{
+ configure: {
+ // ...,
+ supports: {
+ style: true,
+ },
+ // ...
+ }
+}
+```
+
+#### 设置组件的默认事件
+
+
+
+```javascript
+{
+ configure: {
+ // ...
+ supports: {
+ events: ['onPressEnter', 'onClear', 'onChange', 'onKeyDown', 'onFocus', 'onBlur'],
+ },
+ // ...
+ }
+}
+```
+
+#### 设置 prop 标题的 tip
+
+
+
+```javascript
+{
+ name: 'label',
+ setter: 'StringSetter',
+ title: {
+ label: {
+ type: 'i18n',
+ zh_CN: '标签文本',
+ en_US: 'Label',
+ },
+ tip: {
+ type: 'i18n',
+ zh_CN: '属性：label | 说明：标签文本内容',
+ en_US: 'prop: label | description: label content',
+ },
+ },
+}
+```
+
+#### 配置 prop 对应 setter 在配置面板的展示方式
+
+##### inline
+
+
+
+```javascript
+{
+ configure: {
+ props: [{
+ description: '标签文本',
+ display: 'inline',
+ }]
+ }
+}
+```
+
+##### block
+
+
+
+```javascript
+{
+ configure: {
+ props: [{
+ description: '高级',
+ display: 'block',
+ }]
+ }
+}
+```
+
+##### accordion
+
+
+
+```javascript
+{
+ configure: {
+ props: [{
+ description: '表单项配置',
+ display: 'accordion',
+ }]
+ }
+}
+```
+
+##### entry
+
+
+
+
+
+
+```javascript
+{
+ configure: {
+ props: [{
+ description: '风格与样式',
+ display: 'entry',
+ }]
+ }
+}
+```
+
+##### plain
+
+
+
+```javascript
+{
+ configure: {
+ props: [{
+ description: '返回上级',
+ display: 'plain',
+ }]
+ }
+}
+```
+
+
+### 进阶配置
+
+#### 组件的 children 属性允许传入 ReactNode
+
+例如有一个如下的 Tab 选项卡组件，每个 TabPane 的 children 都是一个组件
+
+
+
+只需要增加 `isContainer` 配置即可
+
+```javascript
+{
+ // ...
+ configure: {
+ // ...
+ component: {
+ // 新增，设置组件为容器组件，可拖入组件
+ isContainer: true,
+ },
+ }
+}
+```
+
+假设我们希望只允许拖拽 Table、Button 等内容放在 TabPane 里。配置白名单 `childWhitelist` 即可
+
+```javascript
+{
+ // ...
+ configure: {
+ // ...
+ component: {
+ isContainer: true,
+ nestingRule: {
+ // 允许拖入的组件白名单
+ childWhitelist: ['Table', 'Button'],
+ // 同理也可以设置该组件允许被拖入哪些父组件里
+ parentWhitelist: ['Tab'],
+ },
+ },
+ },
+}
+```
+#### 组件的非 children 属性允许传入 ReactNode
+
+这就需要使用 `SlotSetter` 开启插槽了，如下面示例，给 Tab 的 title 开启插槽，允许拖拽组件
+
+
+
+```json
+{
+ // ...
+ configure: {
+ isExtend: true,
+ props: [
+ {
+ title: '选项卡标题',
+ name: 'title',
+ setter: {
+ componentName: 'MixedSetter',
+ props: {
+ setters: [
+ 'StringSetter',
+ 'SlotSetter',
+ 'VariableSetter',
+ ],
+ },
+ },
+ },
+ ],
+ },
+}
+```
+
+#### 屏蔽组件在设计器中的操作按钮
+
+正常情况下，组件允许复制：
+
+
+
+如果希望禁止组件的复制行为，我们可以这样做：
+
+
+
+```javascript
+{
+ configure: {
+ component: {
+ disableBehaviors: ['copy'],
+ },
+ },
+}
+```
+
+#### 实现一个 BackwardSetter
+
+
+
+```javascript
+{
+ name: 'back',
+ title: ' ',
+ display: 'plain',
+ setter: BackwardSetter,
+}
+
+// BackwardSetter
+import { SettingTarget, DynamicSetter } from '@alilc/lowcode-types';
+const BackwardSetter: DynamicSetter = (target: SettingTarget) => {
+ return {
+ componentName: (
+
+ ),
+ };
+};
+```
+
+### 高级配置
+
+#### 不展现一个 prop 配置
+
+- 始终隐藏当前 prop
+
+```javascript
+{
+ // 始终隐藏当前 prop 配置
+ condition: () => false,
+}
+```
+
+- 根据其它 prop 的值展示/隐藏当前 prop
+
+```javascript
+{
+ // direction 为 hoz 则展示当前 prop 配置
+ condition: (target) => {
+ return target.getProps().getPropValue('direction') === 'hoz';
+ }
+}
+```
+
+#### props 联动
+
+```javascript
+// 根据当前 prop 的值动态设置其它 prop 的值
+{
+ name: 'labelAlign',
+ // ...
+ extraProps: {
+ setValue: (target, value) => {
+ if (value === 'inset') {
+ target.getProps().setPropValue('labelCol', null);
+ target.getProps().setPropValue('wrapperCol', null);
+ } else if (value === 'left') {
+ target.getProps().setPropValue('labelCol', { fixedSpan: 4 });
+ target.getProps().setPropValue('wrapperCol', null);
+ }
+ return target.getProps().setPropValue('labelAlign', value);
+ },
+ },
+}
+// 根据其它 prop 的值来设置当前 prop 的值
+{
+ name: 'status',
+ // ...
+ extraProps: {
+ getValue: (target) => {
+ const isPreview = target.getProps().getPropValue('isPreview');
+ return isPreview ? 'readonly' : 'editable';
+ }
+ }
+}
+```
+
+#### 动态 setter 配置
+
+可以通过 DynamicSetter 传入的 target 获取一些引擎暴露的数据，例如当前有哪些组件被加载到引擎中，将这个数据作为 SelectSetter 的选项，让用户选择：
+
+```javascript
+{
+ setter: (target) => {
+ return {
+ componentName: 'SelectSetter',
+ props: {
+ options: target.designer.props.componentMetadatas.filter(
+ (item) => item.isFormItemComponent).map(
+ (item) => {
+ return {
+ title: item.title || item.componentName,
+ value: item.componentName,
+ };
+ }
+ ),
+ ),
+ },
+ };
+ }
+}
+```
diff --git a/docs/docs/guide/expand/editor/parts/_category_.json b/docs/docs/guide/expand/editor/parts/_category_.json
new file mode 100644
index 0000000000..005a3caf6c
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Parts 造物",
+ "position": 1
+}
diff --git a/docs/docs/guide/expand/editor/parts/partsIntro.md b/docs/docs/guide/expand/editor/parts/partsIntro.md
new file mode 100644
index 0000000000..a6fc6e8817
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/partsIntro.md
@@ -0,0 +1,18 @@
+---
+title: 介绍
+sidebar_position: 1
+---
+## 介绍
+
+
+
+「Parts·造物」是基于开源低代码引擎打造的次时代物料研发和集成工具，一方面作为低代码引擎搭建低代码平台的一个样板展示开源生态下的各个组件如何集合在一起形成生产力，另一方面也可以生产低代码平台所需的物料。
+
+目前「Parts·造物」主要提供两大产品功能：
+ 1. React 组件导入低代码引擎：通过在线可视化的「物料描述」配置，任意工具开发的 React 组件都可以快速完成对低代码引擎的适配，导入到低代码引擎项目中进行使用。不必额外开发新的组件。
+ 2. 低代码生产组件：通过低代码的形式生产组件，极低上手门槛，提供丰富的原子组件用于组合，完善的调试预览和组件生命周期控制。生产的组件既可以在低代码引擎项目中使用，也可以出码后在普通源码项目中使用。
+
+
+## 联系我们
+
+
diff --git a/docs/docs/guide/expand/editor/parts/partsassets.md b/docs/docs/guide/expand/editor/parts/partsassets.md
new file mode 100644
index 0000000000..00670ecadc
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/partsassets.md
@@ -0,0 +1,267 @@
+---
+title: 资产包管理
+sidebar_position: 4
+---
+
+## 介绍
+
+通过前述介绍，相信大家已经了解如何使用「[Parts·造物](https://parts.lowcode-engine.cn/)」来将已有的 React 组件快速接入低代码引擎，以及生产低代码组件。
+
+大家在使用的过程中，可能会希望构建出来的资产包可以后续随时访问下载，或者希望构建资产包时各个组件的版本等信息可以持久化起来并且能够多人维护。
+
+通过「[Parts·造物](https://parts.lowcode-engine.cn/)」的 `资产包` 管理功能帮助大家解决这个问题
+
+
+
+## 新建资产包
+
+首先，我们在 我的资产包 tab 中点击 `新建资产包`
+
+
+- 填写资产包名称
+- 配置资产包管理员，管理员拥有该资产包的所有权限，初始默认为资产包的创建者，还可以添加其他人作为管理员，
+- 配置资产包描述 (可选)
+- 点击 `确定`, 即可完成资产包的创建
+
+接下来需要为资产包添加一个或者多个组件。
+
+## 添加组件
+
+第二步：新建完资产包以后，我们就可以为其添加组件了，如果是新建资产包流程，新建完成之后会自动弹出组件配置的弹窗，当然，你可可以通过点击资产包卡片的方式打开组件配置的弹窗。
+
+
+- 点击弹窗中 `添加组件` 按钮，在弹出的组件选择面板中，选中需要添加的组件并点击 `下一步`。
+ 
+- 进入组件版本以及描述协议版本选择界面，选择所需要的正确版本，点击 `安装` 即可完成一个组件的添加。
+ 
+
+## 构建资产包
+
+添加完组件以后就点击 `保存并构建资产包` 进入资产包构建配置弹窗
+
+
+- `开启缓存` : 可充分利用之前的构建结果缓存来加速资产包的生成，我们会将每个组件的构建结果以 包名和版本号为 key 进行缓存。
+- `任务描述` : 当前构建任务的一些描述信息。
+
+点击 `确认` 按钮 会自动跳转到当前资产包的构建历史界面：
+
+构建历史界面会显示当前资产包所有的构建历史记录，表格状态栏展示了构建的状态：`成功`,`失败`,`正在运行` 三种状态，操作列可以在构建成功时复制或者下载资产包结果
+
+## 使用资产包
+你可以在 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 中直接引用，可直接替换 demo 中原来的资产包文件：
+例如，在 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/services/assets.json)，即可快速使用自己的物料了。
+
+### 在编辑器中使用资产包
+在使用含有低代码组件的资产包注意 注意引擎版本必须大于等于 `1.1.0-beta.9`。
+然后直接替换 [lowcode-demo](https://github.com/alibaba/lowcode-demo) demo 中的 `assets.json` 文件即可。
+
+### 在预览中使用资产包
+在预览中使用资产包的整体思路是从 `资产包` 中提取并转换出 `ReactRenderer` 渲染所需要的 react 组件列表 (`components` 参数)，然后将 `schema` 以及 `components` 传入到 `ReactRenderer` 中进行渲染，需要注意的是，在 `资产包` 的转换过程中，我们也需要将 `低代码组件` 转换成 react 组件，具体逻辑可以参考下 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中 `src/parse-assets.ts` 文件的实现。
+基于资产包进行预览的整体逻辑如下： [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/preview.tsx)：
+```ts
+import ReactDOM from 'react-dom';
+import React, { useState } from 'react';
+import { Loading } from '@alifd/next';
+import ReactRenderer from '@alilc/lowcode-react-renderer';
+import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler';
+import {
+ getProjectSchemaFromLocalStorage,
+} from './services/mockService';
+import assets from './services/assets.json';
+import { parseAssets } from './parse-assets';
+
+const getScenarioName = function () {
+ if (location.search) {
+ return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
+ }
+ return 'index';
+};
+
+const SamplePreview = () => {
+ const [data, setData] = useState({});
+ async function init() {
+ const scenarioName = getScenarioName();
+ const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
+ const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
+ const schema = componentsTree[0];
+ const componentsMap: any = {};
+ componentsMapArray.forEach((component: any) => {
+ componentsMap[component.componentName] = component;
+ });
+
+ // 特别提醒重点注意！！！：从资产包中解析出所有的 react 组件列表
+ const { components } = await parseAssets(assets);
+
+ setData({
+ schema,
+ components,
+ });
+ }
+
+ const { schema, components } = data;
+
+ if (!schema || !components) {
+ init();
+ return
+
+ );
+};
+
+ReactDOM.render(
\ No newline at end of file
diff --git a/docs/docs/guide/expand/editor/parts/partslcc.md b/docs/docs/guide/expand/editor/parts/partslcc.md
new file mode 100644
index 0000000000..4d24b72f3a
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/partslcc.md
@@ -0,0 +1,92 @@
+---
+title: 低代码组件
+sidebar_position: 2
+---
+## 什么是低代码组件
+我们先了解一下什么是低代码组件，为什么要用低代码组件。
+
+低代码组件是通过可视化的方式生产的组件，这些组件既可以用于低代码搭建体系，也可以用于 ProCode 开发体系（后续迭代）。
+
+那么为什么我们要使用低代码的形式来开发组件：
+* 首先：轻快，低代码组件只需通过浏览器秒级完成初始化工作，不需要 ProCode 繁重的环境准备；环境一致（低代码环境），同时能够保证物料的开发环境和真实的运行环境是一致的，不会存在开发和运行环境不一致的问题。
+* 其次：通用能力可视化方式抽象，提升研发效能，比如获取远程数据、视图开发、依赖管理、生命周期、事件绑定等功能。
+
+低代码组件不是用来替代 ProCode 的开发方式，而是让开发者可以从 ProCode 中重复的工作脱离出来，抽象更多业务垂直的能力，从而起到提效的作用。
+
+## 创建组件
+
+环境准备：我们可以通过 Parts 提供的通用[低代码组件开发环境](https://parts.lowcode-engine.cn/material#/)开发。
+
+点击开发新组件 --> 填写组件标题 --> 填写组件名称 --> 点击确定，完成组件创建工作。
+
+
+
+## 组件开发
+
+一张图速览低代码组件开发的功能模块，其中大部分功能可以参考[低代码引擎文档](https://lowcode-engine.cn/site/docs/guide/quickStart/intro)。
+
+
+
+### 依赖管理
+
+依赖管理用于管理低代码组件本身的依赖（类似于 dependencies）。步骤：点击添加组件 --> 选择安装的组件 --> 保存并构建 (需要等待几分钟构建)。
+
+
+
+### 属性定义
+
+用于定义组件接收外部传入的 propTypes，组件内部可以通过this.props.${属性名称}的方式获取属性值。
+
+属性定义前建议先阅读 [物料描述详解](https://lowcode-engine.cn/site/docs/guide/expand/editor/metaSpec)、[预置设置器](https://lowcode-engine.cn/site/docs/guide/appendix/setters)。
+
+
+
+
+
+### 生命周期
+
+低代码组件的开发支持 componentDidMount、componentDidUpdate、componentDidCatch、componentWillUnmount 几个生命周期
+
+
+
+### 组件调试
+
+我们提供了一套线上实时调试的方案，只需点击右上角的调试按钮，就能自动创建一个低代码应用，在这个应用中可以实时调试当前的低代码组件。
+
+
+
+在低代码应用中使用，组件面板 --> 低代码组件，找到对应的低代码组件拖入画布即可。
+
+
+
+### 组件发布
+
+同时我们提供了组件发布的功能，用于组件版本管理，点击右上角的发布按钮即可发布组件
+
+
+
+## 组件使用
+
+组件的消费是通过资产包来管理的，详情请参考 [资产包管理](./partsassets)。
+
+## 组件导出
+
+开发好的低代码组件可以导出成为 React 组件，脱离低代码引擎独立使用。同时导出功能也为您的组件留出一份备份，您可以放心使用本产品的服务，而不用担心万一出现的不能服务的场景。
+
+在物料列表页面，低代码组件会有一个导出的动作。
+
+
+
+点击导出后，就会开启导出低代码组件的过程。这个过程持续 10s+，导出完成后会为您自动下载对应的 zip 包。
+
+
+
+zip 包解压后可以看到一个完整的组件脚手架工程，您可以在这个工程里继续开发调试，或者发布到合适的 npm 源中。
+
+
+
+注意：目前导出功能暂不支持 低代码组件嵌套。
+
+## 联系我们
+
+
\ No newline at end of file
diff --git a/docs/docs/guide/expand/editor/parts/prototype.md b/docs/docs/guide/expand/editor/parts/prototype.md
new file mode 100644
index 0000000000..b90728f657
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/prototype.md
@@ -0,0 +1,121 @@
+---
+title: React 组件导入
+sidebar_position: 3
+---
+## 介绍
+大家在使用[低代码引擎](https://lowcode-engine.cn/)构建低代码应用平台时，遇到的一个主要问题是如何让已有的 React 组件能够快速低成本地接入进来。这个问题拆解下来主要包括两个子问题：
+1. 如何给已有组件[配置物料描述](/site/docs/specs/material-spec)，
+2. 如何构建出一个低代码引擎能够识别的资产包 (Assets)。
+
+我们的产品「[Parts·造物](https://parts.lowcode-engine.cn/)」可以帮助大家解决这个问题。我们通过在线可视化的方式完成物料描述配置，并且提供一键打包的功能生成引擎可以识别的资产包。
+
+## 导入物料
+首先，我们需要在 [物料管理](/site/docs/specs/material-spec) 页面导入我们需要进行在线物料描述配置的物料。
+
+
+- 点击列表左上方的 导入已有物料 按钮
+- 在弹框中输入 npm 包名
+- 点击 获取包信息 按钮，获取 npm 包基本信息
+- 点击确定，导入成功
+
+
+## 配置管理
+第二步：物料导入以后，我们就可以为导入的物料新增[物料描述配置](/site/docs/specs/material-spec)，点击右侧的组件配置开始配置。
+
+
+### 新增配置
+
+- 点击配置管理右上角的 新增配置
+ - 选择组件的版本号
+ - 填写组件路径，一般和 npm 包的 package.json 里的 main 字段相同（如果填写错误，后面会渲染不出来）
+ - 描述字段用于给这份配置增加一些备注信息。
+
+
+
+为了降低配置成本，第一次新增配置的时候会自动解析组件代码，生成一份初始化组件物料描述。所以需要等待片刻，用于代码解析。解析完成后，点击配置按钮即可进入在线配置界面。
+
+
+
+### 组件描述配置
+操作界面如下，接下来讲具体的配置流程
+
+
+
+#### 新增组件
+
+如果新增配置的过程中，代码自动解析失败或者解析出来的组件列表不满足开发要求，我们可以点击左侧组件列表插件 新增 按钮，添加新的组件，具体的字段描述可以参考提示内容，以 [react-color](https://github.com/casesandberg/react-color) 为例：
+
+
+
+
+#### 给组件增加物料描述
+
+- 打开左侧 Setter 面板
+- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter）
+- 各种 Setter 的介绍可以参看这篇文档：[预置设置器列表](/site/docs/guide/appendix/setters)
+- 配置属性的基本信息（如图所示）
+- 配置完成后点击右上角的保存
+
+
+
+
+
+#### 高级配置（属性联动）
+
+举个栗子：如图所示，如果期望“设置器”这个配置项的值“被修改”的时候，下面的“默认值”跟着变化。
+
+
+
+如何使用
+
+组件的属性配置目前支持 3 个基本的联动函数：
+
+- 显示状态：返回 true | false，如果返回 true，表示组件配置显示，否则配置时不显示
+- 获取值：当调用该配置节点的 getValue 方法时触发的方法
+- 值变化：当调用该配置节点的 setValue 方法时触发的方法
+
+
+
+方法的第一个参数都是当前配置节点的对象，常用到的有以下几个：
+
+- getValue(): 获取当前节点的值，如果当前节点是子节点的话，否则为 undefined
+- setValue(): 设置当前节点的值，如果当前节点是子节点的话
+- parent: 当前节点的父节点
+- getPropValue(propName): 父节点获取子节点的属性值，propName 为子节点的属性名称
+- setPropValue(propName, value): 父节点设置子节点的属性值，propName 为子节点的属性名称，value 为设置的值
+- getConfig: 获取当前节点的配置，如 title、setter 等
+
+
+#### 调试物料描述
+
+点击右上角的预览按钮，开始调试我们刚刚配置的属性，如果是组件的首次预览，会有一段组件构建的过程（构建出 umd 包的过程），构建完成后就可以调试我们的配置了。
+
+
+
+#### 发布物料描述
+物料描述调试没问题后，就可以到项目中去使用了，使用前需要先发布物料描述
+
+- 点击右上角的发布按钮
+- 选择需要发布的组件
+- 点击确定发布完成
+
+
+## 资产包
+第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。
+
+#### 资产包构建
+有两种方式可以构建资产包：
+- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 [资产包管理](./partsassets)
+- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下：
+
+ - 选择需要构建的组件
+ - 点击构建资产包按钮
+ - 选择刚刚的物料描述配置
+ - 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了
+
+#### 资产包使用
+详情请参考 [资产包管理](./partsassets#使用资产包)
+
+## 联系我们
+
+
diff --git a/docs/docs/guide/expand/editor/pluginContextMenu.md b/docs/docs/guide/expand/editor/pluginContextMenu.md
new file mode 100644
index 0000000000..962c913e7e
--- /dev/null
+++ b/docs/docs/guide/expand/editor/pluginContextMenu.md
@@ -0,0 +1,82 @@
+---
+title: 插件扩展 - 编排扩展
+sidebar_position: 6
+---
+
+## 场景一：扩展选中节点操作项
+
+### 增加节点操作项
+
+
+选中节点后，在选中框的右上角有操作按钮，编排模块默认实现了查看组件直系父节点、复制节点和删除节点按钮外，还可以通过相关 API 来扩展更多操作，如下代码：
+
+```typescript
+import { plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
+import { Icon, Message } from '@alifd/next';
+
+const addHelloAction = (ctx: IPublicModelPluginContext) => {
+ return {
+ async init() {
+ ctx.material.addBuiltinComponentAction({
+ name: 'hello',
+ content: {
+ icon: demo
,
+ });
+ ctx.logger.log('打个日志');
+ },
+ destroy() {
+ console.log('我被销毁了~');
+ },
+ };
+};
+
+pluginA.pluginName = 'pluginA';
+
+plugins.register(pluginA, { key: 'test' });
+```
+
+> 如果您想了解抽取出来的插件如何封装成为一个 npm 包并提供给社区，可以参考[“低代码生态脚手架 & 调试机制”](./cli)章节。
+
+## 面板插件配置说明
+
+面板插件是作用于设计器的，主要是通过按钮、图标等展示在设计器的骨架中。设计器的骨架我们分为下面的几个区域，而我们的插件大多数都是作用于这几个区域的。
+
+
+
+
+
+### 展示区域 area
+
+#### topArea
+
+展示在设计器的顶部区域，常见的相关区域的插件主要是：、
+
+1. 注册设计器 Logo；
+2. 设计器操作回退和撤销按钮；
+3. 全局操作按钮，例如：保存、预览等；
+
+#### leftArea
+
+左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。
+
+该区域相关插件的主要有：
+
+1. 大纲树展示，展示该设计器设计页面的大纲。
+2. 组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。
+3. 数据源面板
+4. JS 等代码面板。
+
+可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。
+
+#### centerArea
+
+画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：
+
+1. 画布大小修改
+2. 物料选中扩展区域修改
+
+#### rightArea
+
+右侧区域，常用于组件的配置。常见的扩展有：统一处理组件的配置项，例如统一删除某一个配置项，统一添加某一个配置项的。
+
+#### toolbar
+
+跟 topArea 类似，按需放置面板插件~
+
+### 展示形式 type
+
+#### PanelDock
+
+PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。
+
+下图是组件库插件的展示效果。
+
+
+
+其中右上角可以进行固定，可以对弹出的宽度做设定
+
+接入可以参考代码
+
+```javascript
+import { skeleton } from '@alilc/lowcode-engine';
+
+skeleton.add({
+ area: 'leftArea', // 插件区域
+ type: 'PanelDock', // 插件类型，弹出面板
+ name: 'sourceEditor',
+ content: SourceEditor, // 插件组件实例
+ props: {
+ align: "left",
+ icon: "wenjian",
+ description: "JS 面板",
+ },
+ panelProps: {
+ floatable: true, // 是否可浮动
+ height: 300,
+ hideTitleBar: false,
+ maxHeight: 800,
+ maxWidth: 1200,
+ title: "JS 面板",
+ width: 600,
+ },
+});
+```
+
+#### Widget
+
+Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。
+
+
+
+接入可以参考代码：
+
+```javascript
+import { skeleton } from '@alilc/lowcode-engine';
+// 注册 logo 面板
+skeleton.add({
+ area: 'topArea',
+ type: 'Widget',
+ name: 'logo',
+ content: Logo, // Widget 组件实例
+ contentProps: { // Widget 插件 props
+ logo:
+ "https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png",
+ href: "/",
+ },
+ props: {
+ align: 'left',
+ width: 100,
+ },
+});
+```
+
+#### Dock
+
+一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。
+
+```javascript
+import { skeleton } from '@alilc/lowcode-engine';
+
+skeleton.add({
+ area: 'leftArea',
+ type: 'Dock',
+ name: 'opener',
+ props: {
+ icon: Icon, // Icon 组件实例
+ align: 'bottom',
+ onClick: function () {
+ // 打开外部链接
+ window.open('https://lowcode-engine.cn');
+ // 显示 widget
+ skeleton.showWidget('xxx');
+ }
+ }
+});
+```
+
+#### Panel
+
+一般不建议单独使用，通过 PanelDock 使用~
+
+## 实际案例
+
+### 页面管理面板
+
+- 仓库地址：[https://github.com/mark-ck/lowcode-portal](https://github.com/mark-ck/lowcode-portal)
+- 具体代码：[https://github.com/mark-ck/lowcode-portal/blob/master/src/plugins/pages-plugin/index.tsx](https://github.com/mark-ck/lowcode-portal/blob/master/src/plugins/pages-plugin/index.tsx)
+- 直播回放：
+ - [低代码引擎项目实战 (4)-自定义插件 - 页面管理](https://www.bilibili.com/video/BV17a411i73f/)
+ - [低代码引擎项目实战 (4)-自定义插件 - 页面管理 - 后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/)
+ - [低代码引擎项目实战 (4)-自定义插件 - 页面管理 - 前端](https://www.bilibili.com/video/BV1Yq4y1a74P/)
+ - [低代码引擎项目实战 (4)-自定义插件 - 页面管理 - 完结](https://www.bilibili.com/video/BV13Y4y1e7EV/)
+
+### 区块面板
+
+- 仓库地址：[https://github.com/alibaba/lowcode-plugins](https://github.com/alibaba/lowcode-plugins)
+- 具体代码：[https://github.com/alibaba/lowcode-plugins/tree/main/packages/plugin-block](https://github.com/alibaba/lowcode-plugins/tree/main/packages/plugin-block)
+- 直播回放：
+ - [低代码引擎项目实战 (9)-区块管理 (1)-保存为区块](https://www.bilibili.com/video/BV1YF411M7RK/)
+ - [低代码引擎项目实战 (10)-区块管理 - 区块面板](https://www.bilibili.com/video/BV1FB4y1S7tu/)
+ - [阿里巴巴低代码引擎项目实战 (11)-区块管理 - ICON 优化](https://www.bilibili.com/video/BV1zr4y1H7Km/)
+ - [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 自动截图](https://www.bilibili.com/video/BV1GZ4y117VH/)
+ - [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 样式优化](https://www.bilibili.com/video/BV1Pi4y1S7ZT/)
+ - [阿里低代码引擎项目实战 (12)-区块管理 (完结)-给引擎插件提个 PR](https://www.bilibili.com/video/BV1hB4y1277o/)
diff --git a/docs/docs/guide/expand/editor/setter.md b/docs/docs/guide/expand/editor/setter.md
new file mode 100644
index 0000000000..4f0e0219fc
--- /dev/null
+++ b/docs/docs/guide/expand/editor/setter.md
@@ -0,0 +1,241 @@
+---
+title: 设置器扩展
+sidebar_position: 7
+---
+## 设置器简述
+
+设置器主要用于低代码组件属性值的设置，顾名思义叫"设置器"，又称为 Setter。由于组件的属性有各种类型，需要有与之对应的设置器支持，每一个设置器对应一个值的类型。
+
+### 设计器展示位置
+
+设置器展示在编辑器的右边区域，如下图：
+
+
+
+其中包含四类设置器：
+
+- 属性：展示该物料常规的属性
+- 样式：展示该物料样式的属性
+- 事件：如果该物料有声明事件，则会出现事件面板，用于绑定事件。
+- 高级：两个逻辑相关的属性，**条件渲染**和**循环**
+
+### 设置器类型
+
+上述区域中是有多项设置器的，对于一个组件来说，每一项配置都对应一个设置器，比如我们的配置是一个文本，我们需要的是文本设置器，我们需要配置的是数字，我们需要的就是数字设置器。
+下图中的标题和按钮类型配置就分别是文本设置器和下拉框设置器。
+
+
+
+我们提供了常用的设置器作为内置设置器，也提供了定制能力帮助大家开发特定需求的设置器。
+
+## 为物料配置设置器
+
+我们提供了[常用的设置器](/site/docs/guide/appendix/setters)作为内置设置器。
+
+我们可以将目标组件的属性值类型值配置到物料资源配置文件中：
+
+```json
+{
+ "componentName": "Message",
+ "title": "Message",
+ "configure": {
+ "props": [
+ {
+ "name": "type",
+ "setter": "InputSetter"
+ }
+ ]
+ }
+}
+```
+
+props 字段是入料模块扫描自动填入的类型，用户可以通过 configure 节点进行配置通过 override 节点对属性的声明重新定义，setter 就是注册在引擎中的 setter。
+
+为物料配置引擎内置的 setter 时，均可以使用对应 setter 的高级功能，对应功能参考“全部内置设置器”章节下的对应 setter 文章。
+
+### 对高级功能的配置如下：
+
+例如我们需要在 NumberSetter 中配置 units 属性，可以在 asset.json 中声明。
+
+```json
+"configure": {
+ "component": {
+ "isContainer": true,
+ "nestingRule": {
+ "parentWhitelist": [
+ "NextP"
+ ]
+ }
+ },
+ "props": [
+ {
+ "name": "width",
+ "title": "宽度",
+ "initialValue": "auto",
+ "defaultValue": "auto",
+ "condition": {
+ "type": "JSFunction",
+ "value": "() => false"
+ },
+ "setter": {
+ "componentName": "NumberSetter",
+ "props": {
+ "units": [
+ {
+ "type": "px",
+ "list": true
+ },
+ {
+ "type": "%",
+ "list": true
+ }
+ ]
+ }
+ }
+ },
+ ],
+ "supports": {
+ "style": true
+ }
+},
+```
+
+## 自定义设置器
+### 编写 AltStringSetter
+
+我们编写一个简单的 Setter，它的功能如下：
+
+
+
+**代码如下：**
+```tsx
+import * as React from "react";
+import { Input } from "@alifd/next";
+import "./index.scss";
+
+interface AltStringSetterProps {
+ // 当前值
+ value: string;
+ // 默认值
+ defaultValue: string;
+ // setter 唯一输出
+ onChange: (val: string) => void;
+ // AltStringSetter 特殊配置
+ placeholder: string;
+}
+
+export default class AltStringSetter extends React.PureComponent
+
+ );
+};
+
+ReactDOM.render(
+
+ );
+ }
+}
+```
+
+## API
+
+| 参数 | 说明 | 类型 | 必选 |
+| --- | --- | --- | --- |
+| schema | 符合[搭建协议](https://lowcode-engine.cn/lowcode)的数据 | Object | 是 |
+| components | 组件依赖的实例 | Object | 是 |
+| componentsMap | 组件的配置信息 | Object | 否 |
+| appHelper | 渲染模块全局上下文 | Object | 否 |
+| designMode | 设计模式，可选值：extend、border、preview | String | 否 |
+| suspended | 是否挂起 | Boolean | 否 |
+| onCompGetRef | 组件 ref 回调（schema, ref）=> {} | Function | 否 |
+| onCompGetCtx | 组件 ctx 更新回调 (schema, ctx) => {} | Function | 否 |
+| rendererName | 渲染类型，标识当前模块是以什么类型进行渲染的 | string | 否 |
+| customCreateElement | 自定义创建 element 的钩子
+(Component, props, children) => {} | Function | 否 |
+| notFoundComponent | 当组件找不到时，可以通过这个参数自定义展示文案。 | Component | 否 |
+| thisRequiredInJSE | 为 true 的情况下 JSExpression 仅支持通过 this 来访问。假如需要兼容原来的 'state.xxx'，则设置为 false，推荐使用 true。 | Boolean | 否 |
+| locale | 国际化语言类型 | string | 否 |
+| messages | 国际化语言对象 | Object | 否 |
+
+
+### schema
+
+搭建基础协议数据，渲染模块将基于 schema 中的内容进行实时渲染。
+
+### messages
+国际化内容，需要配合 locale 使用
+messages 格式示例：
+```typescript
+{
+ 'zh-CN': {
+ 'hello-world': '你好，世界！',
+ },
+ 'en-US': {
+ 'hello-world': 'Hello world!',
+ },
+}
+```
+
+### locale
+当前语言类型
+示例：'zh-CN' | 'en-US'
+
+### components
+
+渲染模块渲染页面需要用到的组件依赖的实例，`components` 对象中的 Key 需要和搭建 schema 中的`componentName` 字段对应。
+
+### componentsMap
+
+> 在生产环境下不需要设置。
+
+
+配置规范参见[《低代码引擎搭建协议规范》](https://lowcode-engine.cn/lowcode)，主要在搭建场景中使用，用于提升用户搭建体验。
+
+- 属性配置校验：用户可以配置组件特定属性的 `propTypes`，在搭建场景中用户输入的属性值不满足 `propType` 配置时，渲染模块会将当前属性设置为 `undefined`，避免组件抛错导致编辑器崩溃；
+- `isContainer` 标记：当组件被设置为容器组件且当前容器组件内没有其他组件时，用户可以通过拖拽方式将组件直接添加到容器组件内部；
+- `parentRule` 校验：当用户使用的组件未出现在组件配置的 `parentRule` 组件内部时，渲染模块会使用 `visualDom` 组件进行占位，避免组件抛错的同时在下钻编辑场景也能够不阻塞用户配置，典型的场景如`Step.Item`、`Table.Column`、`Tab.Item` 等等。
+
+### appHelper
+
+appHelper 主要用于设置渲染模块的全局上下文，目前 appHelper 支持设置以下上下文：
+
+- `utils`：全局公共函数
+- `constants`：全局常量
+- `location`：react-router 的 `location` 实例
+- `history`：react-router 的 `history` 实例
+
+设置了 appHelper 以后，上下文会直接挂载到容器组件的 this 上，用户可以在搭建协议中的 function 及变量表达式场景使用上下文，具体使用方式如下所示：
+**schema：**
+
+```javascript
+export default {
+ "componentName": "Page",
+ "fileName": "test",
+ "props": {},
+ "children": [{
+ "componentName": "Div",
+ "props": {},
+ "children": [{
+ "componentName": "Text",
+ "props": {
+ "text": {
+ "type": "JSExpression",
+ "value": "this.location.pathname"
+ }
+ }
+ }, {
+ "componentName": "Button",
+ "props": {
+ "type": "primary",
+ "style": {
+ "marginLeft": 10
+ },
+ "onClick": {
+ "type": "JSExpression",
+ "value": "function onClick(e) { this.utils.xxx(this.constants.yyy);}"
+ }
+ },
+ "children": "click me"
+ }]
+ }]
+}
+```
+
+```typescript
+import ReactRenderer from '@alilc/lowcode-react-renderer';
+import ReactDOM from 'react-dom';
+import { Button } from '@alifd/next';
+import schema from './schema'
+
+const components = {
+ Button,
+};
+
+ReactDOM.render((
+ **对于 Window 环境来说，之后所有需要执行命令的操作都是在 WSL 终端执行的。** + +### Node + +node 版本推荐 16.18.0。 + +#### 查看 Node 版本 + + + +#### 通过 n 来管理 node 版本 + +可以安装 [n](https://www.npmjs.com/package/n) 来管理和变更 node 版本。 + +##### 安装 n + +```bash +npm install -g n +``` + +##### 变更 node 版本 + +```bash +n 14.17.0 +``` + +### React + +低代码引擎的扩展能力都是基于 React 来研发的，在继续阅读之前最好有一定的 React 基础，React 学习教程 ➡️ [React 快速开始教程](https://zh-hans.reactjs.org/docs/getting-started.html)。 + +### 下载 Demo + +可以前往 github（
这是一个 Demo 面板
,
+ });
+
+ ctx.logger.log('打个日志');
+ },
+ };
+};
+
+// 插件名，注册环境下唯一
+LowcodePluginPluginDemo.pluginName = 'LowcodePluginPluginDemo';
+LowcodePluginPluginDemo.meta = {
+ // 依赖的插件（插件名数组）
+ dependencies: [],
+ engines: {
+ lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行
+ },
+};
+
+export default LowcodePluginPluginDemo;
+```
+
+在 src/index.ts 中新增下面代码
+
+
+
+这样在我们的设计器中就新增了一个 Demo 面板。
+
+
+
+### 方式 2：在新的仓库下开发插件
+
+初始化
+
+```bash
+npm init @alilc/element your-plugin-name
+```
+
+选择设计器插件（plugin）
+
+
+
+根据操作完善信息
+
+
+
+插件项目就初始化完成了
+
+
+
+在插件项目下安装依赖
+
+```bash
+npm install
+```
+
+启动项目
+
+```bash
+npm run start
+```
+
+调试项目
+
+
+
+在 Demo 中调试项目
+
+在 build.json 下面新增 "inject": true，就可以在 [https://lowcode-engine.cn/demo/demo-general/index.html?debug](https://lowcode-engine.cn/demo/demo-general/index.html?debug) 页面下进行调试了。
+
+
+
+## 开发一个自定义物料
+
+### 初始化物料
+
+```bash
+npm init @alilc/element your-material-demo
+```
+
+选择组件/物料栏
+
+
+
+配置其他信息
+
+
+
+这样我们就初始化好了一个 React 物料。
+
+
+
+### 启动并调试物料
+
+#### 安装依赖
+
+```bash
+npm i
+```
+
+#### 启动
+
+```bash
+npm run lowcode:dev
+```
+
+我们就可以通过 [http://localhost:3333/](http://localhost:3333/) 看到我们的研发的物料了。
+
+
+
+#### 在 Demo 中调试
+
+```bash
+npm i @alilc/build-plugin-alt
+```
+
+修改 build.lowcode.js
+
+
+
+如图，新增如下代码
+
+```javascript
+[
+ '@alilc/build-plugin-alt',
+ {
+ type: 'component',
+ inject: true,
+ library,
+ // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
+ // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
+ openUrl: 'https://lowcode-engine.cn/demo/index.html?debug',
+ },
+],
+```
+
+我们重新启动项目，就可以在 Demo 中找到我们的自定义组件。
+
+
+
+### 发布
+
+首先进行构建
+
+```bash
+npm run lowcode:build
+```
+
+发布组件
+
+```bash
+npm publish
+```
+
+这里我发布的组件是 [my-material-demo](https://www.npmjs.com/package/my-material-demo)。在发布之后我们就会有两个重要的文件：
+
+- 低代码描述：[https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js)
+- 组件代码：[https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js)
+
+我们也可以从 [https://unpkg.com/my-material-demo@0.1.0/build/lowcode/assets-prod.json](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/assets-prod.json) 找到我们的资产包描述。
+
+```bash
+{
+ "packages": [
+ {
+ "package": "my-material-demo",
+ "version": "0.1.0",
+ "library": "BizComp",
+ "urls": [
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js",
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.css"
+ ],
+ "editUrls": [
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/view.js",
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/view.css"
+ ],
+ "advancedUrls": {
+ "default": [
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js",
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.css"
+ ]
+ },
+ "advancedEditUrls": {}
+ }
+ ],
+ "components": [
+ {
+ "exportName": "MyMaterialDemoMeta",
+ "npm": {
+ "package": "my-material-demo",
+ "version": "0.1.0"
+ },
+ "url": "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js",
+ "urls": {
+ "default": "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js"
+ },
+ "advancedUrls": {
+ "default": [
+ "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js"
+ ]
+ }
+ }
+ ],
+}
+```
+
+### 使用
+
+我们将刚刚发布的组件的 assets-prod.json 的内容放到 demo 的 src/universal/assets.json 中。
+
+> 最好放到最后，防止因为资源加载顺序问题导致出现报错。
+
+如图，新增 packages 配置
+
+
+如图，新增 components 配置
+
+
+
+这时候再启动 DEMO 项目，就会有新的低代码物料了。接下来就按照你们的需求，继续扩展物料吧。
+
+## 总结
+
+这里只是简单的介绍了一些低代码引擎的基础能力，带大家简单的对低代码 DEMO 进行扩展，定制一些新的功能。低代码引擎的能力还有很多很多，可以继续去探索更多的功能。
diff --git a/docs/code-specification.md b/docs/docs/participate/code-specification.md
similarity index 90%
rename from docs/code-specification.md
rename to docs/docs/participate/code-specification.md
index 0a7c9f5556..d6b387e305 100644
--- a/docs/code-specification.md
+++ b/docs/docs/participate/code-specification.md
@@ -1,3 +1,8 @@
+---
+title: 编码规约
+sidebar_position: 5
+---
+
编码规约
---
@@ -22,7 +27,7 @@
- 不要在全局命名空间内定义类型/值
- 共享的类型应该在 `types.ts` 里定义
- 在一个文件里，类型定义应该出现在顶部
- - interface 和 type 很类似，原则上能用 interface 实现，就用 interface , 如果不能才用 type
+ - interface 和 type 很类似，原则上能用 interface 实现，就用 interface , 如果不能才用 type
### 注释
diff --git a/docs/docs/participate/flow.md b/docs/docs/participate/flow.md
new file mode 100644
index 0000000000..b8b804e123
--- /dev/null
+++ b/docs/docs/participate/flow.md
@@ -0,0 +1,187 @@
+---
+title: 研发协作流程
+sidebar_position: 2
+---
+## 代码风格
+引擎项目配置了 eslint 和 stylelint，在每次 git commit 前都会检查代码风格，假如有报错，请修改后再提交。（**严禁 -n 提交，-n 也逃脱不了 github workflow 的 lint 检查，放弃吧，骚年~**）
+
+## 测试机制
+每次提交代码前，务必本地跑一次单元测试，通过后再提交 MR。
+
+假如涉及新的功能，需要**补充相应的单元测试**，目前引擎核心模块的单测覆盖率都在 80%+，假如降低了覆盖率，将会不予以通过。
+
+跑单测流程：
+
+1. 项目根目录下执行 npm run build
+2. 只改了一个包，比如 designer，则在 designer 目录下，执行 npm test
+3. （or）改了多个包，则在根目录下执行 npm test
+## commit 风格
+几点要求：
+
+1. commit message 格式遵循 [ConvensionalCommits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
+
+ 
+2. 请按照一个 bugfix / feature 对应一个 commit，假如不是，请 rebase 后再提交 MR，不要一堆无用的、试验性的 commit。
+
+好处：从引擎的整体 commit 历史来看，会很清晰，**每个 commit 完成一件确定的事，changelog 也能自动生成**。另外，假如因为某个 commit 导致了 bug，也很容易通过 rebase drop 等方式快速修复。
+
+## 分支用途
+
+- main 分支，最稳定的分支，跟 npm latest 包的内容保持一致
+- develop 分支，开发分支，拥有最新的、已经验证过的 feature / bugfix，Pull Request 的**目标合入分支**
+- release 分支
+ - 正式发布分支，命名规则为 release/x.y.z，一般从 develop 拉出来进行发布，x.y.z 为待发布的版本号
+ - beta 发布分支，命名规则为 release/x.y.z-beta(\.\d+)?，可以快速验证修改，发布 npm beta 版本。
+
+验证通过后，因为 beta 发布分支上会存在无用的 commit（比如 lerna 修改 package.json 这种），所以不直接 PR 到 develop，而是从 develop 拉分支，从 beta 发布分支 cherry pick 有用的 commit 到新分支，然后 PR 到 develop。
+
+## 引擎发布机制
+
+日常迭代先从 develop 拉分支，然后自测、单测通过后，提交 PR 到 develop 分支，由发布负责人基于 develop 拉 release/1.0.z 分支~
+
+### 版本规划
+
+> 此处是理想节奏，实际情况可能会有调整
+
+- 日常迭代 2 周，一般月中或月底，发版日两天前发最后一个 beta 版本，原则上不接受新 pr，灰度 2 天后，发正式版。
+- 特殊情况紧急迭代随时发
+- 大 Feature 迭代，每年 2 - 4 次
+
+
+### 发布步骤
+> **发布需要权限，如果提 PR 之后着急发布可以**[**加入贡献者交流群**](../participate/#核心贡献者交流)**。**
+
+#### 发正式版
+步骤如下（以发布 1.0.0 版本为例）：
+
+1. git checkout develop
+ ```bash
+ git checkout develop
+ ```
+2. 创建 release 分支
+ ```bash
+ git checkout -b release/1.0.0
+ ```
+3. build
+ ```bash
+ npm run build
+ ```
+4. 发布到 npm
+ ```bash
+ npm run pub
+ ```
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN（此步骤将发布在 npm 源的包同步到阿里内网源，因为 alifd cdn 将依赖内网 npm 源）
+ ```bash
+ tnpm run sync
+ tnpm run syncOss
+ ```
+6. 更新[发布日志](https://github.com/alibaba/lowcode-engine/releases)
+7. 合并 release/x.x.x 到 main 分支
+8. 合并 main 分支到 develop 分支
+
+如果是发布 beta 版本，步骤如下（以发布 1.0.1 版本为例）：
+
+#### 发某 y 位版本首个 beta，如 1.1.0-beta.0
+1. 拉 develop 分支
+ ```bash
+ git checkout develop
+ ```
+ 更新到最新（如需）
+ ```bash
+ git pull
+ ```
+2. 拉 release 分支，此处以 1.1.0 版本做示例
+ ```bash
+ git checkout -b release/1.1.0-beta
+ git push --set-upstream origin release/1.1.0-beta
+ ```
+3. build
+ ```bash
+ npm run build
+ ```
+4. 发布，此处需有 @alilc scope 发包权限
+ ```bash
+ npm run pub:preminor
+ ```
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
+ ```bash
+ tnpm run sync
+ tnpm run syncOss
+ ```
+
+#### 发某 z 位版本首个 beta，如 1.0.1-beta.0
+1. 拉 develop 分支
+ ```bash
+ git checkout develop
+ ```
+ 更新到最新（如需）
+ ```bash
+ git pull
+ ```
+2. 拉 release 分支，此处以 1.0.1 版本做示例
+ ```bash
+ git checkout -b release/1.0.1-beta
+ git push --set-upstream origin release/1.0.1-beta
+ ```
+3. build
+ ```bash
+ npm run build
+ ```
+4. 发布，此处需有 @alilc scope 发包权限
+ ```bash
+ npm run pub:prepatch
+ ```
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
+ ```bash
+ tnpm run sync
+ tnpm run syncOss
+ ```
+
+#### 发某版本非首个 beta，如 1.0.1-beta.0 -> 1.0.1-beta.1
+1. 切换到 release 分支
+ ```bash
+ git checkout release/1.0.1-beta
+ ```
+2. 更新到 develop 分支最新代码
+ ```bash
+ git rebase origin/develop
+ ```
+3. build
+ ```bash
+ npm run build
+ ```
+4. 发布，此处需有 @alilc scope 发包权限 ***此处命令与发首个 beta 时有变化***
+ ```bash
+ npm run pub:prerelease
+ ```
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
+ ```bash
+ tnpm run sync
+ tnpm run syncOss
+ ```
+
+
+
+## DEMO 发布机制
+1. **修改版本号**
+ 手动修改 package.json 的版本号
+2. **build**
+ ```bash
+ npm run build
+ ```
+3. publish（此步骤需要 npm 发包权限）
+ ```bash
+ npm run pub
+ ```
+ 如发 beta 版
+ ```bash
+ npm publish --tag beta
+ ```
+4. 同步到 tnpm 源 & alifd CDN & uipaas CDN
+ ```bash
+ tnpm run sync
+ tnpm run syncOss
+ ```
+
+**官网生效**
+需要在通过阿里内部系统更新 demo 版本
diff --git a/docs/docs/participate/index.md b/docs/docs/participate/index.md
new file mode 100644
index 0000000000..e09f2ddad2
--- /dev/null
+++ b/docs/docs/participate/index.md
@@ -0,0 +1,118 @@
+---
+title: 参与贡献
+sidebar_position: 0
+---
+
+### 环境准备
+
+开发 LowcodeEngine 需要 Node.js 16+。
+
+推荐使用 nvm 管理 Node.js，避免权限问题的同时，还能够随时切换当前使用的 Node.js 的版本。
+
+### 贡献低代码引擎
+
+#### clone 项目
+
+```
+git clone git@github.com:alibaba/lowcode-engine.git
+cd lowcode-engine
+```
+
+#### 安装依赖并构建
+
+```
+npm install && npm run setup
+```
+
+#### 调试环境配置
+
+本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目，可以使用趁手的代理工具，这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。
+
+本地开发代理规则如下：
+```json
+{
+ "proxy": [
+ [
+ "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js",
+ "http://localhost:5555/js/AliLowCodeEngine.js"
+ ],
+ [
+ "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css",
+ "http://localhost:5555/css/AliLowCodeEngine.css"
+ ],
+ [
+ "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
+ "http://localhost:5555/js/ReactSimulatorRenderer.js"
+ ],
+ [
+ "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
+ "http://localhost:5555/css/ReactSimulatorRenderer.css"
+ ]
+ ]
+}
+```
+
+#### 开发
+
+```
+npm start
+```
+
+选择一个环境进行调试，例如[低代码引擎在线 DEMO](https://lowcode-engine.cn/demo/demo-general/index.html)
+
+开启代理之后，就可以进行开发调试了。
+
+
+### 贡献低代码引擎文档
+
+#### 开发文档
+
+在 lowcode-engine 目录下执行下面命令
+```
+cd docs
+
+npm start
+```
+
+#### 维护方式
+- 官方文档通过 github 管理文档源，官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。
+- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。
+- 欢迎 PR，文档 PR 也会作为贡献者贡献，会用于贡献度统计。
+- **文档同步到官方网站由官方人员进行操作**，如有需要可以通过 issue 或 贡献者群与相关人员沟通。
+- 为了提供更好的阅读和使用体验，文档中的图片文件会定期转换成可信的 CDN 地址。
+
+#### 文档格式
+
+本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。
+
+使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。
+
+
+### 贡献低代码引擎生态
+
+相关源码详见[NPM 包对应源码位置汇总](/site/docs/guide/appendix/npms)
+
+开发调试方式详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli)
+
+### 发布
+
+PR 被合并之后，我们会尽快发布相关的正式版本或者 beta 版本。
+
+### 加入 Contributor 群
+提交过 Bugfix 或 Feature 类 PR 的同学，如果有兴趣一起参与维护 LowcodeEngine，我们提供了一个核心贡献者交流群。
+
+1. 可以通过[填写问卷](https://survey.taobao.com/apps/zhiliao/4YEtu9gHF)的方式，参与到其中。
+2. 填写问卷后加微信号 `wxidvlalalalal` （注明 github id）我们会拉你到群里。
+
+如果你不知道可以贡献什么，可以到源码里搜 TODO 或 FIXME 找找。
+
+为了使你能够快速上手和熟悉贡献流程，我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22)，里面有相对没那么笼统的漏洞，从这开始是个不错的选择。
+
+### PR 提交注意事项
+
+- lowcode-engine 仓库建议从 develop 创建分支，PR 指向 develop 分支。
+- 其他仓库从 main 分支创建分支，PR 指向 main 分支
+- 如果你修复了 bug 或者添加了代码，而这些内容需要测试，请添加测试！
+- 确保通过测试套件（yarn test）。
+- 请签订贡献者许可证协议（Contributor License Agreement）。
+ > 如已签署 CLA 仍被提示需要签署，[解决办法](/site/docs/faq/faq021)
\ No newline at end of file
diff --git a/docs/docs/participate/meet.md b/docs/docs/participate/meet.md
new file mode 100644
index 0000000000..23226bf1cd
--- /dev/null
+++ b/docs/docs/participate/meet.md
@@ -0,0 +1,55 @@
+---
+title: 开源社区例会
+sidebar_position: 0
+---
+
+## **简介**
+
+低代码引擎开源社区致力于共同推动低代码技术的发展和创新。本社区汇集了低代码技术领域的开发者、技术专家和行业观察者，通过定期的例会来交流思想、分享经验、讨论新技术，并探索低代码技术的未来发展方向。
+
+## 参与要求
+
+为了确保例会的质量和效果，我们建议以下人员参加：
+
+- **已参与低代码引擎贡献的成员**：那些对低代码引擎有实际贡献的社区成员。
+- **参考贡献指南**：可查阅[贡献指南](https://lowcode-engine.cn/site/docs/participate/)获取更多信息。
+- **提供过优秀建议的成员**：那些在过去为低代码引擎提供过有价值建议的成员。
+
+## **时间周期**
+
+- **周期性**：月例会
+
+### **特别说明**
+
+- 例会周期可根据成员反馈进行调整。如果讨论的议题较多，可增加例会频率；若议题较少，单次例会可能取消。若多次取消，可能会暂停例会。
+
+## **例会流程**
+
+### **准备阶段**
+
+- **定期确定议题**：会前一周确定下一次会议的议题。
+- **分发会议通知**：提前发送会议时间、议程和参与方式。
+
+### **会议阶段**
+
+- **开场和介绍**：简短开场和自我介绍，特别是新成员加入时。
+- **议题讨论**：按照议程进行议题讨论，每个议题分配一定时间，并留足够时间供讨论和提问。
+- **记录要点和决定**：记录讨论要点、决策和任何行动事项。
+
+### **后续阶段**
+
+- **分享会议纪要**：会后将会议纪要和行动计划分发给所有成员。
+- **执行和跟进**：根据会议中的讨论和决策执行相关任务，并在下次会议中进行跟进汇报。
+
+## **开源例会议题**
+
+开源例会议题包括但不限于：
+
+- **共建低代码行业发展**：探讨通过开源社区合作加速低代码行业发展。
+- **改进建议和反馈收集**：讨论社区成员对低代码引擎的使用体验和改进建议。
+- **前端技术与低代码的结合**：针对前端开发者，讨论将前端技术与低代码引擎结合的方式。
+- **低代码业务场景和经验分享**：邀请社区成员分享低代码引擎的实际应用经验。
+- **低代码技术原理介绍**：深入理解低代码引擎的技术原理和实现方式。
+- **低代码引擎的最新进展**：分享低代码引擎的最新进展，包括新版本发布和新功能实现等。
+- **低代码技术的未来展望**：讨论低代码技术的未来发展方向。
+- **最新低代码平台功能和趋势分析**：分享和讨论当前低代码平台的新功能、趋势和发展方向。
\ No newline at end of file
diff --git a/docs/docs/specs/assets-spec.md b/docs/docs/specs/assets-spec.md
new file mode 100644
index 0000000000..5a91b8dde3
--- /dev/null
+++ b/docs/docs/specs/assets-spec.md
@@ -0,0 +1,689 @@
+---
+title: 《低代码引擎资产包协议规范》
+sidebar_position: 2
+---
+## 1 介绍
+
+### 1.1 本协议规范涉及的问题域
+
+- 定义本协议版本号规范
+- 定义本协议中每个子规范需要被支持的 Level
+- 定义本协议相关的领域名词
+- 定义低代码资产包协议版本号规范（A）
+- 定义低代码资产包协议组件及依赖资源描述规范（A）
+- 定义低代码资产包协议组件描述资源加载规范（A）
+- 定义低代码资产包协议组件在面板展示规范（AA）
+
+### 1.2 协议草案起草人
+
+- 撰写：金禅、璿玑、彼洋
+- 审阅：力皓、絮黎、光弘、戊子、潕量、游鹿
+
+### 1.3 版本号
+
+1.1.0
+
+### 1.4 协议版本号规范（A）
+
+本协议采用语义版本号，版本号格式为 `major.minor.patch` 的形式。
+
+- major 是大版本号：用于发布不向下兼容的协议格式修改
+- minor 是小版本号：用于发布向下兼容的协议功能新增
+- patch 是补丁号：用于发布向下兼容的协议问题修正
+
+### 1.5 协议中子规范 Level 定义
+
+| 规范等级 | 实现要求 |
+| -------- | ------------------------------------------------------------ |
+| A | 基础规范，低代码引擎核心层支持； |
+| AA | 推荐规范，由低代码引擎官方插件、setter 支持。 |
+| AAA | 参考规范，需由基于引擎的上层搭建平台支持，实现可参考该规范。 |
+
+### 1.6 名词术语
+
+- **资产包**: 低代码引擎加载资源的动态数据集合，主要包含组件及其依赖的资源、组件低代码描述、动态插件/设置器资源等。
+
+### 1.7 背景
+
+根据低代码引擎的实现，一个组件要在引擎上渲染和配置，需要提供组件的 umd 资源以及组件的`低代码描述`，并且组件通常都是以集合的形式被引擎消费的；除了组件之外，还有组件的依赖资源、引擎的动态插件/设置器等资源也需要注册到引擎中；因此我们定义了“低代码资产包”这个数据结构，来描述引擎所需加载的动态资源的集合。
+
+### 1.8 受众
+
+本协议适用于使用“低代码引擎”构建搭建平台的开发者，通过本协议的定义来进行资源的分类和加载。阅读及使用本协议，需要对低代码搭建平台的交互和实现有一定的了解，对前端开发相关技术栈的熟悉也会有帮助，协议中对通用的前端相关术语不会做进一步的解释说明。
+
+## 2 协议结构
+
+协议最顶层结构如下，包含 7 方面的描述内容：
+
+- version { String } 当前协议版本号
+- packages { Array } 低代码编辑器中加载的资源列表
+- components { Array } 所有组件的描述协议列表
+- sort { Object } 用于描述组件面板中的 tab 和 category
+- plugins { Array } 设计器插件描述协议列表
+- setters { Array } 设计器中设置器描述协议列表
+- extConfig { Object } 平台自定义扩展字段
+
+### 2.1 version (A)
+
+定义当前协议 schema 的版本号；
+
+| 根属性名称 | 类型 | 说明 | 变量支持 | 默认值 |
+| ---------- | ------ | ---------- | -------- | ------ |
+| version | String | 协议版本号 | - | 1.1.0 |
+
+### 2.2 packages (A)
+
+定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
+
+| 字段 | 字段描述 | 字段类型 | 规范等级 | 备注 |
+| -------------------- | --------------------------------------------------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| packages[].id? | 资源唯一标识 | String | A | 资源唯一标识，如果为空，则以 package 为唯一标识 |
+| packages[].title? | 资源标题 | String | A | 资源标题 |
+| packages[].package | npm 包名 | String | A | 组件资源唯一标识 |
+| packages[].version | npm 包版本号 | String | A | 组件资源版本号 |
+| packages[].type | 资源包类型 | String | AA | 取值为: proCode（源码）、lowCode（低代码，默认为 proCode |
+| packages[].schema | 低代码组件 schema 内容 | object | AA | 取值为: proCode（源码）、lowCode（低代码） |
+| packages[].deps | 当前资源包的依赖资源的唯一标识列表 | Array
+
+
, mountNode);
+```
+
+```css
+.test {
+ background: #CCC;
+}
+```
+~~~
+
+#### 2.1.2 API 规范（A)
+
+API 是组件的属性解释，给开发者作为组件属性配置的参考。为了保持 API 的一致性，我们制定这个 API 命名规范。对于业界通用的，约定俗成的命名，我们遵循社区的约定。对于业界有多种规则难以确定的，我们确定其中一种，大家共同遵守。
+
+##### 通用规则
+
+- 所有的 API 采用小驼峰的书写规则，如 `onChange`、`direction`、`defaultVisible`。
+- 标签名采用大驼峰书写规则，如 `Menu`、`Slider`、`DatePicker`。
+
+##### 通用命名
+
+| API 名称 | 类型 | 描述 | 常见变量 |
+| :------------- | :------------- | :----------------------------------------------------------- | :---------------------------------------------------- |
+| shape | string | 形状，从组件的外形来看有区别的时候，使用 shape | |
+| direction | enum | 方向，取值采用缩写的方式。 | hoz（水平）, ver（垂直） |
+| align | enum | 对齐方式 | tl, tc, tr, cl, cc, cr, bl, bc, br |
+| status | enum | 状态 | normal, success, error, warning |
+| size | enum | 大小 | small, medium, large 更大或更小可用 (xxs, xs, xl, xxl) |
+| type | enum or string | 分类:1. dom 结构不变、只有皮肤的变化 2.组件类型只有并列的几类 | normal, primary, secondary |
+| visible | boolean | 是否显示 | |
+| defaultVisible | boolean | 是否显示（非受控） | |
+| disabled | boolean | 禁用组件 | |
+| closable | bool/string | 允许关闭的方式 | |
+| htmlType | string | 当原生组件与 Fusion 组件的 type 产生冲突时，原生组件使用 `htmlType` | |
+| link | string | 链接 | |
+| dataSource | array | 列表数据源 | [{label, value}, {label, value}] |
+| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |
+
+
+##### 多选枚举
+
+当某个 API 的接口，允许用户指定多个枚举值的时候，我们把这个接口定义为多选枚举。一个很典型的例子是某个弹层组件的 `closable` 属性，我们会允许：键盘 esc 按键、点击 mask、点击 close 按钮、点击组件以外的任何区域进行关闭。
+
+不要有一个 API 值，支持多种类型。例如某个弹层的组件，我们会允许 esc、点击 mask、点击 close 按钮等进行关闭。此时 API 设计可以通过多个 API 承载，例如：
+
+```js
+closable?: boolean; // 默认为 true
+closeMode?: CM[] | string; // 默认值是 ['close', 'mask', 'esc']
+```
+
+true 表示触发规则都会关闭，false 表示触发规则不会关闭。
+
+示例：
+
+- ``，所有合法条件都会关闭
+- ``，任何情况下都不关闭，只能通过受控设置 visible
+- ``，用户按 esc 或者点击关闭按钮会关闭
+
+##### 事件
+
+- 标准事件或者自定义的符合 w3c 标准的事件，命名必须 on 开头， 即 `on` + 事件名，如 onExpand。
+
+##### 表单规范
+
+- 支持[受控模式](https://reactjs.org/docs/forms.html#controlled-components)(value + onChange) （A)
+ - value 控制组件数据展现
+ - onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)
+- `value={undefined}`的时候清空数据，field 的 reset 函数会给所有组件下发 undefined 数据 (AA))
+- 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart` (AA)
+
+##### 属性的传递
+**1. 原子组件（Atomic Component）**
+> 最小粒子，不能再拆分的组件
+
+举例：Input/Button/NumberPicker
+
+期望使用起来像普通的 html 标签一样，能够把用户传入的参数，透传到真正的节点上。
+
+```jsx
+
+```
+
+渲染后的 dom 结构：
+
+```jsx
+
+```
+
+**2. 复合组件（Composite component）**
+
+复合组件一般由两个及以上的原子组件/复合组件构成，比如：Select 由 Inupt + 弹窗组成，Search 由 Select + Button 组成，TreeSelect 由 Tree + Select 组成。
+
+为了提高组件使用的便利性，对 API 属性的要求如下：
+1. 复合组件核心的原子组件（比如 Search 的核心原子组件是 Input）的属性以及使用频率高的属性建议扁平化，让复合组件可以直接使用其属性；
+2. 复合组件内的非核心原子组件，则通过 `xxxProps` （如 inputProps/btnProps）的方式，将参数传递到相应原子组件上。
+
+
+**属性扁平化例子**：
+
+比如 `Search` 组件由 `Input` 和 `Button` 构成，但是 `Search` 更像是 `Input` ，因此把 `Input` 作为主要组件，将属性扁平化。即在 `Search` 组件上直接使用一些 `Input` 的属性。 `