From ad9c8d73b2bf7ac33352c168afa5aebaf5d34b94 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <2698393+2betop@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:55:00 +0800
Subject: [PATCH] Mege Feat-X Into Master (#11252)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Editor 支持插件弹出面板 (#11055)

* feat: Editor 支持插件弹出面板 (#11059)

* chore: 暴露 RendererThumb

* feat: resultBox item项支持点击事件 (#11060)

* feat: resultBox item项支持点击事件

* feat: resultBox item项支持点击事件

* feat: resultBox item项点击事件增加testid

* feat: resultBox item项点击事件更新jest快照

---------

Co-authored-by: hezhihang <hezhihang@baidu.com>

* chore: 调整 Page 渲染器导出方便外部覆盖

* chore: ConfirmBox 支持配置 onEntered 和 onExit 事件

* chore: checkboxes radios 选项 children 必须是数组且有长度才切到分组展示

* feat: 折叠面板，无标题时显示折叠箭头。组件存在于表单中，面板新增切换展示方式按钮 (#11067)

* feat: 折叠面板，无标题时显示折叠箭头。组件存在于表单中，面板新增切换展示方式按钮

* feat: 调整面板组件默认值

* feat: 调整无标题时，折叠箭头样式。调整面板配置

* 更新jest快照

* feat: page侧栏支持左右位置 (#11090)

Co-authored-by: hezhihang <hezhihang@baidu.com>

* chore: checkboxes radios 选项 children 必须是数组且有长度才切到分组展示

* feat: AvailableRenderersPanel 支持外围扩展

* feat: AvailableRenderersPanel 支持外围扩展

* feat: editor 插件 scaffoldForm 支持异步获取

* chore: add cross-env

* chore: 避免 Table 数据更新死循环

* chore: 调整 ts 定义

* feat: 给配置面板加些标记方便外围扩充

* chore: checkboxes radios 选项 children 必须是数组且有长度才切到分组展示

* chore: Options 相关逻辑支持外部扩展

* feat: mapping支持接口变量是records，提供外围扩充函数 (#11105)

* feat: mapping支持接口变量是records 的情况

* feat: 提供外围扩充函数

* feat: 修改函数名

* feat: 补充props 类型定义

* chore: 调整用例

* feat: 自定义样式扩展 (#11140)

Co-authored-by: hezhihang <hezhihang@baidu.com>

* feat: tabs支持删除动作，外观样式支持主题

* typo error

* chore: 支持更多的场景

* feat: 穿梭选择器增加点击选项事件

* feat: 锚点导航调整为sticky布局 (#11143)

* feat: 锚点导航调整为sticky布局

* bugfix

* 更新快照

* 更新单测

* 更新单测

* bugfix

* 优化样式

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

* 动作面板支持外部注册 (#11149)

* 动作面板支持外部注册

* 修复someTree报错

* chore: debug 面板调整 (#11152)

* feat:事件动作面板支持查看调用链

* feat: 新增autoCheckChildren和onlyChildren属性配置面板，更改穿梭框事件点击位置

* feat: 预留外围扩充函数

* fix: 调整文案和属性名

* 修复初始化弹窗问题

* fix：自定义样式根节点不生效、样式修改时schema更新不正确，tabs动作仅支持hash删除 (#11145)

Co-authored-by: hezhihang <hezhihang@baidu.com>

* feat: 日期\日期范围组件可配禁止输入 (#11197)

* feat:验证器手机和电话号支持国家代号,数字框新增显示上下按钮，修改自定义样式实现。 (#11198)

* fix: 穿梭器面板中onlyChildren属性默认开启

* feat: 验证器中手机号和电话号支持国家代号

* feat: 数字框编辑器新增显示上下按钮开关，修改自定义样式实现

* 修复插件重复注册&输入序号支持表达式

* 移除无用代码

* feat: tree支持节点行为配置、点击事件、虚拟列表高度、工具栏、操作栏等功能

* feat: 虚拟列表支持高度自适应

* feat: 虚拟列表支持高度自适应

* feat: 虚拟列表支持高度自适应

* feat: 虚拟列表支持高度自适应

* feat: 表格列新增textOverflow属性

* feat: 新增文本未超出，不呼出功能

* feat: 修改dom计算的位置

* feat: 增加限制条件

* feat: 删除sonTarget属性

* feat: 合并renderTextOver

* feat: 留出外围扩充位置

* feat: 步骤条新增iconPositon属性，修复简单模式下箭头布局错乱 (#11250)

* feat: 替换按钮配置面板自定义样式

* feat: 步骤条新增iconPositon属性，修复简单模式下箭头布局错乱

---------

Co-authored-by: hzh11012 <43038692+hzh11012@users.noreply.github.com>
Co-authored-by: hezhihang <hezhihang@baidu.com>
Co-authored-by: F-jianchao <161407305+F-jianchao@users.noreply.github.com>
Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com>
Co-authored-by: fujianchao <fujianchao@baidu.com>
Co-authored-by: qkiroc <30946345+qkiroc@users.noreply.github.com>
Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
Co-authored-by: z418577198 <418577198@qq.com>
Co-authored-by: lvxiaojiao <lvxiaojiao@baidu.com>
Co-authored-by: zhangzhijun03 <zhangzhijun03@baidu.com>
Co-authored-by: Allen <yupeng.fe@qq.com>
---
 docs/zh-CN/components/crud.md                 |    1 +
 docs/zh-CN/components/form/input-tree.md      |  500 ++-
 docs/zh-CN/components/form/treeselect.md      |   55 +
 docs/zh-CN/components/page.md                 |   25 +
 docs/zh-CN/components/tabs.md                 |  124 +
 .../__tests__/renderers/wrapControl.test.tsx  |    6 +-
 packages/amis-core/package.json               |    7 +-
 packages/amis-core/src/actions/Action.ts      |    4 +
 packages/amis-core/src/index.tsx              |    8 +-
 packages/amis-core/src/renderers/Item.tsx     |    2 +
 packages/amis-core/src/renderers/Options.tsx  | 2198 +++++------
 .../amis-core/src/renderers/wrapControl.tsx   |    6 +-
 packages/amis-core/src/store/formItem.ts      |    2 +-
 packages/amis-core/src/utils/api.ts           |    4 +-
 .../amis-core/src/utils/attachmentAdpator.ts  |    2 +
 packages/amis-core/src/utils/debug.tsx        |  179 +-
 packages/amis-core/src/utils/index.ts         |    1 +
 packages/amis-core/src/utils/loopTooMuch.ts   |   23 +
 packages/amis-core/src/utils/position.ts      |   21 +-
 packages/amis-core/src/utils/validations.ts   |    6 +-
 packages/amis-editor-core/package.json        |    5 +-
 .../scss/control/_event-action.scss           |   55 +-
 packages/amis-editor-core/scss/editor.scss    |    1 +
 .../style-control/_single-theme-css-code.scss |   83 +
 .../amis-editor-core/src/component/Editor.tsx |   16 +-
 .../src/component/ModalForm.tsx               |  161 +
 .../Panel/AvailableRenderersPanel.tsx         |    3 +-
 .../src/component/Preview.tsx                 |    6 +-
 packages/amis-editor-core/src/deepSplice.ts   |  130 +
 packages/amis-editor-core/src/index.ts        |    8 +-
 packages/amis-editor-core/src/manager.ts      |   28 +-
 packages/amis-editor-core/src/plugin.ts       |    5 +
 packages/amis-editor-core/src/store/editor.ts |   36 +
 packages/amis-editor/package.json             |    5 +-
 .../amis-editor/src/component/BaseControl.ts  |   11 +-
 packages/amis-editor/src/index.tsx            |    3 +
 packages/amis-editor/src/plugin/AnchorNav.tsx |    2 +
 packages/amis-editor/src/plugin/Button.tsx    |   14 +-
 packages/amis-editor/src/plugin/CRUD.tsx      |   22 +-
 .../amis-editor/src/plugin/CRUD2/BaseCRUD.tsx |   16 +-
 packages/amis-editor/src/plugin/Calendar.tsx  |   25 +-
 packages/amis-editor/src/plugin/Chart.tsx     |   11 +-
 packages/amis-editor/src/plugin/Collapse.tsx  |   24 +-
 .../amis-editor/src/plugin/CollapseGroup.tsx  |   18 +
 packages/amis-editor/src/plugin/Dialog.tsx    |   11 +-
 packages/amis-editor/src/plugin/Drawer.tsx    |   12 +-
 .../src/plugin/Form/ButtonGroupSelect.tsx     |   32 +-
 .../src/plugin/Form/ChainedSelect.tsx         |   26 +-
 .../amis-editor/src/plugin/Form/Checkbox.tsx  |   35 +-
 .../src/plugin/Form/Checkboxes.tsx            |   32 +-
 .../src/plugin/Form/CodeEditor.tsx            |   27 +-
 .../amis-editor/src/plugin/Form/Combo.tsx     |   12 +-
 .../src/plugin/Form/DiffEditor.tsx            |   19 +-
 packages/amis-editor/src/plugin/Form/Form.tsx |   53 +-
 .../amis-editor/src/plugin/Form/InputCity.tsx |   33 +-
 .../amis-editor/src/plugin/Form/InputDate.tsx |   36 +-
 .../src/plugin/Form/InputDateRange.tsx        |   37 +-
 .../src/plugin/Form/InputExcel.tsx            |   21 +-
 .../amis-editor/src/plugin/Form/InputFile.tsx |   26 +-
 .../src/plugin/Form/InputImage.tsx            |   15 +-
 .../amis-editor/src/plugin/Form/InputKV.tsx   |   24 +-
 .../src/plugin/Form/InputNumber.tsx           |   71 +-
 .../src/plugin/Form/InputRange.tsx            |   19 +-
 .../src/plugin/Form/InputRating.tsx           |   25 +-
 .../src/plugin/Form/InputTable.tsx            |   13 +-
 .../amis-editor/src/plugin/Form/InputTag.tsx  |   25 +-
 .../amis-editor/src/plugin/Form/InputText.tsx |   32 +-
 .../amis-editor/src/plugin/Form/InputTree.tsx |  307 +-
 packages/amis-editor/src/plugin/Form/Item.tsx |   13 +-
 .../src/plugin/Form/ListSelect.tsx            |   26 +-
 .../src/plugin/Form/LocationPicker.tsx        |   29 +-
 .../src/plugin/Form/MatrixCheckboxes.tsx      |   17 +-
 .../src/plugin/Form/NestedSelect.tsx          |   31 +-
 .../amis-editor/src/plugin/Form/Radios.tsx    |   33 +-
 .../amis-editor/src/plugin/Form/Select.tsx    |   44 +-
 .../amis-editor/src/plugin/Form/Switch.tsx    |   24 +-
 .../src/plugin/Form/TabsTransfer.tsx          |   29 +-
 .../amis-editor/src/plugin/Form/Textarea.tsx  |   28 +-
 .../amis-editor/src/plugin/Form/Transfer.tsx  |   55 +-
 .../src/plugin/Form/TransferPicker.tsx        |   28 +-
 .../src/plugin/Form/TreeSelect.tsx            |  214 +-
 packages/amis-editor/src/plugin/Mapping.tsx   |    1 +
 packages/amis-editor/src/plugin/Nav.tsx       |   12 +-
 .../src/plugin/Others/TableCell.tsx           |   35 +-
 packages/amis-editor/src/plugin/Page.tsx      |   56 +-
 packages/amis-editor/src/plugin/Panel.tsx     |    2 +
 packages/amis-editor/src/plugin/Progress.tsx  |   22 +-
 packages/amis-editor/src/plugin/SearchBox.tsx |   17 +-
 packages/amis-editor/src/plugin/Service.tsx   |   11 +-
 packages/amis-editor/src/plugin/Steps.tsx     |    5 +
 packages/amis-editor/src/plugin/Table.tsx     |   31 +-
 packages/amis-editor/src/plugin/Table2.tsx    |    4 +-
 packages/amis-editor/src/plugin/Tabs.tsx      |  142 +-
 packages/amis-editor/src/plugin/Wizard.tsx    |   62 +-
 .../event-control/action-config-dialog.tsx    |   62 +-
 .../event-control/action-config-panel.tsx     |   15 +-
 .../event-control/actionsPanelManager.ts      |  111 +
 .../componentActionsPanel/clear.tsx           |   21 +
 .../componentActionsPanel/component.tsx       |   10 +
 .../componentActionsPanel/helper.tsx          |  135 +
 .../componentActionsPanel/index.ts            |   11 +
 .../componentActionsPanel/reload.tsx          |  177 +
 .../componentActionsPanel/reset.tsx           |   21 +
 .../componentActionsPanel/setValue.tsx        |  482 +++
 .../componentActionsPanel/staticStatus.tsx    |   64 +
 .../componentActionsPanel/submit.tsx          |   60 +
 .../componentActionsPanel/usability.tsx       |  122 +
 .../componentActionsPanel/validate.tsx        |   56 +
 .../validateFormItem.tsx                      |   52 +
 .../componentActionsPanel/visibility.tsx      |  104 +
 .../actionsPanelPlugins/index.tsx             |    5 +
 .../modalActionsPanel/closeDialog.tsx         |    7 +
 .../modalActionsPanel/index.ts                |    3 +
 .../modalActionsPanel/openDialog.tsx          |  125 +
 .../modalActionsPanel/toast.tsx               |  130 +
 .../otherActionsPanel/copy.tsx                |   52 +
 .../otherActionsPanel/custom.tsx              |   42 +
 .../otherActionsPanel/index.ts                |    2 +
 .../pageActionsPanel/goBack.tsx               |   11 +
 .../pageActionsPanel/index.ts                 |    3 +
 .../pageActionsPanel/refresh.tsx              |   11 +
 .../pageActionsPanel/url.tsx                  |   71 +
 .../serverActionsPanel/ajax.tsx               |   94 +
 .../serverActionsPanel/download.tsx           |   23 +
 .../serverActionsPanel/index.ts               |    2 +
 .../event-control/comp-action-select.tsx      |   15 +-
 .../src/renderer/event-control/constants.ts   |   47 +
 .../event-control/eventControlConfigHelper.ts |  656 ++++
 .../src/renderer/event-control/helper.tsx     | 2695 +-------------
 .../src/renderer/event-control/index.tsx      |  256 +-
 .../style-control/SingleThemeCssCode.tsx      | 3297 +++++++++++++++++
 packages/amis-editor/src/tpl/common.tsx       |   15 +
 packages/amis-editor/src/tpl/style.tsx        |   45 +-
 packages/amis-editor/src/util.ts              |   23 +
 .../amis-theme-editor-helper/package.json     |    3 +-
 packages/amis-ui/package.json                 |    5 +-
 .../scss/components/_collapse-group.scss      |   11 +
 .../amis-ui/scss/components/_collapse.scss    |    9 +
 packages/amis-ui/scss/components/_debug.scss  |   66 +-
 packages/amis-ui/scss/components/_page.scss   |   15 +
 .../amis-ui/scss/components/_popoverable.scss |   20 +
 packages/amis-ui/scss/components/_steps.scss  |    7 +-
 packages/amis-ui/scss/components/_tabs.scss   |   12 +-
 .../amis-ui/scss/components/form/_tree.scss   |   24 +-
 packages/amis-ui/src/components/Collapse.tsx  |   68 +-
 .../amis-ui/src/components/ConfirmBox.tsx     |   11 +-
 .../amis-ui/src/components/DatePicker.tsx     |    6 +-
 .../src/components/DateRangePicker.tsx        |    6 +-
 .../src/components/PickerContainer.tsx        |    2 +-
 packages/amis-ui/src/components/PopUp.tsx     |   14 +-
 packages/amis-ui/src/components/Radios.tsx    |    2 +-
 packages/amis-ui/src/components/ResultBox.tsx |   33 +-
 packages/amis-ui/src/components/Steps.tsx     |   27 +-
 packages/amis-ui/src/components/Tabs.tsx      |   14 +-
 packages/amis-ui/src/components/Transfer.tsx  |    2 +
 .../amis-ui/src/components/TransferPicker.tsx |    4 +-
 packages/amis-ui/src/components/Tree.tsx      |  129 +-
 .../Form/__snapshots__/fieldSet.test.tsx.snap |   21 +
 .../Form/__snapshots__/inputTag.test.tsx.snap |   10 +
 .../__snapshots__/nestedSelect.test.tsx.snap  |    3 +
 .../Form/__snapshots__/select.test.tsx.snap   |    2 +
 .../tabsTransferPicker.test.tsx.snap          |    1 +
 .../amis/__tests__/renderers/Tabs.test.tsx    |   88 +
 .../amis/__tests__/renderers/Tree.test.tsx    |  411 +-
 .../__snapshots__/Page.test.tsx.snap          |    2 +-
 packages/amis/package.json                    |    3 +-
 .../amis/src/renderers/Form/Checkboxes.tsx    |    2 +-
 .../amis/src/renderers/Form/InputDate.tsx     |    4 +
 .../amis/src/renderers/Form/InputText.tsx     |   49 +-
 .../amis/src/renderers/Form/InputTree.tsx     |  304 +-
 packages/amis/src/renderers/Form/Transfer.tsx |    9 +-
 .../src/renderers/Form/TransferPicker.tsx     |   19 +
 .../amis/src/renderers/Form/TreeSelect.tsx    |  238 +-
 packages/amis/src/renderers/Mapping.tsx       |   28 +-
 packages/amis/src/renderers/Page.tsx          |   35 +-
 packages/amis/src/renderers/PopOver.tsx       |   67 +-
 packages/amis/src/renderers/Steps.tsx         |    7 +
 .../amis/src/renderers/Table/TableCell.tsx    |    2 +-
 packages/amis/src/renderers/Table/index.tsx   |    8 +-
 packages/amis/src/renderers/Tabs.tsx          |  266 +-
 180 files changed, 12027 insertions(+), 4951 deletions(-)
 create mode 100644 packages/amis-core/src/utils/loopTooMuch.ts
 create mode 100644 packages/amis-editor-core/scss/style-control/_single-theme-css-code.scss
 create mode 100644 packages/amis-editor-core/src/component/ModalForm.tsx
 create mode 100644 packages/amis-editor-core/src/deepSplice.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelManager.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/clear.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/component.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/helper.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/index.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reload.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reset.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/setValue.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/staticStatus.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/submit.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/usability.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validate.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validateFormItem.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/visibility.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/index.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/closeDialog.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/index.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/openDialog.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/toast.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/copy.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/custom.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/index.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/goBack.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/index.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/refresh.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/url.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/ajax.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/download.tsx
 create mode 100644 packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/index.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/constants.ts
 create mode 100644 packages/amis-editor/src/renderer/event-control/eventControlConfigHelper.ts
 create mode 100644 packages/amis-editor/src/renderer/style-control/SingleThemeCssCode.tsx

diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md
index 48cac667b..b47ac32e7 100755
--- a/docs/zh-CN/components/crud.md
+++ b/docs/zh-CN/components/crud.md
@@ -3999,6 +3999,7 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，
 | filterable         | `boolean` \| [`QuickFilterConfig`](./crud#quickfilterconfig) | `false` | 是否可快速搜索，`options`属性为静态选项，支持设置`source`属性从接口获取选项 |
 | quickEdit          | `boolean` \| [`QuickEditConfig`](./crud#quickeditconfig)     | -       | 快速编辑，一般需要配合`quickSaveApi`接口使用                                |
 | quickEditEnabledOn | `SchemaExpression`                                           | -       | 开启快速编辑条件[表达式](../../docs/concepts/expression)                    |      |
+| textOverflow       | `string`                                                     | `default` | 文本溢出后展示形式，默认换行处理。可选值 `ellipsis` 溢出隐藏展示， `noWrap` 不换行展示(仅在列为静态文本时生效) | `6.9.0` |
 
 #### QuickFilterConfig
 
diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md
index 887c2fe48..af590e3ac 100755
--- a/docs/zh-CN/components/form/input-tree.md
+++ b/docs/zh-CN/components/form/input-tree.md
@@ -249,6 +249,8 @@ order: 59
 
 `cascade`默认为 false，子节点禁止反选，值不包含子节点值，配置`"cascade": true`，子节点可以反选，值包含父子节点值（1.9.0 之前的版本 cascade 配置为 true 的效果为：选中父节点不默认选中子节点）
 
+> 6.9.0 以上版本 autoCancelParent 配置为 true 的效果为：取消子节点，自动去除父节点的值（仅在多选和 cascade 为 true 时生效）
+
 ```schema: scope="body"
 {
   "type": "form",
@@ -292,7 +294,7 @@ order: 59
     {
         "type": "divider"
     },
-     {
+    {
       "type": "input-tree",
       "name": "tree2",
       "label": "子节点可以反选，值包含父子节点值",
@@ -326,6 +328,45 @@ order: 59
           "value": "c"
         }
       ]
+    },
+    {
+        "type": "divider"
+    },
+    {
+      "type": "input-tree",
+      "name": "tree3",
+      "label": "子节点可以反选，值包含父子节点值，取消子节点，自动去除父节点的值",
+      "multiple": true,
+      "cascade": true,
+      "autoCancelParent": true,
+      "options": [
+        {
+          "label": "A",
+          "value": "a"
+        },
+        {
+          "label": "B",
+          "value": "b",
+          "children": [
+            {
+              "label": "B-1",
+              "value": "b-1"
+            },
+            {
+              "label": "B-2",
+              "value": "b-2"
+            },
+            {
+              "label": "B-3",
+              "value": "b-3"
+            }
+          ]
+        },
+        {
+          "label": "C",
+          "value": "c"
+        }
+      ]
     }
   ]
 }
@@ -1086,6 +1127,338 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 
 适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。未配置 searchApi 是前端检索，配置之后就只能通过后端检索。
 
+## 节点行为配置
+
+> 6.9.0 以上版本
+
+设置`nodeBehavior`属性，可以更改节点的行为，默认为选中行为，支持配置多个行为。
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+      {
+        "type": "input-tree",
+        "name": "tree1",
+        "label": "选中",
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 1,
+            "children": [
+              {
+                "label": "file A",
+                "value": 2,
+              }
+            ]
+          },
+          {
+            "label": "file C",
+            "value": 3
+          }
+        ]
+      },
+      {
+        "type": "input-tree",
+        "name": "tree2",
+        "label": "展开",
+        "nodeBehavior": ["unfold"],
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 4,
+            "children": [
+              {
+                "label": "file A",
+                "value": 5,
+              }
+            ]
+          },
+          {
+            "label": "file C",
+            "value": 6
+          }
+        ]
+      },
+      {
+        "type": "input-tree",
+        "name": "tree3",
+        "label": "选中+展开",
+        "nodeBehavior": ["check", "unfold"],
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 7,
+            "children": [
+              {
+                "label": "file A",
+                "value": 8,
+              }
+            ]
+          },
+          {
+            "label": "file C",
+            "value": 9
+          }
+        ]
+      }
+    ]
+}
+```
+
+## 自定义选项操作
+
+> 6.9.0 以上版本
+
+> 使用`itemActions`属性，自定义下拉选项的操作。
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+      {
+        "type": "input-tree",
+        "name": "tree",
+        "label": "Tree",
+        "iconField": "icon",
+        "options": [
+          {
+            "label": "采购单",
+            "value": "order",
+            "tag": "数据模型",
+            "icon": "fa fa-database",
+            "children": [
+              {
+                "label": "ID",
+                "value": "id",
+                "tag": "数字",
+                "icon": "fa fa-check"
+              },
+              {
+                "label": "采购人",
+                "value": "name",
+                "tag": "字符串",
+                "icon": "fa fa-check"
+              },
+              {
+                "label": "采购时间",
+                "value": "time",
+                "tag": "日期时间",
+                "icon": "fa fa-check"
+              }
+            ]
+          }
+        ],
+        "itemActions": [
+          {
+            "type": "button",
+            "icon": "fa fa-plus",
+            "level": "link",
+            "size": "xs",
+            "onEvent": {
+              "click": {
+                "weight": 0,
+                "actions": [
+                  {
+                    "ignoreError": false,
+                    "actionType": "toast",
+                    "args": {
+                      "msgType": "info",
+                      "position": "top-right",
+                      "closeButton": true,
+                      "showIcon": true,
+                      "msg": "自定义操作",
+                      "className": "theme-toast-action-scope"
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ]
+}
+```
+
+## 工具栏区域
+
+> 6.9.0 以上版本
+> 使用`toolbar`属性，自定义工具栏区域。（仅开启检索时生效）
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+      {
+        "type": "input-tree",
+        "name": "tree",
+        "label": "Tree",
+        "searchable": true,
+        "toolbar": [
+          {
+            "type": "button",
+            "label": "弹窗",
+            "onEvent": {
+              "click": {
+                "actions": [
+                  {
+                    "actionType": "dialog",
+                    "dialog": {
+                      "type": "dialog",
+                      "title": "未命名弹窗",
+                      "body": [
+                        {
+                          "type": "tpl",
+                          "tpl": "弹窗内容"
+                        }
+                      ],
+                      "actions": [
+                        {
+                          "type": "button",
+                          "actionType": "cancel",
+                          "label": "取消"
+                        },
+                        {
+                          "type": "button",
+                          "actionType": "confirm",
+                          "label": "确定",
+                          "primary": true
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ],
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 1,
+            "collapsed": true,
+            "children": [
+              {
+                "label": "file A",
+                "value": 2
+              },
+              {
+                "label": "file B",
+                "value": 3
+              }
+            ]
+          },
+          {
+            "label": "file D",
+            "value": 4
+          }
+        ]
+      }
+    ]
+}
+```
+
+## 虚拟列表
+
+> 6.9.0 以上版本, 开启 heightAuto 后，虚拟列表将自适应高度
+
+```schema: scope="body"
+{
+    "type": "page",
+    "aside": [
+      {
+        "type": "flex",
+        "direction": "column",
+        "isFixedHeight": true,
+        "style": {
+          "height": "300px"
+        },
+        "items": [
+          {
+            "type": "input-tree",
+            "id": "tree",
+            "name": "tree",
+            "label": false,
+            "heightAuto": true,
+            "virtualThreshold": 5,
+            "options": [
+              {
+                "label": "Folder A",
+                "value": 1,
+                "children": [
+                  {
+                    "label": "file A",
+                    "value": 2
+                  },
+                  {
+                    "label": "file B",
+                    "value": 3
+                  }
+                ]
+              },
+              {
+                "label": "file C",
+                "value": 4
+              },
+              {
+                "label": "file D",
+                "value": 5
+              },
+              {
+                "label": "file E",
+                "value": 6
+              },
+              {
+                "label": "file F",
+                "value": 7
+              },
+              {
+                "label": "file G",
+                "value": 8
+              },
+              {
+                "label": "file H",
+                "value": 9
+              },
+              {
+                "label": "file I",
+                "value": 10
+              },
+              {
+                "label": "file J",
+                "value": 11
+              },
+              {
+                "label": "file K",
+                "value": 12
+              },
+              {
+                "label": "file L",
+                "value": 13
+              }
+            ],
+            "wrapperCustomStyle": {
+              "root": {
+                "height": "100%"
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "body": [
+      {
+        "type": "tpl",
+        "tpl": "开启heightAuto后，设置tree的高度，虚拟列表将自适应"
+      }
+    ]
+}
+```
+
 ## 属性表
 
 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@@ -1137,6 +1510,11 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 | menuTpl                | `string`                                     |                  | 选项自定义渲染 HTML 片段                                                                                                             | `2.8.0`                      |
 | enableDefaultIcon      | `boolean`                                    | `true`           | 是否为选项添加默认的前缀 Icon，父节点默认为`folder`，叶节点默认为`file`                                                              | `2.8.0`                      |
 | heightAuto             | `boolean`                                    | `false`          | 默认高度会有个 maxHeight，即超过一定高度就会内部滚动，如果希望自动增长请设置此属性                                                   | `3.0.0`                      |
+| nodeBehavior           | `Array<'unfold' \| 'check' \| ''>`           | `['check']`      | 节点行为配置，支持配置多个行为                                                                                                       | `6.9.0`                      |
+| autoCancelParent       | `boolean`                                    | `false`          | 子节点取消时自动取消父节点的值，仅在多选且 cascade 为 true 时生效                                                                    | `6.9.0`                      |
+| toolbar                | `SchemaNode`                                 |                  | 工具栏区域，仅开启检索时生效                                                                                                         | `6.9.0`                      |
+| toolbarClassName       | `string`                                     |                  | 工具栏区域类名                                                                                                                       | `6.9.0`                      |
+| itemActions            | `SchemaNode`                                 |                  | 节点操作栏区域                                                                                                                       | `6.9.0`                      |
 
 ## 事件表
 
@@ -1151,6 +1529,7 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 | editConfirm (3.6.4 及以上版本)       | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合                                                                                                                                                                                                      | 编辑节点提交时触发           |
 | deleteConfirm (3.6.4 及以上版本)     | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合                                                                                                                                                                                                      | 删除节点提交时触发           |
 | deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合                                                                                                                                                                          | 懒加载接口远程请求成功时触发 |
+| itemClick (6.9.0 以上版本)           | `value: any`表单项的值，值格式取决于具体配置<br/>`item: object` 点击的节点信息                                                                                                                                                                                                                 | 节点点击时触发               |
 | add（不推荐）                        | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）                                                                                                                                                                                                | 新增节点提交时触发           |
 | edit（不推荐）                       | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）                                                                                                                                                                                                | 编辑节点提交时触发           |
 | delete（不推荐）                     | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）                                                                                                                                                                                                | 删除节点提交时触发           |
@@ -1440,6 +1819,60 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 }
 ```
 
+### itemClick
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "body": [
+      {
+        "type": "input-tree",
+        "name": "tree",
+        "label": "Tree",
+        "nodeBehavior": [],
+        "onEvent": {
+          "itemClick": {
+            "actions": [
+              {
+                "actionType": "toast",
+                "args": {
+                  "msg": "${event.data.tree|json}"
+                }
+              }
+            ]
+          }
+        },
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 1,
+            "children": [
+              {
+                "label": "file A",
+                "value": 2
+              },
+              {
+                "label": "file B",
+                "value": 3
+              }
+            ]
+          },
+          {
+            "label": "file C",
+            "value": 4
+          },
+          {
+            "label": "file D",
+            "value": 5
+          }
+        ]
+      }
+    ]
+}
+```
+
 ## 动作表
 
 当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
@@ -1455,6 +1888,7 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 | clear    | -                                      | 清空                                                                                                       |
 | reset    | -                                      | 将值重置为初始值。6.3.0 及以下版本为`resetValue`                                                           |
 | setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组                    |
+| search   | `keyword: string` 检索的值             | 检索数据                                                                                                   |
 
 ### clear
 
@@ -1589,3 +2023,67 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
     ]
 }
 ```
+
+### search
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "body": [
+      {
+        "type": "search-box",
+        "name": "keyword",
+        "className": "mb-4",
+        "style": {
+          "width": "100%"
+        },
+        "onEvent": {
+          "change": {
+            "actions": [
+              {
+                "componentId": "tree",
+                "groupType": "component",
+                "actionType": "search",
+                "args": {
+                  "keyword": "${event.data.value}"
+                }
+              }
+            ]
+          }
+        }
+      },
+      {
+        "type": "input-tree",
+        "id": "tree",
+        "name": "tree",
+        "label": false,
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 1,
+            "children": [
+              {
+                "label": "file A",
+                "value": 2
+              },
+              {
+                "label": "file B",
+                "value": 3
+              }
+            ]
+          },
+          {
+            "label": "file C",
+            "value": 4
+          },
+          {
+            "label": "file D",
+            "value": 5
+          }
+        ]
+      }
+    ]
+}
+```
diff --git a/docs/zh-CN/components/form/treeselect.md b/docs/zh-CN/components/form/treeselect.md
index 546eaaed6..d403afa21 100755
--- a/docs/zh-CN/components/form/treeselect.md
+++ b/docs/zh-CN/components/form/treeselect.md
@@ -418,6 +418,7 @@ order: 60
 | editConfirm (3.6.4 及以上版本)       | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合                                     | 编辑节点提交时触发           |
 | deleteConfirm (3.6.4 及以上版本)     | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合                                     | 删除节点提交时触发           |
 | deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合         | 懒加载接口远程请求成功时触发 |
+| itemClick (6.9.0 以上版本)           | `value: any`表单项的值，值格式取决于具体配置<br/>`item: object` 点击的节点信息                                                | 节点点击时触发               |
 | add（不推荐）                        | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）                               | 新增节点提交时触发           |
 | edit（不推荐）                       | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）                               | 编辑节点提交时触发           |
 | delete（不推荐）                     | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）                               | 删除节点提交时触发           |
@@ -812,6 +813,60 @@ order: 60
 }
 ```
 
+### itemClick
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "body": [
+      {
+        "type": "input-tree",
+        "name": "tree",
+        "label": "Tree",
+        "nodeBehavior": [],
+        "onEvent": {
+          "itemClick": {
+            "actions": [
+              {
+                "actionType": "toast",
+                "args": {
+                  "msg": "${event.data.tree|json}"
+                }
+              }
+            ]
+          }
+        },
+        "options": [
+          {
+            "label": "Folder A",
+            "value": 1,
+            "children": [
+              {
+                "label": "file A",
+                "value": 2
+              },
+              {
+                "label": "file B",
+                "value": 3
+              }
+            ]
+          },
+          {
+            "label": "file C",
+            "value": 4
+          },
+          {
+            "label": "file D",
+            "value": 5
+          }
+        ]
+      }
+    ]
+}
+```
+
 ## 动作表
 
 当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
diff --git a/docs/zh-CN/components/page.md b/docs/zh-CN/components/page.md
index 85f996e0c..4f807b964 100755
--- a/docs/zh-CN/components/page.md
+++ b/docs/zh-CN/components/page.md
@@ -251,6 +251,30 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
 
 通过配置 `asideSticky` 来开关，默认是开启状态。
 
+## aside 展示位置
+
+通过配置 `asidePosition`，可以控制侧边栏的展示位置。
+
+```schema
+{
+  "type": "page",
+  "asideResizor": true,
+  "asidePosition": "right",
+  "aside": [
+    {
+      "type": "tpl",
+      "tpl": "这是侧边栏部分"
+    }
+  ],
+  "body": [
+    {
+      "type": "tpl",
+      "tpl": "这是内容区"
+    }
+  ]
+}
+```
+
 ## 属性表
 
 | 属性名              | 类型                                      | 默认值                                     | 说明                                                                                  |
@@ -264,6 +288,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
 | asideMinWidth       | `number`                                  |                                            | 页面边栏区域的最小宽度                                                                |
 | asideMaxWidth       | `number`                                  |                                            | 页面边栏区域的最大宽度                                                                |
 | asideSticky         | `boolean`                                 | true                                       | 用来控制边栏固定与否                                                                  |
+| asidePosition       | `"left" \| "right"`                       | `"left"`                                   | 页面边栏区域的位置                                                                    |
 | toolbar             | [SchemaNode](../../docs/types/schemanode) |                                            | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |
 | body                | [SchemaNode](../../docs/types/schemanode) |                                            | 往页面的内容区域加内容                                                                |
 | className           | `string`                                  |                                            | 外层 dom 类名                                                                         |
diff --git a/docs/zh-CN/components/tabs.md b/docs/zh-CN/components/tabs.md
index c7c6cbe6d..11e23d5ab 100755
--- a/docs/zh-CN/components/tabs.md
+++ b/docs/zh-CN/components/tabs.md
@@ -881,6 +881,7 @@ order: 68
 | 事件名称 | 事件参数                             | 说明             |
 | -------- | ------------------------------------ | ---------------- |
 | change   | `value: number \| string` 选项卡索引 | 切换选项卡时触发 |
+| delete   | `value: number \| string` 选项卡索引 | 删除选项卡时触发 |
 
 ### change
 
@@ -918,6 +919,43 @@ order: 68
 }
 ```
 
+### delete
+
+```schema: scope="body"
+{
+    "type": "tabs",
+    "closable": true,
+    "mode": "line",
+    "tabs": [
+    {
+        "title": "选项卡1",
+        "body": "选项卡内容1"
+    },
+    {
+        "title": "选项卡2",
+        "body": "选项卡内容2"
+    },
+    {
+        "title": "选项卡3",
+        "body": "选项卡内容3"
+    }
+    ],
+    "onEvent": {
+        "delete": {
+            "actions": [
+                {
+                    "actionType": "toast",
+                    "args": {
+                        "msgType": "info",
+                        "msg": "删除选项卡${event.data.value}"
+                    }
+                }
+            ]
+        }
+    }
+}
+```
+
 ## 动作表
 
 当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
@@ -925,6 +963,7 @@ order: 68
 | 动作名称        | 动作配置                                 | 说明             |
 | --------------- | ---------------------------------------- | ---------------- |
 | changeActiveKey | `activeKey: number \| string` 选项卡索引 | 激活指定的选项卡 |
+| deleteTab       | `deleteHash: string` 选项卡 hash         | 删除指定的选项卡 |
 
 ### changeActiveKey
 
@@ -1007,3 +1046,88 @@ order: 68
     }
 ]
 ```
+
+### deleteTab
+
+可以尝试点击下方按钮，实现选项卡删除。
+
+```schema: scope="body"
+[
+    {
+      "type": "action",
+      "label": "删除选项卡1",
+      "className": "mr-3 mb-3",
+      "onEvent": {
+        "click": {
+          "actions": [
+            {
+              "actionType": "deleteTab",
+              "componentId": "tabs-change-receiver",
+              "args": {
+                "deleteHash": "tab1"
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "type": "action",
+      "label": "删除选项卡2",
+      "className": "mr-3 mb-3",
+      "onEvent": {
+        "click": {
+          "actions": [
+            {
+              "actionType": "deleteTab",
+              "componentId": "tabs-change-receiver",
+              "args": {
+                "deleteHash": "tab2"
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "type": "action",
+      "label": "删除选项卡3",
+      "className": "mr-3 mb-3",
+      "onEvent": {
+        "click": {
+          "actions": [
+            {
+              "actionType": "deleteTab",
+              "componentId": "tabs-change-receiver",
+              "args": {
+                "deleteHash": "tab3"
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "id": "tabs-change-receiver",
+      "type": "tabs",
+      "mode": "line",
+      "tabs": [
+        {
+          "title": "选项卡1",
+          "hash": "tab1",
+          "body": "选项卡内容1"
+        },
+        {
+          "title": "选项卡2",
+          "hash": "tab2",
+          "body": "选项卡内容2"
+        },
+        {
+          "title": "选项卡3",
+          "hash": "tab3",
+          "body": "选项卡内容3"
+        }
+      ]
+    }
+]
+```
diff --git a/packages/amis-core/__tests__/renderers/wrapControl.test.tsx b/packages/amis-core/__tests__/renderers/wrapControl.test.tsx
index 2fbfeebbf..a6b46cdeb 100644
--- a/packages/amis-core/__tests__/renderers/wrapControl.test.tsx
+++ b/packages/amis-core/__tests__/renderers/wrapControl.test.tsx
@@ -28,7 +28,7 @@ describe('constructor', () => {
     OriginComponent.defaultProps = {
       name: 'test'
     };
-    const WrappedComponent = wrapControl(OriginComponent as any);
+    const WrappedComponent = wrapControl({}, OriginComponent as any);
 
     renderComponent(WrappedComponent, {$schema: {}});
     expect(screen.getByText('FormItemStore')).toBeInTheDocument();
@@ -39,7 +39,7 @@ describe('constructor', () => {
       // 用于断言formItem已被注册
       return <div>{props.formItem?.storeType}</div>;
     };
-    const WrappedComponent = wrapControl(OriginComponent as any);
+    const WrappedComponent = wrapControl({}, OriginComponent as any);
 
     renderComponent(WrappedComponent, {$schema: {name: 'test'}});
     expect(screen.getByText('FormItemStore')).toBeInTheDocument();
@@ -50,7 +50,7 @@ describe('constructor', () => {
       // 用于断言formItem已被注册
       return <div>{props.formItem?.storeType}</div>;
     };
-    const WrappedComponent = wrapControl(OriginComponent as any);
+    const WrappedComponent = wrapControl({}, OriginComponent as any);
 
     renderComponent(WrappedComponent, {$schema: {}});
     expect(screen.queryByText('FormItemStore')).not.toBeInTheDocument();
diff --git a/packages/amis-core/package.json b/packages/amis-core/package.json
index c20307c7a..858b68268 100644
--- a/packages/amis-core/package.json
+++ b/packages/amis-core/package.json
@@ -35,8 +35,8 @@
     "typescript": "^4.6.4"
   },
   "scripts": {
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
-    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
+    "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "dev": "rollup -c -w",
     "test": "jest",
     "update-snapshot": "jest --updateSnapshot",
@@ -49,7 +49,8 @@
   ],
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-formula": "^6.9.0",
+    "cross-env": "^7.0.3",
+    "amis-formula": "*",
     "classnames": "2.3.2",
     "file-saver": "^2.0.2",
     "hoist-non-react-statics": "^3.3.2",
diff --git a/packages/amis-core/src/actions/Action.ts b/packages/amis-core/src/actions/Action.ts
index d139500e6..2edc9a9d3 100644
--- a/packages/amis-core/src/actions/Action.ts
+++ b/packages/amis-core/src/actions/Action.ts
@@ -10,6 +10,7 @@ import {IContinueAction} from './ContinueAction';
 import {ILoopAction} from './LoopAction';
 import {IParallelAction} from './ParallelAction';
 import {ISwitchAction} from './SwitchAction';
+import {debug} from '../utils/debug';
 
 // 循环动作执行状态
 export enum LoopStatus {
@@ -343,6 +344,9 @@ export const runAction = async (
   console.group?.(`run action ${action.actionType}`);
   console.debug(`[${action.actionType}] action args, data`, args, data);
 
+  debug('action', `run action ${action.actionType} with args`, args);
+  debug('action', `run action ${action.actionType} with data`, data);
+
   let stopped = false;
   const actionResult = await actionInstrance.run(
     {
diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx
index 99315d0c0..139e77d30 100644
--- a/packages/amis-core/src/index.tsx
+++ b/packages/amis-core/src/index.tsx
@@ -81,7 +81,11 @@ import type {
   FormControlProps,
   FormItemProps
 } from './renderers/Item';
-import {OptionsControl, registerOptionsControl} from './renderers/Options';
+import {
+  OptionsControl,
+  registerOptionsControl,
+  OptionsControlBase
+} from './renderers/Options';
 import type {OptionsControlProps} from './renderers/Options';
 import type {FormOptionsControl} from './renderers/Options';
 import {Schema} from './types';
@@ -217,6 +221,7 @@ export {
   ErrorBoundary,
   addSchemaFilter,
   OptionsControlProps,
+  OptionsControlBase,
   FormOptionsControl,
   FormControlProps,
   FormBaseControl,
@@ -241,6 +246,7 @@ export {
   envOverwrite,
   getGlobalOptions,
   setGlobalOptions,
+  wrapFetcher,
   SchemaRenderer
 };
 
diff --git a/packages/amis-core/src/renderers/Item.tsx b/packages/amis-core/src/renderers/Item.tsx
index 5a8d5e3c4..ab62a8da5 100644
--- a/packages/amis-core/src/renderers/Item.tsx
+++ b/packages/amis-core/src/renderers/Item.tsx
@@ -481,6 +481,7 @@ export interface FormItemBasicConfig extends Partial<RendererConfig> {
   renderDescription?: boolean;
   test?: RegExp | TestFunc;
   storeType?: string;
+  formItemStoreType?: string;
   validations?: string;
   strictMode?: boolean;
 
@@ -2205,6 +2206,7 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
     }
 
     return wrapControl(
+      config,
       hoistNonReactStatic(
         class extends FormItemWrap {
           static defaultProps: any = {
diff --git a/packages/amis-core/src/renderers/Options.tsx b/packages/amis-core/src/renderers/Options.tsx
index aec8770dc..7e1e8d7d4 100644
--- a/packages/amis-core/src/renderers/Options.tsx
+++ b/packages/amis-core/src/renderers/Options.tsx
@@ -287,10 +287,1109 @@ export const detectProps = itemDetectProps.concat([
   'hideSelected'
 ]);
 
+export class OptionsControlBase<
+  T extends OptionsProps = OptionsProps,
+  S = any
+> extends React.Component<T, S> {
+  toDispose: Array<() => void> = [];
+
+  input: any;
+  mounted = false;
+
+  constructor(props: T, readonly config: OptionsConfig) {
+    super(props);
+
+    const {
+      initFetch,
+      formItem,
+      source,
+      data,
+      setPrinstineValue,
+      defaultValue,
+      multiple,
+      joinValues,
+      extractValue,
+      addHook,
+      formInited,
+      valueField,
+      options,
+      value,
+      defaultCheckAll
+    } = props;
+
+    if (!formItem) {
+      return;
+    }
+
+    formItem.setOptions(
+      normalizeOptions(options, undefined, valueField),
+      this.changeOptionValue,
+      data
+    );
+
+    this.toDispose.push(
+      reaction(
+        () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
+        () => this.mounted && this.forceUpdate()
+      )
+    );
+
+    // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
+    if (
+      multiple &&
+      defaultCheckAll &&
+      formItem.filteredOptions?.length &&
+      !source
+    ) {
+      this.defaultCheckAll();
+    }
+
+    let loadOptions: boolean = initFetch !== false;
+    let setInitValue: Function | null = null;
+
+    if (joinValues === false && defaultValue) {
+      setInitValue = () => {
+        const selectedOptions = extractValue
+          ? formItem
+              .getSelectedOptions(value)
+              .map(
+                (selectedOption: Option) =>
+                  selectedOption[valueField || 'value']
+              )
+          : formItem.getSelectedOptions(value);
+        setPrinstineValue(
+          multiple ? selectedOptions.concat() : selectedOptions[0]
+        );
+      };
+    }
+
+    if (loadOptions && config.autoLoadOptionsFromSource !== false) {
+      this.toDispose.push(
+        formInited || !addHook
+          ? formItem.addInitHook(async () => {
+              await this.reload();
+              setInitValue?.();
+            })
+          : addHook(async (data: any) => {
+              await this.initOptions(data);
+              setInitValue?.();
+            }, 'init')
+      );
+    } else {
+      setInitValue?.();
+    }
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+    this.normalizeValue();
+  }
+
+  shouldComponentUpdate(nextProps: OptionsProps) {
+    if (this.config.strictMode === false || nextProps.strictMode === false) {
+      return true;
+    } else if (nextProps.source || nextProps.autoComplete) {
+      return true;
+    } else if (nextProps.formItem?.expressionsInOptions) {
+      return true;
+    } else if (anyChanged(detectProps, this.props, nextProps)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  componentDidUpdate(prevProps: OptionsProps) {
+    const props = this.props;
+    const formItem = props.formItem as IFormItemStore;
+
+    if (!props.source && prevProps.options !== props.options && formItem) {
+      formItem.setOptions(
+        normalizeOptions(props.options || [], undefined, props.valueField),
+        this.changeOptionValue,
+        props.data
+      );
+      this.normalizeValue();
+    } else if (
+      this.config.autoLoadOptionsFromSource !== false &&
+      (props.formInited || typeof props.formInited === 'undefined') &&
+      props.source &&
+      formItem &&
+      (prevProps.source !== props.source || prevProps.data !== props.data)
+    ) {
+      if (isPureVariable(props.source as string)) {
+        const prevOptions = resolveVariableAndFilter(
+          prevProps.source as string,
+          prevProps.data,
+          '| raw'
+        );
+        const options = resolveVariableAndFilter(
+          props.source as string,
+          props.data,
+          '| raw'
+        );
+
+        if (prevOptions !== options) {
+          formItem.loadOptionsFromDataScope(
+            props.source as string,
+            props.data,
+            this.changeOptionValue
+          );
+
+          this.normalizeValue();
+        }
+      } else if (
+        isEffectiveApi(props.source, props.data) &&
+        isApiOutdated(
+          prevProps.source,
+          props.source,
+          prevProps.data,
+          props.data
+        )
+      ) {
+        formItem
+          .loadOptions(
+            props.source,
+            props.data,
+            undefined,
+            true,
+            this.changeOptionValue
+          )
+          .then(() => this.normalizeValue());
+      }
+    }
+
+    if (prevProps.value !== props.value || formItem?.expressionsInOptions) {
+      formItem?.syncOptions(undefined, props.data);
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.removeHook?.(this.reload, 'init');
+    this.mounted = false;
+    this.toDispose.forEach(fn => fn());
+    this.toDispose = [];
+  }
+
+  // 不推荐使用，缺少组件值
+  async oldDispatchOptionEvent(eventName: string, eventData: any = '') {
+    const {dispatchEvent, options} = this.props;
+    const rendererEvent = await dispatchEvent(
+      eventName,
+      resolveEventData(
+        this.props,
+        {value: eventData, options, items: options} // 为了保持名字统一
+      )
+    );
+    // 返回阻塞标识
+    return !!rendererEvent?.prevented;
+  }
+
+  async dispatchOptionEvent(eventName: string, eventData: any = '') {
+    const {dispatchEvent, options, value} = this.props;
+    const rendererEvent = await dispatchEvent(
+      eventName,
+      resolveEventData(
+        this.props,
+        {value, options, items: options, ...eventData} // 为了保持名字统一
+      )
+    );
+    // 返回阻塞标识
+    return !!rendererEvent?.prevented;
+  }
+
+  doAction(action: ActionObject, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (actionType === 'clear') {
+      onChange?.('');
+    } else if (actionType === 'reset') {
+      onChange?.(resetValue ?? '');
+    }
+  }
+
+  // 当前值，跟设置预期的值格式不一致时自动转换。
+  normalizeValue() {
+    const {
+      joinValues,
+      extractValue,
+      value,
+      multiple,
+      formItem,
+      valueField,
+      enableNodePath,
+      pathSeparator,
+      onChange
+    } = this.props;
+
+    if (!formItem || joinValues !== false || !formItem.options.length) {
+      return;
+    }
+
+    if (
+      extractValue === false &&
+      (typeof value === 'string' || typeof value === 'number')
+    ) {
+      const selectedOptions = formItem.getSelectedOptions(value);
+      onChange?.(multiple ? selectedOptions.concat() : selectedOptions[0]);
+    } else if (
+      extractValue === true &&
+      value &&
+      !(
+        (Array.isArray(value) &&
+          value.every(
+            (val: any) => typeof val === 'string' || typeof val === 'number'
+          )) ||
+        typeof value === 'string' ||
+        typeof value === 'number'
+      )
+    ) {
+      const selectedOptions = formItem
+        .getSelectedOptions(value)
+        .map((selectedOption: Option) => selectedOption[valueField || 'value']);
+      onChange?.(multiple ? selectedOptions.concat() : selectedOptions[0]);
+    }
+  }
+
+  getWrappedInstance() {
+    return this.input;
+  }
+
+  @autobind
+  inputRef(ref: any) {
+    this.input = ref;
+  }
+
+  @autobind
+  async handleToggle(
+    option: Option,
+    submitOnChange?: boolean,
+    changeImmediately?: boolean
+  ) {
+    const {onChange, formItem, value} = this.props;
+
+    if (!formItem) {
+      return;
+    }
+
+    let newValue: string | Array<Option> | Option = this.toggleValue(
+      option,
+      value
+    );
+
+    const isPrevented = await this.dispatchOptionEvent('change', {
+      value: newValue
+    });
+    isPrevented ||
+      (onChange && onChange(newValue, submitOnChange, changeImmediately));
+  }
+
+  /**
+   * 初始化时处理默认全选逻辑
+   */
+  defaultCheckAll() {
+    const {value, formItem, setPrinstineValue} = this.props;
+    // 如果有默认值\回填值直接返回
+    if (!formItem || formItem.getSelectedOptions(value).length) {
+      return;
+    }
+    let valueArray = formItem.filteredOptions.concat();
+    const newValue = this.formatValueArray(valueArray);
+    setPrinstineValue?.(newValue);
+  }
+
+  /**
+   * 选中的值经过joinValues和delimiter等规则处理输出规定格式的值
+   * @param valueArray 选中值的数组
+   * @returns 通过joinValues和delimiter等规则输出规定格式的值
+   */
+  formatValueArray(valueArray: Array<Option>) {
+    const {
+      joinValues,
+      extractValue,
+      valueField,
+      delimiter,
+      resetValue,
+      multiple
+    } = this.props;
+    let newValue: string | Array<Option> | Option = '';
+    if (multiple) {
+      /** 兼容tree数据结构 */
+      newValue =
+        getTreeDepth(valueArray) > 1 ? flattenTree(valueArray) : valueArray;
+
+      if (joinValues) {
+        newValue = (newValue as Array<any>)
+          .map(item => item[valueField || 'value'])
+          .filter(item => item != null) /** tree的父节点可能没有value值 */
+          .join(delimiter);
+      } else if (extractValue) {
+        newValue = (newValue as Array<any>)
+          .map(item => item[valueField || 'value'])
+          .filter(item => item != null);
+      }
+    } else {
+      newValue = valueArray[0] || resetValue;
+
+      if (joinValues && newValue) {
+        newValue = (newValue as any)[valueField || 'value'];
+      }
+    }
+    return newValue;
+  }
+
+  @autobind
+  async handleToggleAll() {
+    const {value, onChange, formItem, valueField} = this.props;
+
+    if (!formItem) {
+      return;
+    }
+    const selectedOptions = formItem.getSelectedOptions(value);
+    /** 打平并过滤掉valueField不存在的case，保证全选时对比length一致 */
+    const filteredOptions = flattenTree(
+      formItem.filteredOptions.concat()
+    ).filter(item => item != null && item[valueField || 'value'] != null);
+    let valueArray =
+      selectedOptions.length === filteredOptions.length
+        ? []
+        : formItem.filteredOptions.concat();
+    const newValue = this.formatValueArray(valueArray);
+    const isPrevented = await this.dispatchOptionEvent('change', {
+      value: newValue
+    });
+    isPrevented || (onChange && onChange(newValue));
+  }
+
+  toggleValue(option: Option, originValue?: any) {
+    const {
+      joinValues,
+      extractValue,
+      valueField,
+      delimiter,
+      clearable,
+      resetValue,
+      multiple,
+      formItem
+    } = this.props;
+
+    let valueArray =
+      originValue !== undefined
+        ? formItem!.getSelectedOptions(originValue).concat()
+        : [];
+
+    const idx = findIndex(
+      valueArray,
+      optionValueCompare(option[valueField || 'value'], valueField || 'value')
+    );
+    let newValue: string | Array<Option> | Option = '';
+
+    if (multiple) {
+      if (~idx) {
+        valueArray.splice(idx, 1);
+      } else {
+        valueArray.push(option);
+      }
+
+      newValue = valueArray;
+
+      if (joinValues) {
+        newValue = (newValue as Array<any>)
+          .map(item => item[valueField || 'value'])
+          .join(delimiter);
+      } else if (extractValue) {
+        newValue = (newValue as Array<any>).map(
+          item => item[valueField || 'value']
+        );
+      }
+    } else {
+      if (~idx && clearable) {
+        valueArray.splice(idx, 1);
+      } else {
+        valueArray = [option];
+      }
+
+      newValue = valueArray[0] || resetValue;
+
+      if ((joinValues || extractValue) && newValue) {
+        newValue = (newValue as any)[valueField || 'value'];
+      }
+    }
+
+    return newValue;
+  }
+
+  // 当有 action 触发，如果指定了 reload 目标组件，有可能会来到这里面来
+  @autobind
+  reload() {
+    return this.reloadOptions();
+  }
+
+  @autobind
+  reloadOptions(setError?: boolean, isInit = false, data = this.props.data) {
+    const {source, formItem, onChange, setPrinstineValue, valueField} =
+      this.props;
+
+    if (formItem && isPureVariable(source as string)) {
+      isAlive(formItem) &&
+        formItem.loadOptionsFromDataScope(
+          source as string,
+          data,
+          this.changeOptionValue
+        );
+      return;
+    } else if (!formItem || !isEffectiveApi(source, data)) {
+      return;
+    }
+
+    return isAlive(formItem)
+      ? formItem.loadOptions(
+          source,
+          data,
+          undefined,
+          false,
+          isInit ? setPrinstineValue : onChange,
+          setError
+        )
+      : undefined;
+  }
+
+  @autobind
+  async deferLoad(option: Option) {
+    const {deferApi, source, env, formItem, data} = this.props;
+    const api = option.deferApi || deferApi || source;
+
+    if (!api) {
+      env.notify(
+        'error',
+        '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
+      );
+      return;
+    }
+
+    const json = await formItem?.deferLoadOptions(
+      option,
+      api,
+      createObject(data, option)
+    );
+
+    // 触发事件通知,加载完成
+    // 废弃，不推荐使用
+    this.oldDispatchOptionEvent('loadFinished', json);
+
+    // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+    this.dispatchOptionEvent('deferLoadFinished', {result: json});
+  }
+
+  @autobind
+  leftDeferLoad(option: Option, leftOptions: Option) {
+    const {deferApi, source, env, formItem, data} = this.props;
+    const api = option.deferApi || deferApi || source;
+
+    if (!api) {
+      env.notify(
+        'error',
+        '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
+      );
+      return;
+    }
+
+    formItem?.deferLoadLeftOptions(
+      option,
+      leftOptions,
+      api,
+      createObject(data, option)
+    );
+  }
+
+  @autobind
+  expandTreeOptions(nodePathArr: any[]) {
+    const {deferApi, source, env, formItem, data} = this.props;
+    const api = deferApi || source;
+
+    if (!api) {
+      env.notify(
+        'error',
+        '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
+      );
+      return;
+    }
+
+    formItem?.expandTreeOptions(nodePathArr, api, createObject(data));
+  }
+
+  @autobind
+  async initOptions(data: any) {
+    await this.reloadOptions(false, true);
+    const {formItem, name, multiple, defaultCheckAll} = this.props;
+    if (!formItem) {
+      return;
+    }
+    if (isAlive(formItem) && formItem.value) {
+      setVariable(data, name!, formItem.value);
+    }
+
+    // 默认全选
+    if (multiple && defaultCheckAll && formItem.filteredOptions?.length) {
+      this.defaultCheckAll();
+    }
+  }
+
+  focus() {
+    this.input && this.input.focus && this.input.focus();
+  }
+
+  @autobind
+  changeOptionValue(value: any) {
+    const {
+      onChange,
+      formInited,
+      setPrinstineValue,
+      value: originValue
+    } = this.props;
+
+    if (formInited === false) {
+      originValue === undefined && setPrinstineValue?.(value);
+    } else {
+      onChange?.(value);
+    }
+  }
+
+  @autobind
+  setOptions(options: Array<any>, skipNormalize = false) {
+    const formItem = this.props.formItem as IFormItemStore;
+    formItem &&
+      formItem.setOptions(
+        skipNormalize
+          ? options
+          : normalizeOptions(options || [], undefined, this.props.valueField),
+        this.changeOptionValue,
+        this.props.data
+      );
+  }
+
+  @autobind
+  syncOptions() {
+    const formItem = this.props.formItem as IFormItemStore;
+    formItem && formItem.syncOptions(undefined, this.props.data);
+  }
+
+  @autobind
+  setLoading(value: boolean) {
+    const formItem = this.props.formItem as IFormItemStore;
+    formItem && formItem.setLoading(value);
+  }
+
+  @autobind
+  async handleOptionAdd(
+    idx: number | Array<number> = -1,
+    value?: any,
+    skipForm: boolean = false,
+    callback?: (value: any) => any
+  ) {
+    let {
+      addControls,
+      addDialog,
+      disabled,
+      labelField,
+      onOpenDialog,
+      optionLabel,
+      addApi,
+      source,
+      data,
+      valueField,
+      deferField,
+      formItem: model,
+      createBtnLabel,
+      env,
+      translate: __
+    } = this.props;
+
+    // 禁用或者没有配置 name
+    if (disabled || !model) {
+      return;
+    }
+
+    // 用户没有配置表单项，则自动创建一个 label 输入
+    if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
+      addControls = [
+        {
+          type: 'text',
+          name: labelField || 'label',
+          label: false,
+          required: true,
+          placeholder: __('Options.addPlaceholder')
+        }
+      ];
+    }
+    const parent = Array.isArray(idx)
+      ? getTree(model.options, idx.slice(0, -1))
+      : undefined;
+
+    const ctx: any = createObject(
+      data,
+      Array.isArray(idx)
+        ? {
+            parent: parent,
+            ...value
+          }
+        : value
+    );
+
+    let customAddPrevent = false;
+    let result: any = skipForm
+      ? ctx
+      : await onOpenDialog(
+          {
+            type: 'dialog',
+            title: createBtnLabel || `新增${optionLabel || '选项'}`,
+            ...addDialog,
+            body: {
+              type: 'form',
+              api: addApi,
+              controls: [
+                {
+                  type: 'hidden',
+                  name: 'idx',
+                  value: idx
+                },
+                {
+                  type: 'hidden',
+                  name: 'parent',
+                  value: parent
+                },
+                ...(addControls || [])
+              ],
+              onSubmit: async (payload: any) => {
+                const labelKey = labelField || 'label';
+                const valueKey = valueField || 'value';
+                // 派发确认添加事件
+                customAddPrevent = await this.dispatchOptionEvent(
+                  'addConfirm',
+                  {
+                    item: {
+                      [labelKey]: payload[labelKey],
+                      [valueKey]: payload[valueKey] ?? payload[labelKey]
+                    }
+                  }
+                );
+
+                return !customAddPrevent;
+              }
+            }
+          },
+          ctx
+        );
+
+    // 派发确认添加事件
+    if (skipForm) {
+      // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+      const prevent = await this.dispatchOptionEvent('addConfirm', {
+        item: result
+      });
+
+      if (prevent) {
+        return;
+      }
+    } else if (customAddPrevent) {
+      return;
+    }
+
+    // 单独发请求
+    if (skipForm && addApi) {
+      try {
+        const payload = await env.fetcher(addApi!, result, {
+          method: 'post'
+        });
+
+        if (!payload.ok) {
+          !(addApi as BaseApiObject).silent &&
+            env.notify(
+              'error',
+              (addApi as BaseApiObject)?.messages?.failed ??
+                (payload.msg || __('Options.createFailed'))
+            );
+          result = null;
+        } else {
+          result = payload.data || result;
+        }
+      } catch (e) {
+        result = null;
+        console.error(e);
+        !(addApi as BaseApiObject).silent && env.notify('error', e.message);
+      }
+    }
+
+    // 有 result 说明弹框点了确认。否则就是取消了。
+    if (!result) {
+      return;
+    }
+
+    // 没走服务端的。
+    if (!result.hasOwnProperty(valueField || 'value')) {
+      result = {
+        ...result,
+        [valueField || 'value']: result[labelField || 'label']
+      };
+    }
+    // 触发事件通知
+    // 废弃，不推荐使用
+    const isPrevented = await this.oldDispatchOptionEvent('add', {
+      ...result,
+      idx
+    });
+
+    if (isPrevented) {
+      return;
+    }
+
+    const ret = await callback?.(result);
+
+    if (ret === false) {
+      // 如果回调里面返回 false，就不继续了。
+      return;
+    } else if (
+      // 如果是懒加载的，只懒加载当前节点。
+      (parent?.hasOwnProperty(deferField) && parent[deferField]) ||
+      parent?.defer
+    ) {
+      await this.deferLoad(parent);
+    } else if (source && addApi) {
+      // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
+      // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
+      this.reload();
+    } else {
+      // 否则直接前端变更 options
+      let options = model.options.concat();
+      if (Array.isArray(idx)) {
+        options = spliceTree(options, idx, 0, {...result});
+      } else {
+        ~idx ? options.splice(idx, 0, {...result}) : options.push({...result});
+      }
+      model.setOptions(options, this.changeOptionValue, data);
+    }
+  }
+
+  @autobind
+  async handleOptionEdit(
+    value: any,
+    origin: any = value,
+    skipForm: boolean = false,
+    callback?: (value: any) => any
+  ) {
+    let {
+      editControls,
+      editDialog,
+      disabled,
+      labelField,
+      valueField,
+      onOpenDialog,
+      editApi,
+      editInitApi,
+      env,
+      source,
+      data,
+      formItem: model,
+      optionLabel,
+      translate: __
+    } = this.props;
+
+    if (disabled || !model) {
+      return;
+    }
+
+    if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
+      editControls = [
+        {
+          type: 'text',
+          name: labelField || 'label',
+          label: false,
+          placeholder: __('Options.addPlaceholder')
+        }
+      ];
+    }
+
+    let customEditPrevent = false;
+    let result = skipForm
+      ? value
+      : await onOpenDialog(
+          {
+            type: 'dialog',
+            title: __('Options.editLabel', {
+              label: optionLabel || __('Options.label')
+            }),
+            ...editDialog,
+            body: {
+              type: 'form',
+              initApi: editInitApi,
+              api: editApi,
+              controls: editControls,
+              onSubmit: async (payload: any) => {
+                const labelKey = labelField || 'label';
+                const valueKey = valueField || 'value';
+                // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+                customEditPrevent = await this.dispatchOptionEvent(
+                  'editConfirm',
+                  {
+                    item: {
+                      [labelKey]: payload[labelKey],
+                      [valueKey]: payload[valueKey] ?? payload[labelKey]
+                    }
+                  }
+                );
+
+                return !customEditPrevent;
+              }
+            }
+          },
+          createObject(data, value)
+        );
+
+    if (skipForm) {
+      // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+      const prevent = await this.dispatchOptionEvent('editConfirm', {
+        item: result
+      });
+
+      if (prevent) {
+        return;
+      }
+    } else if (customEditPrevent) {
+      return;
+    }
+
+    // 单独发请求
+    if (skipForm && editApi) {
+      try {
+        const payload = await env.fetcher(
+          editApi!,
+          createObject(data, result),
+          {
+            method: 'post'
+          }
+        );
+
+        if (!payload.ok) {
+          !(editApi as BaseApiObject).silent &&
+            env.notify(
+              'error',
+              (editApi as BaseApiObject)?.messages?.failed ??
+                (payload.msg || __('saveFailed'))
+            );
+          result = null;
+        } else {
+          result = payload.data || result;
+        }
+      } catch (e) {
+        result = null;
+        console.error(e);
+        !(editApi as BaseApiObject).silent && env.notify('error', e.message);
+      }
+    }
+
+    // 没有结果，说明取消了。
+    if (!result) {
+      return;
+    }
+    // 触发事件通知
+    // 废弃，不推荐使用
+    const isPrevented = await this.oldDispatchOptionEvent('edit', result);
+
+    if (isPrevented) {
+      return;
+    }
+
+    const ret = await callback?.(result);
+
+    if (ret === false) {
+      // 如果回调里面返回 false，就不继续了。
+      return;
+    } else if (source && editApi) {
+      this.reload();
+    } else {
+      const indexes = findTreeIndex(model.options, item => item === origin);
+
+      if (indexes) {
+        model.setOptions(
+          spliceTree(model.options, indexes, 1, {
+            ...origin,
+            ...result
+          }),
+          this.changeOptionValue,
+          data
+        );
+      }
+    }
+  }
+
+  @autobind
+  async handleOptionDelete(value: any, callback?: (value: any) => any) {
+    let {
+      deleteConfirmText,
+      disabled,
+      data,
+      deleteApi,
+      onDelete,
+      env,
+      formItem: model,
+      source,
+      valueField,
+      translate: __
+    } = this.props;
+
+    if (disabled || !model) {
+      return;
+    }
+
+    const ctx = createObject(data, value);
+
+    // 如果配置了 deleteConfirmText 让用户先确认。
+    const confirmed = deleteConfirmText
+      ? await env.confirm(filter(__(deleteConfirmText), ctx))
+      : true;
+    if (!confirmed) {
+      return;
+    }
+
+    // 触发事件通知
+    // 废弃，不推荐使用
+    const isPrevented = await this.oldDispatchOptionEvent('delete', ctx);
+    if (isPrevented) {
+      return;
+    }
+
+    // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
+    const delConfirmPrevent = await this.dispatchOptionEvent('deleteConfirm', {
+      item: value
+    });
+    if (delConfirmPrevent) {
+      return;
+    }
+
+    // 通过 deleteApi 删除。
+    try {
+      if (deleteApi) {
+        const result = await env.fetcher(deleteApi!, ctx, {
+          method: 'delete'
+        });
+        if (!result.ok) {
+          !(deleteApi as BaseApiObject).silent &&
+            env.notify(
+              'error',
+              (deleteApi as BaseApiObject)?.messages?.failed ??
+                (result.msg || __('deleteFailed'))
+            );
+          return;
+        }
+      }
+
+      // 由外部代码实现删除逻辑
+      if (onDelete) {
+        onDelete(ctx);
+      }
+
+      const ret = callback?.(ctx);
+
+      if (ret === false) {
+        // 如果回调里面返回 false，就不继续了。
+        return;
+      } else if (source) {
+        this.reload();
+      } else {
+        const options = model.options.concat();
+        const indexes = findTreeIndex(
+          options,
+          item => item[valueField || 'value'] == value[valueField || 'value']
+        );
+
+        if (indexes) {
+          model.setOptions(
+            spliceTree(options, indexes, 1),
+            this.changeOptionValue,
+            data
+          );
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      !(deleteApi as BaseApiObject).silent && env.notify('error', e.message);
+    }
+  }
+
+  render(): React.ReactNode {
+    const {
+      value,
+      formItem,
+      addApi,
+      editApi,
+      deleteApi,
+      creatable,
+      editable,
+      removable,
+      enableNodePath,
+      pathSeparator,
+      delimiter = ',',
+      labelField = 'label',
+      valueField = 'value',
+      translate: __
+    } = this.props;
+
+    const {nodePathArray, nodeValueArray} = normalizeNodePath(
+      value,
+      enableNodePath,
+      labelField,
+      valueField,
+      pathSeparator,
+      delimiter
+    );
+
+    const Control = this.config.component;
+
+    return (
+      <Control
+        {...this.props}
+        placeholder={__(this.props.placeholder)}
+        ref={this.inputRef}
+        options={formItem ? formItem.filteredOptions : []}
+        onToggle={this.handleToggle}
+        onToggleAll={this.handleToggleAll}
+        selectedOptions={
+          formItem
+            ? formItem.getSelectedOptions(
+                value,
+                enableNodePath ? nodeValueArray : undefined
+              )
+            : []
+        }
+        nodePath={nodePathArray}
+        loading={formItem ? formItem.loading : false}
+        setLoading={this.setLoading}
+        setOptions={this.setOptions}
+        syncOptions={this.syncOptions}
+        reloadOptions={this.reload}
+        deferLoad={this.deferLoad}
+        leftDeferLoad={this.leftDeferLoad}
+        expandTreeOptions={this.expandTreeOptions}
+        creatable={
+          creatable !== false && isEffectiveApi(addApi) ? true : creatable
+        }
+        editable={editable || (editable !== false && isEffectiveApi(editApi))}
+        removable={
+          removable || (removable !== false && isEffectiveApi(deleteApi))
+        }
+        onAdd={this.handleOptionAdd}
+        onEdit={this.handleOptionEdit}
+        onDelete={this.handleOptionDelete}
+      />
+    );
+  }
+}
+
 export function registerOptionsControl(config: OptionsConfig) {
   const Control = config.component;
 
-  class FormOptionsItem extends React.Component<OptionsProps, any> {
+  class FormOptionsItem extends OptionsControlBase<OptionsProps> {
     static displayName = `OptionsControl(${config.type})`;
     static defaultProps = {
       delimiter: ',',
@@ -309,1103 +1408,8 @@ export function registerOptionsControl(config: OptionsConfig) {
       : [];
     static ComposedComponent = Control;
 
-    toDispose: Array<() => void> = [];
-
-    input: any;
-    mounted = false;
-
     constructor(props: OptionsProps) {
-      super(props);
-
-      const {
-        initFetch,
-        formItem,
-        source,
-        data,
-        setPrinstineValue,
-        defaultValue,
-        multiple,
-        joinValues,
-        extractValue,
-        addHook,
-        formInited,
-        valueField,
-        options,
-        value,
-        defaultCheckAll
-      } = props;
-
-      if (!formItem) {
-        return;
-      }
-
-      formItem.setOptions(
-        normalizeOptions(options, undefined, valueField),
-        this.changeOptionValue,
-        data
-      );
-
-      this.toDispose.push(
-        reaction(
-          () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-          () => this.mounted && this.forceUpdate()
-        )
-      );
-
-      // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
-      if (
-        multiple &&
-        defaultCheckAll &&
-        formItem.filteredOptions?.length &&
-        !source
-      ) {
-        this.defaultCheckAll();
-      }
-
-      let loadOptions: boolean = initFetch !== false;
-      let setInitValue: Function | null = null;
-
-      if (joinValues === false && defaultValue) {
-        setInitValue = () => {
-          const selectedOptions = extractValue
-            ? formItem
-                .getSelectedOptions(value)
-                .map(
-                  (selectedOption: Option) =>
-                    selectedOption[valueField || 'value']
-                )
-            : formItem.getSelectedOptions(value);
-          setPrinstineValue(
-            multiple ? selectedOptions.concat() : selectedOptions[0]
-          );
-        };
-      }
-
-      if (loadOptions && config.autoLoadOptionsFromSource !== false) {
-        this.toDispose.push(
-          formInited || !addHook
-            ? formItem.addInitHook(async () => {
-                await this.reload();
-                setInitValue?.();
-              })
-            : addHook(async (data: any) => {
-                await this.initOptions(data);
-                setInitValue?.();
-              }, 'init')
-        );
-      } else {
-        setInitValue?.();
-      }
-    }
-
-    componentDidMount() {
-      this.mounted = true;
-      this.normalizeValue();
-    }
-
-    shouldComponentUpdate(nextProps: OptionsProps) {
-      if (config.strictMode === false || nextProps.strictMode === false) {
-        return true;
-      } else if (nextProps.source || nextProps.autoComplete) {
-        return true;
-      } else if (nextProps.formItem?.expressionsInOptions) {
-        return true;
-      } else if (anyChanged(detectProps, this.props, nextProps)) {
-        return true;
-      }
-
-      return false;
-    }
-
-    componentDidUpdate(prevProps: OptionsProps) {
-      const props = this.props;
-      const formItem = props.formItem as IFormItemStore;
-
-      if (!props.source && prevProps.options !== props.options && formItem) {
-        formItem.setOptions(
-          normalizeOptions(props.options || [], undefined, props.valueField),
-          this.changeOptionValue,
-          props.data
-        );
-        this.normalizeValue();
-      } else if (
-        config.autoLoadOptionsFromSource !== false &&
-        (props.formInited || typeof props.formInited === 'undefined') &&
-        props.source &&
-        formItem &&
-        (prevProps.source !== props.source || prevProps.data !== props.data)
-      ) {
-        if (isPureVariable(props.source as string)) {
-          const prevOptions = resolveVariableAndFilter(
-            prevProps.source as string,
-            prevProps.data,
-            '| raw'
-          );
-          const options = resolveVariableAndFilter(
-            props.source as string,
-            props.data,
-            '| raw'
-          );
-
-          if (prevOptions !== options) {
-            formItem.loadOptionsFromDataScope(
-              props.source as string,
-              props.data,
-              this.changeOptionValue
-            );
-
-            this.normalizeValue();
-          }
-        } else if (
-          isEffectiveApi(props.source, props.data) &&
-          isApiOutdated(
-            prevProps.source,
-            props.source,
-            prevProps.data,
-            props.data
-          )
-        ) {
-          formItem
-            .loadOptions(
-              props.source,
-              props.data,
-              undefined,
-              true,
-              this.changeOptionValue
-            )
-            .then(() => this.normalizeValue());
-        }
-      }
-
-      if (prevProps.value !== props.value || formItem?.expressionsInOptions) {
-        formItem?.syncOptions(undefined, props.data);
-      }
-    }
-
-    componentWillUnmount() {
-      this.props.removeHook?.(this.reload, 'init');
-      this.mounted = false;
-      this.toDispose.forEach(fn => fn());
-      this.toDispose = [];
-    }
-
-    // 不推荐使用，缺少组件值
-    async oldDispatchOptionEvent(eventName: string, eventData: any = '') {
-      const {dispatchEvent, options} = this.props;
-      const rendererEvent = await dispatchEvent(
-        eventName,
-        resolveEventData(
-          this.props,
-          {value: eventData, options, items: options} // 为了保持名字统一
-        )
-      );
-      // 返回阻塞标识
-      return !!rendererEvent?.prevented;
-    }
-
-    async dispatchOptionEvent(eventName: string, eventData: any = '') {
-      const {dispatchEvent, options, value} = this.props;
-      const rendererEvent = await dispatchEvent(
-        eventName,
-        resolveEventData(
-          this.props,
-          {value, options, items: options, ...eventData} // 为了保持名字统一
-        )
-      );
-      // 返回阻塞标识
-      return !!rendererEvent?.prevented;
-    }
-
-    doAction(action: ActionObject, data: object, throwErrors: boolean) {
-      const {resetValue, onChange} = this.props;
-      const actionType = action?.actionType as string;
-
-      if (actionType === 'clear') {
-        onChange?.('');
-      } else if (actionType === 'reset') {
-        onChange?.(resetValue ?? '');
-      }
-    }
-
-    // 当前值，跟设置预期的值格式不一致时自动转换。
-    normalizeValue() {
-      const {
-        joinValues,
-        extractValue,
-        value,
-        multiple,
-        formItem,
-        valueField,
-        enableNodePath,
-        pathSeparator,
-        onChange
-      } = this.props;
-
-      if (!formItem || joinValues !== false || !formItem.options.length) {
-        return;
-      }
-
-      if (
-        extractValue === false &&
-        (typeof value === 'string' || typeof value === 'number')
-      ) {
-        const selectedOptions = formItem.getSelectedOptions(value);
-        onChange?.(multiple ? selectedOptions.concat() : selectedOptions[0]);
-      } else if (
-        extractValue === true &&
-        value &&
-        !(
-          (Array.isArray(value) &&
-            value.every(
-              val => typeof val === 'string' || typeof val === 'number'
-            )) ||
-          typeof value === 'string' ||
-          typeof value === 'number'
-        )
-      ) {
-        const selectedOptions = formItem
-          .getSelectedOptions(value)
-          .map(
-            (selectedOption: Option) => selectedOption[valueField || 'value']
-          );
-        onChange?.(multiple ? selectedOptions.concat() : selectedOptions[0]);
-      }
-    }
-
-    getWrappedInstance() {
-      return this.input;
-    }
-
-    @autobind
-    inputRef(ref: any) {
-      this.input = ref;
-    }
-
-    @autobind
-    async handleToggle(
-      option: Option,
-      submitOnChange?: boolean,
-      changeImmediately?: boolean
-    ) {
-      const {onChange, formItem, value} = this.props;
-
-      if (!formItem) {
-        return;
-      }
-
-      let newValue: string | Array<Option> | Option = this.toggleValue(
-        option,
-        value
-      );
-
-      const isPrevented = await this.dispatchOptionEvent('change', {
-        value: newValue
-      });
-      isPrevented ||
-        (onChange && onChange(newValue, submitOnChange, changeImmediately));
-    }
-
-    /**
-     * 初始化时处理默认全选逻辑
-     */
-    defaultCheckAll() {
-      const {value, formItem, setPrinstineValue} = this.props;
-      // 如果有默认值\回填值直接返回
-      if (!formItem || formItem.getSelectedOptions(value).length) {
-        return;
-      }
-      let valueArray = formItem.filteredOptions.concat();
-      const newValue = this.formatValueArray(valueArray);
-      setPrinstineValue?.(newValue);
-    }
-
-    /**
-     * 选中的值经过joinValues和delimiter等规则处理输出规定格式的值
-     * @param valueArray 选中值的数组
-     * @returns 通过joinValues和delimiter等规则输出规定格式的值
-     */
-    formatValueArray(valueArray: Array<Option>) {
-      const {
-        joinValues,
-        extractValue,
-        valueField,
-        delimiter,
-        resetValue,
-        multiple
-      } = this.props;
-      let newValue: string | Array<Option> | Option = '';
-      if (multiple) {
-        /** 兼容tree数据结构 */
-        newValue =
-          getTreeDepth(valueArray) > 1 ? flattenTree(valueArray) : valueArray;
-
-        if (joinValues) {
-          newValue = (newValue as Array<any>)
-            .map(item => item[valueField || 'value'])
-            .filter(item => item != null) /** tree的父节点可能没有value值 */
-            .join(delimiter);
-        } else if (extractValue) {
-          newValue = (newValue as Array<any>)
-            .map(item => item[valueField || 'value'])
-            .filter(item => item != null);
-        }
-      } else {
-        newValue = valueArray[0] || resetValue;
-
-        if (joinValues && newValue) {
-          newValue = (newValue as any)[valueField || 'value'];
-        }
-      }
-      return newValue;
-    }
-
-    @autobind
-    async handleToggleAll() {
-      const {value, onChange, formItem, valueField} = this.props;
-
-      if (!formItem) {
-        return;
-      }
-      const selectedOptions = formItem.getSelectedOptions(value);
-      /** 打平并过滤掉valueField不存在的case，保证全选时对比length一致 */
-      const filteredOptions = flattenTree(
-        formItem.filteredOptions.concat()
-      ).filter(item => item != null && item[valueField || 'value'] != null);
-      let valueArray =
-        selectedOptions.length === filteredOptions.length
-          ? []
-          : formItem.filteredOptions.concat();
-      const newValue = this.formatValueArray(valueArray);
-      const isPrevented = await this.dispatchOptionEvent('change', {
-        value: newValue
-      });
-      isPrevented || (onChange && onChange(newValue));
-    }
-
-    toggleValue(option: Option, originValue?: any) {
-      const {
-        joinValues,
-        extractValue,
-        valueField,
-        delimiter,
-        clearable,
-        resetValue,
-        multiple,
-        formItem
-      } = this.props;
-
-      let valueArray =
-        originValue !== undefined
-          ? formItem!.getSelectedOptions(originValue).concat()
-          : [];
-
-      const idx = findIndex(
-        valueArray,
-        optionValueCompare(option[valueField || 'value'], valueField || 'value')
-      );
-      let newValue: string | Array<Option> | Option = '';
-
-      if (multiple) {
-        if (~idx) {
-          valueArray.splice(idx, 1);
-        } else {
-          valueArray.push(option);
-        }
-
-        newValue = valueArray;
-
-        if (joinValues) {
-          newValue = (newValue as Array<any>)
-            .map(item => item[valueField || 'value'])
-            .join(delimiter);
-        } else if (extractValue) {
-          newValue = (newValue as Array<any>).map(
-            item => item[valueField || 'value']
-          );
-        }
-      } else {
-        if (~idx && clearable) {
-          valueArray.splice(idx, 1);
-        } else {
-          valueArray = [option];
-        }
-
-        newValue = valueArray[0] || resetValue;
-
-        if ((joinValues || extractValue) && newValue) {
-          newValue = (newValue as any)[valueField || 'value'];
-        }
-      }
-
-      return newValue;
-    }
-
-    // 当有 action 触发，如果指定了 reload 目标组件，有可能会来到这里面来
-    @autobind
-    reload() {
-      return this.reloadOptions();
-    }
-
-    @autobind
-    reloadOptions(setError?: boolean, isInit = false, data = this.props.data) {
-      const {source, formItem, onChange, setPrinstineValue, valueField} =
-        this.props;
-
-      if (formItem && isPureVariable(source as string)) {
-        isAlive(formItem) &&
-          formItem.loadOptionsFromDataScope(
-            source as string,
-            data,
-            this.changeOptionValue
-          );
-        return;
-      } else if (!formItem || !isEffectiveApi(source, data)) {
-        return;
-      }
-
-      return isAlive(formItem)
-        ? formItem.loadOptions(
-            source,
-            data,
-            undefined,
-            false,
-            isInit ? setPrinstineValue : onChange,
-            setError
-          )
-        : undefined;
-    }
-
-    @autobind
-    async deferLoad(option: Option) {
-      const {deferApi, source, env, formItem, data} = this.props;
-      const api = option.deferApi || deferApi || source;
-
-      if (!api) {
-        env.notify(
-          'error',
-          '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
-        );
-        return;
-      }
-
-      const json = await formItem?.deferLoadOptions(
-        option,
-        api,
-        createObject(data, option)
-      );
-
-      // 触发事件通知,加载完成
-      // 废弃，不推荐使用
-      this.oldDispatchOptionEvent('loadFinished', json);
-
-      // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-      this.dispatchOptionEvent('deferLoadFinished', {result: json});
-    }
-
-    @autobind
-    leftDeferLoad(option: Option, leftOptions: Option) {
-      const {deferApi, source, env, formItem, data} = this.props;
-      const api = option.deferApi || deferApi || source;
-
-      if (!api) {
-        env.notify(
-          'error',
-          '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
-        );
-        return;
-      }
-
-      formItem?.deferLoadLeftOptions(
-        option,
-        leftOptions,
-        api,
-        createObject(data, option)
-      );
-    }
-
-    @autobind
-    expandTreeOptions(nodePathArr: any[]) {
-      const {deferApi, source, env, formItem, data} = this.props;
-      const api = deferApi || source;
-
-      if (!api) {
-        env.notify(
-          'error',
-          '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
-        );
-        return;
-      }
-
-      formItem?.expandTreeOptions(nodePathArr, api, createObject(data));
-    }
-
-    @autobind
-    async initOptions(data: any) {
-      await this.reloadOptions(false, true);
-      const {formItem, name, multiple, defaultCheckAll} = this.props;
-      if (!formItem) {
-        return;
-      }
-      if (isAlive(formItem) && formItem.value) {
-        setVariable(data, name!, formItem.value);
-      }
-
-      // 默认全选
-      if (multiple && defaultCheckAll && formItem.filteredOptions?.length) {
-        this.defaultCheckAll();
-      }
-    }
-
-    focus() {
-      this.input && this.input.focus && this.input.focus();
-    }
-
-    @autobind
-    changeOptionValue(value: any) {
-      const {
-        onChange,
-        formInited,
-        setPrinstineValue,
-        value: originValue
-      } = this.props;
-
-      if (formInited === false) {
-        originValue === undefined && setPrinstineValue?.(value);
-      } else {
-        onChange?.(value);
-      }
-    }
-
-    @autobind
-    setOptions(options: Array<any>, skipNormalize = false) {
-      const formItem = this.props.formItem as IFormItemStore;
-      formItem &&
-        formItem.setOptions(
-          skipNormalize
-            ? options
-            : normalizeOptions(options || [], undefined, this.props.valueField),
-          this.changeOptionValue,
-          this.props.data
-        );
-    }
-
-    @autobind
-    syncOptions() {
-      const formItem = this.props.formItem as IFormItemStore;
-      formItem && formItem.syncOptions(undefined, this.props.data);
-    }
-
-    @autobind
-    setLoading(value: boolean) {
-      const formItem = this.props.formItem as IFormItemStore;
-      formItem && formItem.setLoading(value);
-    }
-
-    @autobind
-    async handleOptionAdd(
-      idx: number | Array<number> = -1,
-      value?: any,
-      skipForm: boolean = false,
-      callback?: (value: any) => any
-    ) {
-      let {
-        addControls,
-        addDialog,
-        disabled,
-        labelField,
-        onOpenDialog,
-        optionLabel,
-        addApi,
-        source,
-        data,
-        valueField,
-        deferField,
-        formItem: model,
-        createBtnLabel,
-        env,
-        translate: __
-      } = this.props;
-
-      // 禁用或者没有配置 name
-      if (disabled || !model) {
-        return;
-      }
-
-      // 用户没有配置表单项，则自动创建一个 label 输入
-      if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
-        addControls = [
-          {
-            type: 'text',
-            name: labelField || 'label',
-            label: false,
-            required: true,
-            placeholder: __('Options.addPlaceholder')
-          }
-        ];
-      }
-      const parent = Array.isArray(idx)
-        ? getTree(model.options, idx.slice(0, -1))
-        : undefined;
-
-      const ctx: any = createObject(
-        data,
-        Array.isArray(idx)
-          ? {
-              parent: parent,
-              ...value
-            }
-          : value
-      );
-
-      let customAddPrevent = false;
-      let result: any = skipForm
-        ? ctx
-        : await onOpenDialog(
-            {
-              type: 'dialog',
-              title: createBtnLabel || `新增${optionLabel || '选项'}`,
-              ...addDialog,
-              body: {
-                type: 'form',
-                api: addApi,
-                controls: [
-                  {
-                    type: 'hidden',
-                    name: 'idx',
-                    value: idx
-                  },
-                  {
-                    type: 'hidden',
-                    name: 'parent',
-                    value: parent
-                  },
-                  ...(addControls || [])
-                ],
-                onSubmit: async (payload: any) => {
-                  const labelKey = labelField || 'label';
-                  const valueKey = valueField || 'value';
-                  // 派发确认添加事件
-                  customAddPrevent = await this.dispatchOptionEvent(
-                    'addConfirm',
-                    {
-                      item: {
-                        [labelKey]: payload[labelKey],
-                        [valueKey]: payload[valueKey] ?? payload[labelKey]
-                      }
-                    }
-                  );
-
-                  return !customAddPrevent;
-                }
-              }
-            },
-            ctx
-          );
-
-      // 派发确认添加事件
-      if (skipForm) {
-        // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-        const prevent = await this.dispatchOptionEvent('addConfirm', {
-          item: result
-        });
-
-        if (prevent) {
-          return;
-        }
-      } else if (customAddPrevent) {
-        return;
-      }
-
-      // 单独发请求
-      if (skipForm && addApi) {
-        try {
-          const payload = await env.fetcher(addApi!, result, {
-            method: 'post'
-          });
-
-          if (!payload.ok) {
-            !(addApi as BaseApiObject).silent &&
-              env.notify(
-                'error',
-                (addApi as BaseApiObject)?.messages?.failed ??
-                  (payload.msg || __('Options.createFailed'))
-              );
-            result = null;
-          } else {
-            result = payload.data || result;
-          }
-        } catch (e) {
-          result = null;
-          console.error(e);
-          !(addApi as BaseApiObject).silent && env.notify('error', e.message);
-        }
-      }
-
-      // 有 result 说明弹框点了确认。否则就是取消了。
-      if (!result) {
-        return;
-      }
-
-      // 没走服务端的。
-      if (!result.hasOwnProperty(valueField || 'value')) {
-        result = {
-          ...result,
-          [valueField || 'value']: result[labelField || 'label']
-        };
-      }
-      // 触发事件通知
-      // 废弃，不推荐使用
-      const isPrevented = await this.oldDispatchOptionEvent('add', {
-        ...result,
-        idx
-      });
-
-      if (isPrevented) {
-        return;
-      }
-
-      const ret = await callback?.(result);
-
-      if (ret === false) {
-        // 如果回调里面返回 false，就不继续了。
-        return;
-      } else if (
-        // 如果是懒加载的，只懒加载当前节点。
-        (parent?.hasOwnProperty(deferField) && parent[deferField]) ||
-        parent?.defer
-      ) {
-        await this.deferLoad(parent);
-      } else if (source && addApi) {
-        // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
-        // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
-        this.reload();
-      } else {
-        // 否则直接前端变更 options
-        let options = model.options.concat();
-        if (Array.isArray(idx)) {
-          options = spliceTree(options, idx, 0, {...result});
-        } else {
-          ~idx
-            ? options.splice(idx, 0, {...result})
-            : options.push({...result});
-        }
-        model.setOptions(options, this.changeOptionValue, data);
-      }
-    }
-
-    @autobind
-    async handleOptionEdit(
-      value: any,
-      origin: any = value,
-      skipForm: boolean = false,
-      callback?: (value: any) => any
-    ) {
-      let {
-        editControls,
-        editDialog,
-        disabled,
-        labelField,
-        valueField,
-        onOpenDialog,
-        editApi,
-        editInitApi,
-        env,
-        source,
-        data,
-        formItem: model,
-        optionLabel,
-        translate: __
-      } = this.props;
-
-      if (disabled || !model) {
-        return;
-      }
-
-      if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
-        editControls = [
-          {
-            type: 'text',
-            name: labelField || 'label',
-            label: false,
-            placeholder: __('Options.addPlaceholder')
-          }
-        ];
-      }
-
-      let customEditPrevent = false;
-      let result = skipForm
-        ? value
-        : await onOpenDialog(
-            {
-              type: 'dialog',
-              title: __('Options.editLabel', {
-                label: optionLabel || __('Options.label')
-              }),
-              ...editDialog,
-              body: {
-                type: 'form',
-                initApi: editInitApi,
-                api: editApi,
-                controls: editControls,
-                onSubmit: async (payload: any) => {
-                  const labelKey = labelField || 'label';
-                  const valueKey = valueField || 'value';
-                  // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-                  customEditPrevent = await this.dispatchOptionEvent(
-                    'editConfirm',
-                    {
-                      item: {
-                        [labelKey]: payload[labelKey],
-                        [valueKey]: payload[valueKey] ?? payload[labelKey]
-                      }
-                    }
-                  );
-
-                  return !customEditPrevent;
-                }
-              }
-            },
-            createObject(data, value)
-          );
-
-      if (skipForm) {
-        // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-        const prevent = await this.dispatchOptionEvent('editConfirm', {
-          item: result
-        });
-
-        if (prevent) {
-          return;
-        }
-      } else if (customEditPrevent) {
-        return;
-      }
-
-      // 单独发请求
-      if (skipForm && editApi) {
-        try {
-          const payload = await env.fetcher(
-            editApi!,
-            createObject(data, result),
-            {
-              method: 'post'
-            }
-          );
-
-          if (!payload.ok) {
-            !(editApi as BaseApiObject).silent &&
-              env.notify(
-                'error',
-                (editApi as BaseApiObject)?.messages?.failed ??
-                  (payload.msg || __('saveFailed'))
-              );
-            result = null;
-          } else {
-            result = payload.data || result;
-          }
-        } catch (e) {
-          result = null;
-          console.error(e);
-          !(editApi as BaseApiObject).silent && env.notify('error', e.message);
-        }
-      }
-
-      // 没有结果，说明取消了。
-      if (!result) {
-        return;
-      }
-      // 触发事件通知
-      // 废弃，不推荐使用
-      const isPrevented = await this.oldDispatchOptionEvent('edit', result);
-
-      if (isPrevented) {
-        return;
-      }
-
-      const ret = await callback?.(result);
-
-      if (ret === false) {
-        // 如果回调里面返回 false，就不继续了。
-        return;
-      } else if (source && editApi) {
-        this.reload();
-      } else {
-        const indexes = findTreeIndex(model.options, item => item === origin);
-
-        if (indexes) {
-          model.setOptions(
-            spliceTree(model.options, indexes, 1, {
-              ...origin,
-              ...result
-            }),
-            this.changeOptionValue,
-            data
-          );
-        }
-      }
-    }
-
-    @autobind
-    async handleOptionDelete(value: any, callback?: (value: any) => any) {
-      let {
-        deleteConfirmText,
-        disabled,
-        data,
-        deleteApi,
-        onDelete,
-        env,
-        formItem: model,
-        source,
-        valueField,
-        translate: __
-      } = this.props;
-
-      if (disabled || !model) {
-        return;
-      }
-
-      const ctx = createObject(data, value);
-
-      // 如果配置了 deleteConfirmText 让用户先确认。
-      const confirmed = deleteConfirmText
-        ? await env.confirm(filter(__(deleteConfirmText), ctx))
-        : true;
-      if (!confirmed) {
-        return;
-      }
-
-      // 触发事件通知
-      // 废弃，不推荐使用
-      const isPrevented = await this.oldDispatchOptionEvent('delete', ctx);
-      if (isPrevented) {
-        return;
-      }
-
-      // 避免产生breakchange，增加新事件名，用来更正之前的设计问题
-      const delConfirmPrevent = await this.dispatchOptionEvent(
-        'deleteConfirm',
-        {
-          item: value
-        }
-      );
-      if (delConfirmPrevent) {
-        return;
-      }
-
-      // 通过 deleteApi 删除。
-      try {
-        if (deleteApi) {
-          const result = await env.fetcher(deleteApi!, ctx, {
-            method: 'delete'
-          });
-          if (!result.ok) {
-            !(deleteApi as BaseApiObject).silent &&
-              env.notify(
-                'error',
-                (deleteApi as BaseApiObject)?.messages?.failed ??
-                  (result.msg || __('deleteFailed'))
-              );
-            return;
-          }
-        }
-
-        // 由外部代码实现删除逻辑
-        if (onDelete) {
-          onDelete(ctx);
-        }
-
-        const ret = callback?.(ctx);
-
-        if (ret === false) {
-          // 如果回调里面返回 false，就不继续了。
-          return;
-        } else if (source) {
-          this.reload();
-        } else {
-          const options = model.options.concat();
-          const indexes = findTreeIndex(
-            options,
-            item => item[valueField || 'value'] == value[valueField || 'value']
-          );
-
-          if (indexes) {
-            model.setOptions(
-              spliceTree(options, indexes, 1),
-              this.changeOptionValue,
-              data
-            );
-          }
-        }
-      } catch (e) {
-        console.error(e);
-        !(deleteApi as BaseApiObject).silent && env.notify('error', e.message);
-      }
-    }
-
-    render() {
-      const {
-        value,
-        formItem,
-        addApi,
-        editApi,
-        deleteApi,
-        creatable,
-        editable,
-        removable,
-        enableNodePath,
-        pathSeparator,
-        delimiter = ',',
-        labelField = 'label',
-        valueField = 'value',
-        translate: __
-      } = this.props;
-
-      const {nodePathArray, nodeValueArray} = normalizeNodePath(
-        value,
-        enableNodePath,
-        labelField,
-        valueField,
-        pathSeparator,
-        delimiter
-      );
-
-      return (
-        <Control
-          {...this.props}
-          placeholder={__(this.props.placeholder)}
-          ref={this.inputRef}
-          options={formItem ? formItem.filteredOptions : []}
-          onToggle={this.handleToggle}
-          onToggleAll={this.handleToggleAll}
-          selectedOptions={
-            formItem
-              ? formItem.getSelectedOptions(
-                  value,
-                  enableNodePath ? nodeValueArray : undefined
-                )
-              : []
-          }
-          nodePath={nodePathArray}
-          loading={formItem ? formItem.loading : false}
-          setLoading={this.setLoading}
-          setOptions={this.setOptions}
-          syncOptions={this.syncOptions}
-          reloadOptions={this.reload}
-          deferLoad={this.deferLoad}
-          leftDeferLoad={this.leftDeferLoad}
-          expandTreeOptions={this.expandTreeOptions}
-          creatable={
-            creatable !== false && isEffectiveApi(addApi) ? true : creatable
-          }
-          editable={editable || (editable !== false && isEffectiveApi(editApi))}
-          removable={
-            removable || (removable !== false && isEffectiveApi(deleteApi))
-          }
-          onAdd={this.handleOptionAdd}
-          onEdit={this.handleOptionEdit}
-          onDelete={this.handleOptionDelete}
-        />
-      );
+      super(props, config);
     }
   }
 
diff --git a/packages/amis-core/src/renderers/wrapControl.tsx b/packages/amis-core/src/renderers/wrapControl.tsx
index 7dd4ef93d..b037bc145 100644
--- a/packages/amis-core/src/renderers/wrapControl.tsx
+++ b/packages/amis-core/src/renderers/wrapControl.tsx
@@ -27,7 +27,7 @@ import {isAlive} from 'mobx-state-tree';
 import {observer} from 'mobx-react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {withRootStore} from '../WithRootStore';
-import {FormBaseControl, FormItemWrap} from './Item';
+import {FormBaseControl, FormItemConfig, FormItemWrap} from './Item';
 import {Api, DataChangeReason} from '../types';
 import {TableStore} from '../store/table';
 import pick from 'lodash/pick';
@@ -94,7 +94,7 @@ export interface ControlProps {
 
 export function wrapControl<
   T extends React.ComponentType<React.ComponentProps<T> & ControlProps>
->(ComposedComponent: T) {
+>(config: Omit<FormItemConfig, 'component'>, ComposedComponent: T) {
   type OuterProps = JSX.LibraryManagedAttributes<
     T,
     Omit<React.ComponentProps<T>, keyof ControlProps>
@@ -194,7 +194,7 @@ export function wrapControl<
             const model = rootStore.addStore({
               id: guid(),
               path: this.props.$path,
-              storeType: FormItemStore.name,
+              storeType: config.formItemStoreType || FormItemStore.name,
               parentId: store?.id,
               name,
               colIndex: colIndex !== undefined ? colIndex : undefined,
diff --git a/packages/amis-core/src/store/formItem.ts b/packages/amis-core/src/store/formItem.ts
index 47d8f866a..a1e392c53 100644
--- a/packages/amis-core/src/store/formItem.ts
+++ b/packages/amis-core/src/store/formItem.ts
@@ -620,7 +620,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       }
 
       for (let option of options) {
-        if (Array.isArray(option.children)) {
+        if (Array.isArray(option.children) && option.children.length) {
           const childFirst = getFirstAvaibleOption(option.children);
           if (childFirst !== undefined) {
             return childFirst;
diff --git a/packages/amis-core/src/utils/api.ts b/packages/amis-core/src/utils/api.ts
index a3f95814c..57545529a 100644
--- a/packages/amis-core/src/utils/api.ts
+++ b/packages/amis-core/src/utils/api.ts
@@ -66,10 +66,12 @@ export function removeApiRequestAdaptor(adaptor: RequestAdaptor) {
  * 添加全局响应适配器
  * @param adaptor
  */
-export function addApiResponseAdator(adaptor: ResponseAdaptor) {
+export function addApiResponseAdaptor(adaptor: ResponseAdaptor) {
   responseAdaptors.push(adaptor);
   return () => removeApiResponseAdaptor(adaptor);
 }
+// :(  之前写错了，这里为了让以前的代码能继续跑，暂时保留
+export const addApiResponseAdator = addApiResponseAdaptor;
 
 /**
  * 删除全局响应适配器
diff --git a/packages/amis-core/src/utils/attachmentAdpator.ts b/packages/amis-core/src/utils/attachmentAdpator.ts
index 10a323632..cd0d4a989 100644
--- a/packages/amis-core/src/utils/attachmentAdpator.ts
+++ b/packages/amis-core/src/utils/attachmentAdpator.ts
@@ -28,6 +28,8 @@ export function attachmentAdpator(
         let matches = disposition.match(filenameRegex);
         if (matches && matches.length) {
           filename = matches[1].replace(`UTF-8''`, '').replace(/['"]/g, '');
+        } else {
+          filename = disposition?.split(';')[1];
         }
 
         // 很可能是中文被 url-encode 了
diff --git a/packages/amis-core/src/utils/debug.tsx b/packages/amis-core/src/utils/debug.tsx
index edbba4b87..06de32844 100644
--- a/packages/amis-core/src/utils/debug.tsx
+++ b/packages/amis-core/src/utils/debug.tsx
@@ -6,10 +6,12 @@ import React, {Component, useEffect, useRef, useState, version} from 'react';
 import cx from 'classnames';
 import {findDOMNode, render, unmountComponentAtNode} from 'react-dom';
 // import {createRoot} from 'react-dom/client';
-import {autorun, observable} from 'mobx';
+import {autorun, observable, action} from 'mobx';
 import {observer} from 'mobx-react';
 import {uuidv4, importLazyComponent} from './helper';
 import position from './position';
+import {resolveVariableAndFilter} from './resolveVariableAndFilter';
+import {callStrFunction} from './api';
 
 export const JsonView = React.lazy(() =>
   import('react-json-view').then(importLazyComponent)
@@ -19,7 +21,7 @@ class Log {
   @observable cat = '';
   @observable level = '';
   @observable msg = '';
-  @observable ext? = '';
+  @observable ext?: any = '';
 }
 
 class AMISDebugStore {
@@ -62,6 +64,25 @@ class AMISDebugStore {
    * 字段值文本最大展示长度
    */
   @observable ellipsisThreshold: number;
+
+  @action.bound
+  open() {
+    this.isExpanded = true;
+    this.inspectMode = true;
+  }
+
+  @action.bound
+  close() {
+    this.isExpanded = false;
+    this.activeId = '';
+    this.hoverId = '';
+    this.inspectMode = false;
+  }
+
+  @action.bound
+  toggleInspectMode() {
+    this.inspectMode = !this.inspectMode;
+  }
 }
 
 const store = new AMISDebugStore();
@@ -86,12 +107,16 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
             <div className="AMISDebug-logLineMsg">
               [{log.cat}] {log.msg}
             </div>
-            {log.ext ? (
+            {(typeof log.ext === 'string' &&
+              (log.ext.startsWith('{') || log.ext.startsWith('['))) ||
+            typeof log.ext === 'object' ? (
               <React.Suspense fallback={<div>Loading...</div>}>
                 <JsonView
                   name={null}
                   theme="monokai"
-                  src={JSON.parse(log.ext)}
+                  src={
+                    typeof log.ext === 'string' ? parseJson(log.ext) : log.ext
+                  }
                   collapsed={true}
                   enableClipboard={false}
                   displayDataTypes={false}
@@ -99,7 +124,9 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
                   iconStyle="square"
                 />
               </React.Suspense>
-            ) : null}
+            ) : (
+              <pre className="AMISDebug-value">{JSON.stringify(log.ext)}</pre>
+            )}
           </div>
         );
       })}
@@ -188,6 +215,36 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
     };
   }, [isResizing]);
 
+  const handleInputKeyUp = React.useCallback((e: React.KeyboardEvent<any>) => {
+    if (e.key === 'Enter') {
+      const input = e.target as HTMLInputElement;
+      const expression = input.value;
+      input.value = '';
+
+      try {
+        const activeId = store.activeId;
+        const ctx = ComponentInfo[activeId]?.component.props.data || {};
+        const result = expression.startsWith('${')
+          ? resolveVariableAndFilter(expression, ctx, '| raw')
+          : callStrFunction(
+              new Function('data', `with(data) {return ${expression};}`),
+              ['data'],
+              ctx
+            );
+
+        debug('debug', `evaluate expression \`${expression}\``, result);
+      } catch (e) {
+        debug(
+          'error',
+          `evaluate expression \`${expression}\``,
+          `Error: ${e.message}`
+        );
+      } finally {
+        store.tab = 'log';
+      }
+    }
+  }, []);
+
   return (
     <div
       className={cx('AMISDebug', {
@@ -196,13 +253,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
       })}
       ref={panelRef}
     >
-      <div
-        className="AMISDebug-toggle"
-        title="open debug"
-        onClick={() => {
-          store.isExpanded = true;
-        }}
-      >
+      <div className="AMISDebug-toggle" title="open debug" onClick={store.open}>
         {store.isExpanded ? (
           <i className="fas fa-times"></i>
         ) : (
@@ -210,15 +261,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
         )}
       </div>
       <div className={cx('AMISDebug-content')}>
-        <div
-          className="AMISDebug-close"
-          title="Close"
-          onClick={() => {
-            store.isExpanded = false;
-            store.activeId = '';
-            store.hoverId = '';
-          }}
-        >
+        <div className="AMISDebug-close" title="Close" onClick={store.close}>
           <i className="fas fa-times" />
         </div>
         <div
@@ -285,17 +328,48 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
         ) : null}
         {store.tab === 'inspect' ? (
           <div className="AMISDebug-inspect">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 1024 1024"
+              className={`AMISDebug-inspectIcon ${
+                store.inspectMode ? 'is-active' : ''
+              }`}
+              onClick={store.toggleInspectMode}
+            >
+              <path d="M64 192L128 128h768l64 64v384H896v-384H128v512h320V768H128l-64-64v-512z m941.226667 621.226667L576 384v602.496l173.226667-173.226667h256zM640 832v-293.504l210.773333 210.773333h-128L640 832z" />
+            </svg>
+            {store.inspectMode ? (
+              <span>Select an element in the page to inspect it.</span>
+            ) : (
+              <span>Click to inspect an element.</span>
+            )}
             {activeId ? (
               <>
                 <h3>
                   Component:{' '}
-                  <span className="primary">{activeComponentInspect.name}</span>
+                  <span className="primary">
+                    {activeComponentInspect?.name}
+                  </span>
                 </h3>
                 {stackDataView}
               </>
-            ) : (
-              'Click component to display inspect'
-            )}
+            ) : null}
+          </div>
+        ) : null}
+        {activeId ? (
+          <div className="AMISDebug-footer">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 1024 1024"
+            >
+              <path
+                d="M724.48 521.728c-1.8432 7.7824-5.7344 14.848-11.3664 20.48l-341.9136 342.016c-16.6912 16.6912-43.7248 16.6912-60.3136 0s-16.6912-43.7248 0-60.3136L622.6944 512 310.8864 200.0896c-16.6912-16.6912-16.6912-43.7248 0-60.3136 16.6912-16.6912 43.7248-16.6912 60.3136 0l341.9136 341.9136c10.8544 10.8544 14.6432 26.112 11.3664 40.0384z"
+                fill="currentColor"
+              ></path>
+            </svg>
+            <input type="text" placeholder="" onKeyUp={handleInputKeyUp} />
           </div>
         ) : null}
       </div>
@@ -307,7 +381,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
  * 鼠标移动到某个组件的效果
  */
 function handleMouseMove(e: MouseEvent) {
-  if (!store.isExpanded) {
+  if (!store.inspectMode) {
     return;
   }
   const dom = e.target as HTMLElement;
@@ -321,14 +395,16 @@ function handleMouseMove(e: MouseEvent) {
  *  点选某个组件
  */
 function handleMouseclick(e: MouseEvent) {
-  if (!store.isExpanded) {
+  if (!store.inspectMode) {
     return;
   }
+  e.preventDefault();
   const dom = e.target as HTMLElement;
   const target = dom.closest(`[data-debug-id]`);
   if (target && !target.closest('.AMISDebug')) {
     store.activeId = target.getAttribute('data-debug-id')!;
     store.tab = 'inspect';
+    store.inspectMode = false;
   }
 }
 
@@ -337,6 +413,7 @@ const amisHoverBox = document.createElement('div');
 amisHoverBox.className = 'AMISDebug-hoverBox';
 const amisActiveBox = document.createElement('div');
 amisActiveBox.className = 'AMISDebug-activeBox';
+let timer: ReturnType<typeof setTimeout> | null = null;
 
 autorun(() => {
   const hoverId = store.hoverId;
@@ -366,6 +443,12 @@ autorun(() => {
     amisActiveBox.style.left = `${offset.left}px`;
     amisActiveBox.style.width = `${offset.width}px`;
     amisActiveBox.style.height = `${offset.height}px`;
+    amisActiveBox.classList.add('shake');
+
+    clearTimeout(timer!);
+    timer = setTimeout(() => {
+      amisActiveBox.classList.remove('shake');
+    }, 500);
   } else {
     amisActiveBox.style.top = '-999999px';
   }
@@ -403,7 +486,7 @@ export function enableDebug() {
   document.body.appendChild(amisHoverBox);
   document.body.appendChild(amisActiveBox);
   document.addEventListener('mousemove', handleMouseMove);
-  document.addEventListener('click', handleMouseclick);
+  document.addEventListener('click', handleMouseclick, true);
 }
 
 export function disableDebug() {
@@ -451,6 +534,12 @@ export class DebugWrapper extends Component<DebugWrapperProps> {
 
   componentWillUnmount() {
     delete ComponentInfo[this.debugId];
+    if (this.debugId === store.activeId) {
+      store.activeId = '';
+    }
+    if (this.debugId === store.hoverId) {
+      store.hoverId = '';
+    }
   }
 
   render() {
@@ -458,14 +547,22 @@ export class DebugWrapper extends Component<DebugWrapperProps> {
   }
 }
 
-type Category = 'api' | 'event';
+type Category = 'api' | 'event' | 'action' | 'debug' | 'error';
+
+function parseJson(str: string) {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    return e;
+  }
+}
 
 /**
  * 一般调试日志
  * @param msg 简单消息
  * @param ext 扩展信息
  */
-export function debug(cat: Category, msg: string, ext?: object) {
+export function debug(cat: Category, msg: string, ext?: any) {
   if (!isEnabled) {
     return;
   }
@@ -474,18 +571,11 @@ export function debug(cat: Category, msg: string, ext?: object) {
   console.debug(ext);
   console.groupEnd();
 
-  let extStr = '';
-  try {
-    extStr = JSON.stringify(ext);
-  } catch (e) {
-    console.error(e);
-  }
-
   const log = {
     cat,
     level: 'debug',
     msg: msg,
-    ext: extStr
+    ext: ext
   };
   store.logs.push(log);
 }
@@ -495,23 +585,16 @@ export function debug(cat: Category, msg: string, ext?: object) {
  * @param msg 简单消息
  * @param ext 扩展信息
  */
-export function warning(cat: Category, msg: string, ext?: object) {
+export function warning(cat: Category, msg: string, ext?: any) {
   if (!isEnabled) {
     return;
   }
 
-  let extStr = '';
-  try {
-    extStr = JSON.stringify(ext);
-  } catch (e) {
-    console.error(e);
-  }
-
-  const log = {
+  const log: Log = {
     cat,
     level: 'warn',
     msg: msg,
-    ext: extStr
+    ext: ext
   };
 
   console.groupCollapsed('amis debug', msg);
diff --git a/packages/amis-core/src/utils/index.ts b/packages/amis-core/src/utils/index.ts
index 522e24eb5..2f160f4b6 100644
--- a/packages/amis-core/src/utils/index.ts
+++ b/packages/amis-core/src/utils/index.ts
@@ -28,6 +28,7 @@ export * from './isPureVariable';
 export * from './json-schema-2-amis-schema';
 export * from './keyToPath';
 export * from './labelToString';
+export * from './loopTooMuch';
 export * from './makeSorter';
 export * from './normalizeLink';
 export * from './normalizeOptions';
diff --git a/packages/amis-core/src/utils/loopTooMuch.ts b/packages/amis-core/src/utils/loopTooMuch.ts
new file mode 100644
index 000000000..eeb2cc17f
--- /dev/null
+++ b/packages/amis-core/src/utils/loopTooMuch.ts
@@ -0,0 +1,23 @@
+const loopCount: {[key: string]: number} = {};
+const loopTimer: {[key: string]: ReturnType<typeof setTimeout>} = {};
+const loopResult: {[key: string]: boolean} = {};
+
+export function loopTooMuch(key: string, maxSpeed = 20) {
+  if (loopResult[key]) {
+    return loopResult[key];
+  }
+
+  clearTimeout(loopTimer[key]);
+  loopTimer[key] = setTimeout(() => {
+    delete loopCount[key];
+    delete loopTimer[key];
+  }, 1000);
+
+  if (loopCount[key] && loopCount[key] > maxSpeed) {
+    loopResult[key] = true;
+    return true;
+  }
+
+  loopCount[key] = (loopCount[key] || 0) + 1;
+  return false;
+}
diff --git a/packages/amis-core/src/utils/position.ts b/packages/amis-core/src/utils/position.ts
index 0992edff0..03ef22f85 100644
--- a/packages/amis-core/src/utils/position.ts
+++ b/packages/amis-core/src/utils/position.ts
@@ -35,28 +35,29 @@ export function position(node: HTMLElement, offsetParent?: HTMLElement) {
     }
 
     if (nodeName(parent) !== 'html') parentOffset = getOffset(parent);
+    const parentStyle = getComputedStyle(parent);
     const borderTop = String(
-      getComputedStyle(parent).getPropertyValue('border-top-width') || 0
+      parentStyle.getPropertyValue('border-top-width') || 0
     );
     parentOffset.top += parseInt(borderTop, 10) - parent.scrollTop || 0;
 
     const borderLeft = String(
-      getComputedStyle(parent).getPropertyValue('border-left-width') || 0
+      parentStyle.getPropertyValue('border-left-width') || 0
     );
     parentOffset.left += parseInt(borderLeft, 10) - parent.scrollLeft || 0;
   }
 
-  const marginTop = String(
-    getComputedStyle(node).getPropertyValue('margin-top') || 0
-  );
-  const marginLeft = String(
-    getComputedStyle(node).getPropertyValue('margin-left') || 0
-  );
+  // const marginTop = String(
+  //   getComputedStyle(node).getPropertyValue('margin-top') || 0
+  // );
+  // const marginLeft = String(
+  //   getComputedStyle(node).getPropertyValue('margin-left') || 0
+  // );
   // Subtract parent offsets and node margins
   return {
     ...offset,
-    top: offset.top - parentOffset.top - (parseInt(marginTop, 10) || 0),
-    left: offset.left - parentOffset.left - (parseInt(marginLeft, 10) || 0)
+    top: offset.top - parentOffset.top /*- (parseInt(marginTop, 10) || 0)*/,
+    left: offset.left - parentOffset.left /* - (parseInt(marginLeft, 10) || 0)*/
   };
 }
 
diff --git a/packages/amis-core/src/utils/validations.ts b/packages/amis-core/src/utils/validations.ts
index 8d36b25ff..b31c7e072 100644
--- a/packages/amis-core/src/utils/validations.ts
+++ b/packages/amis-core/src/utils/validations.ts
@@ -256,14 +256,16 @@ export const validations: {
   },
   isPhoneNumber: function (values, value) {
     return (
-      !isExisty(value) || isEmpty(value) || /^[1]([3-9])[0-9]{9}$/.test(value)
+      !isExisty(value) ||
+      isEmpty(value) ||
+      /^(\+\d{2}-)?[1]([3-9])[0-9]{9}$/.test(value)
     );
   },
   isTelNumber: function (values, value) {
     return (
       !isExisty(value) ||
       isEmpty(value) ||
-      /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value)
+      /^(\+\d{2}-)?(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value)
     );
   },
   isZipcode: function (values, value) {
diff --git a/packages/amis-editor-core/package.json b/packages/amis-editor-core/package.json
index ffb4c87bd..76c297242 100644
--- a/packages/amis-editor-core/package.json
+++ b/packages/amis-editor-core/package.json
@@ -27,8 +27,8 @@
   },
   "scripts": {
     "test": "echo \"Warnings: no test specified\"",
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c",
-    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c",
+    "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "clean-dist": "rimraf lib/* esm/*",
     "i18n:update": "npx i18n update --config=./i18nConfig.js",
     "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US",
@@ -60,6 +60,7 @@
     "sortablejs": "^1.14.0"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
diff --git a/packages/amis-editor-core/scss/control/_event-action.scss b/packages/amis-editor-core/scss/control/_event-action.scss
index 97dd550ee..6f4035d60 100644
--- a/packages/amis-editor-core/scss/control/_event-action.scss
+++ b/packages/amis-editor-core/scss/control/_event-action.scss
@@ -50,8 +50,14 @@
       width: 100%;
     }
   }
-  &-content-oldentry {
-    margin-top: 100px !important;
+  &-header-m {
+    margin-top: #{px2rem(45px)} !important;
+  }
+  &-content-m {
+    margin-top: #{px2rem(97px)} !important;
+  }
+  &-content-l {
+    margin-top: #{px2rem(150px)} !important;
   }
   &-content {
     padding: 0;
@@ -192,13 +198,31 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            .variable-left {
-              color: #2468f2;
-              margin-left: #{px2rem(4px)};
-            }
-            .variable-right {
-              color: #2468f2;
-              margin-right: #{px2rem(4px)};
+            .action-desc {
+              display: flex;
+              .desc-tag {
+                max-width: 133px;
+                color: #2468f2;
+                display: inline-block;
+                margin-bottom: -5px;
+              }
+              .variable-left {
+                margin-left: #{px2rem(4px)};
+              }
+              .variable-right {
+                margin-right: #{px2rem(4px)};
+              }
+              .component-action-tag {
+                background-color: rgb(82, 142, 255);
+                display: inline-block;
+                color: #fff;
+                padding: 0 5px;
+                border-radius: 3px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 100%;
+              }
             }
           }
           &--dragging {
@@ -297,7 +321,7 @@
   }
 }
 
-.action-config-dialog {
+.ae-action-config-dialog {
   *:not(svg) {
     font-size: 12px;
   }
@@ -468,7 +492,7 @@
   }
 }
 
-.event-item-header-tip {
+.ae-event-item-header-tip {
   background: #070c14d9 !important;
   box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
   border: none;
@@ -476,9 +500,6 @@
     font-size: 12px;
     color: #fff;
   }
-}
-
-.event-item-header-tip {
   & > div {
     &:after {
       border-top-color: #070c14d9 !important;
@@ -486,3 +507,9 @@
     }
   }
 }
+
+.ae-action-relation-panel {
+  width: 255px;
+  max-height: 360px;
+  overflow: auto;
+}
diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss
index ac97f38ca..e3528c00f 100644
--- a/packages/amis-editor-core/scss/editor.scss
+++ b/packages/amis-editor-core/scss/editor.scss
@@ -53,6 +53,7 @@
 @import './style-control/size';
 @import './style-control/style-common';
 @import './style-control/theme-css-code';
+@import './style-control/single-theme-css-code';
 @import './style-control/flex-layout';
 @import './style-control/col-count';
 @import './style-control/col-size';
diff --git a/packages/amis-editor-core/scss/style-control/_single-theme-css-code.scss b/packages/amis-editor-core/scss/style-control/_single-theme-css-code.scss
new file mode 100644
index 000000000..db1ab9d14
--- /dev/null
+++ b/packages/amis-editor-core/scss/style-control/_single-theme-css-code.scss
@@ -0,0 +1,83 @@
+.ae-SingleThemeCssCode {
+  position: relative;
+  border: 1px solid #e8e9eb;
+  border-radius: var(--input-default-default-top-left-border-radius)
+    var(--input-default-default-top-right-border-radius)
+    var(--input-default-default-bottom-right-border-radius)
+    var(--input-default-default-bottom-left-border-radius);
+
+  &-label {
+    margin-bottom: px2rem(10px);
+    color: #5c5f66;
+    font-size: 12px;
+  }
+
+  &-header,
+  &-footer {
+    padding: 0 4px;
+  }
+
+  &-content {
+    height: 120px;
+  }
+
+  &-button {
+    position: absolute;
+    top: 4px;
+    right: 12px;
+    z-index: 100;
+  }
+
+  &-icon {
+    cursor: pointer;
+    color: #5c5f66;
+    &:hover {
+      color: #151b26;
+    }
+  }
+}
+
+.ae-SingleThemeCssCode-custom-editor {
+  .suggest-widget {
+    width: auto !important;
+    left: 16px !important;
+    right: 0 !important;
+
+    .monaco-sash:first-child {
+      display: none;
+    }
+  }
+}
+
+.ae-SingleThemeCssCode-panel {
+  height: auto;
+  width: px2rem(460px);
+  padding: px2rem(16px);
+  position: relative;
+
+  &-title {
+    font-size: 14px;
+    margin-bottom: px2rem(16px);
+  }
+
+  &-close {
+    position: absolute;
+    top: px2rem(14px);
+    right: px2rem(16px);
+    button {
+      height: px2rem(16px);
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  &-content {
+    height: px2rem(500px);
+    width: 100%;
+    border: 1px solid #e8e9eb;
+
+    .ae-SingleThemeCssCode-content {
+      height: px2rem(454px);
+    }
+  }
+}
diff --git a/packages/amis-editor-core/src/component/Editor.tsx b/packages/amis-editor-core/src/component/Editor.tsx
index 0fc1ccfd2..5862cb7ee 100644
--- a/packages/amis-editor-core/src/component/Editor.tsx
+++ b/packages/amis-editor-core/src/component/Editor.tsx
@@ -17,6 +17,7 @@ import Breadcrumb from './Breadcrumb';
 import {destroy, isAlive} from 'mobx-state-tree';
 import {ScaffoldModal} from './ScaffoldModal';
 import {PopOverForm} from './PopOverForm';
+import {ModalForm} from './ModalForm';
 import {ContextMenuPanel} from './Panel/ContextMenuPanel';
 import {LeftPanels} from './Panel/LeftPanels';
 import {RightPanels} from './Panel/RightPanels';
@@ -143,6 +144,11 @@ export interface EditorProps extends PluginEventListener {
 
   getAvaiableContextFields?: (node: EditorNodeType) => Promise<any>;
   readonly?: boolean;
+
+  onEditorMount?: (manager: EditorManager) => void;
+  onEditorUnmount?: (manager: EditorManager) => void;
+
+  children?: React.ReactNode | ((manager: EditorManager) => React.ReactNode);
 }
 
 export default class Editor extends Component<EditorProps> {
@@ -170,6 +176,7 @@ export default class Editor extends Component<EditorProps> {
       showCustomRenderersPanel,
       superEditorData,
       hostManager,
+      onEditorMount,
       ...rest
     } = props;
 
@@ -225,6 +232,8 @@ export default class Editor extends Component<EditorProps> {
     this.toDispose.push(
       this.manager.on('preview2editor', () => this.manager.rebuild())
     );
+
+    onEditorMount?.(this.manager);
   }
 
   componentDidMount() {
@@ -268,6 +277,7 @@ export default class Editor extends Component<EditorProps> {
   }
 
   componentWillUnmount() {
+    this.props.onEditorUnmount?.(this.manager);
     document.removeEventListener('keydown', this.handleKeyDown);
     window.removeEventListener('message', this.handleMessage);
     this.toDispose.forEach(fn => fn());
@@ -588,7 +598,8 @@ export default class Editor extends Component<EditorProps> {
       autoFocus,
       isSubEditor,
       amisEnv,
-      readonly
+      readonly,
+      children
     } = this.props;
 
     return (
@@ -662,6 +673,8 @@ export default class Editor extends Component<EditorProps> {
           )}
 
           {!preview && <ContextMenuPanel store={this.store} />}
+
+          {typeof children === 'function' ? children(this.manager) : children}
         </div>
 
         <SubEditor
@@ -677,6 +690,7 @@ export default class Editor extends Component<EditorProps> {
           theme={theme}
         />
         <PopOverForm store={this.store} manager={this.manager} theme={theme} />
+        <ModalForm store={this.store} manager={this.manager} theme={theme} />
       </div>
     );
   }
diff --git a/packages/amis-editor-core/src/component/ModalForm.tsx b/packages/amis-editor-core/src/component/ModalForm.tsx
new file mode 100644
index 000000000..0aea4157b
--- /dev/null
+++ b/packages/amis-editor-core/src/component/ModalForm.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+import {EditorManager} from '../manager';
+import {EditorStoreType} from '../store/editor';
+import {
+  render,
+  Modal,
+  getTheme,
+  Icon,
+  Spinner,
+  Button,
+  Overlay,
+  PopOver,
+  Drawer
+} from 'amis';
+import {observer} from 'mobx-react';
+import {diff} from '../util';
+import {autobind, createObject} from 'amis-core';
+
+export interface ModalFormProps {
+  store: EditorStoreType;
+  manager: EditorManager;
+  theme?: string;
+}
+
+@observer
+export class ModalForm extends React.Component<ModalFormProps> {
+  @autobind
+  async handleConfirmClick() {
+    const form = this.amisScope?.getComponents()[0];
+
+    if (!form) {
+      return;
+    }
+    const {store} = this.props;
+    const modalFormContext = store.modalForm!;
+
+    try {
+      store.markModalFormBuzy(true);
+      const newValue = await form.doAction(
+        {
+          type: 'submit'
+        },
+        form.props.data,
+        true
+      );
+
+      modalFormContext.callback?.(
+        newValue,
+        diff(modalFormContext.value, newValue)
+      );
+      store.closeModalForm();
+    } catch (e) {
+      console.error(e.stack);
+      store.setModalFormError(e.message);
+    }
+
+    store.markModalFormBuzy(false);
+  }
+
+  amisScope: any;
+  @autobind
+  scopeRef(scoped: any) {
+    this.amisScope = scoped;
+  }
+
+  buildSchema() {
+    const {store} = this.props;
+    const modalFormContext = store.modalForm!;
+
+    return {
+      type: 'form',
+      wrapWithPanel: false,
+      mode: 'normal',
+      wrapperComponent: 'div',
+      initApi: modalFormContext.initApi,
+      api: modalFormContext.api,
+      body: modalFormContext.body,
+      submitOnChange: false,
+      autoFocus: true
+    };
+  }
+
+  render() {
+    const {store, theme, manager} = this.props;
+    const modalFormContext = store.modalForm;
+    const modalMode = store.modalMode || 'dialog';
+    const contents = modalFormContext
+      ? render(
+          this.buildSchema(),
+          {
+            data: createObject(store.ctx, modalFormContext?.value),
+            manager,
+            scopeRef: this.scopeRef
+          },
+          {
+            ...manager.env,
+            session: 'modal-form',
+            theme: theme
+          }
+        )
+      : null;
+
+    return modalMode === 'drawer' ? (
+      <Drawer
+        position={(modalFormContext?.postion as any) || 'left'}
+        size={modalFormContext?.size || 'md'}
+        theme={theme}
+        show={!!modalFormContext}
+        onHide={store.closeModalForm}
+      >
+        <div className="cxd-Drawer-header">{modalFormContext?.title}</div>
+        <div className="cxd-Drawer-body">{contents}</div>
+        <div className="cxd-Drawer-footer">
+          <div className="cxd-Drawer-info">
+            {store.modalFormError ? (
+              <div className="cxd-Drawer-error">{store.modalFormError}</div>
+            ) : null}
+          </div>
+          <Button
+            disabled={store.modalFormBuzy}
+            level="primary"
+            onClick={this.handleConfirmClick}
+          >
+            确认
+          </Button>
+          <Button onClick={store.closeModalForm}>取消</Button>
+        </div>
+      </Drawer>
+    ) : (
+      <Modal
+        theme={theme}
+        size={modalFormContext?.size || 'md'}
+        show={!!modalFormContext}
+        onHide={store.closeModalForm}
+        closeOnEsc={false}
+      >
+        {modalFormContext?.title ? (
+          <Modal.Header onClose={store.closeModalForm}>
+            {modalFormContext.title}
+          </Modal.Header>
+        ) : null}
+        <Modal.Body>{contents}</Modal.Body>
+        <Modal.Footer>
+          <div className="cxd-Dialog-info">
+            {store.modalFormError ? (
+              <div className="cxd-Dialog-error">{store.modalFormError}</div>
+            ) : null}
+          </div>
+          <Button
+            disabled={store.modalFormBuzy}
+            level="primary"
+            onClick={this.handleConfirmClick}
+          >
+            确认
+          </Button>
+          <Button onClick={store.closeModalForm}>取消</Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
diff --git a/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx b/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx
index 269c82a10..6bad4c670 100644
--- a/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx
+++ b/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx
@@ -22,7 +22,7 @@ export class AvailableRenderersPanel extends React.Component<
   }
 
   render() {
-    const {store, manager} = this.props;
+    const {store, manager, children} = this.props;
     const renderersTabsKey = store.renderersTabsKey || 'base-renderers';
     const curTheme = store.theme;
     const customRenderersByOrder = store.customRenderersByOrder || [];
@@ -33,6 +33,7 @@ export class AvailableRenderersPanel extends React.Component<
       <div className="ae-RendererPanel">
         <div className="panel-header">组件</div>
         <div className="ae-RendererPanel-content">
+          {typeof children === 'function' ? children(this.props) : children}
           {store.showCustomRenderersPanel &&
             customRenderersByOrder.length > 0 && (
               <Tabs
diff --git a/packages/amis-editor-core/src/component/Preview.tsx b/packages/amis-editor-core/src/component/Preview.tsx
index ecd215b97..12b441aaa 100644
--- a/packages/amis-editor-core/src/component/Preview.tsx
+++ b/packages/amis-editor-core/src/component/Preview.tsx
@@ -728,7 +728,11 @@ class SmartPreview extends React.Component<SmartPreviewProps> {
             locale: appLocale,
             editorDialogMountNode: this.getDialogMountRef
           },
-          env
+          {
+            ...env,
+            session: editable ? 'edit-mode' : 'preview-mode',
+            enableAMISDebug: !editable
+          }
         )}
       </div>
     );
diff --git a/packages/amis-editor-core/src/deepSplice.ts b/packages/amis-editor-core/src/deepSplice.ts
new file mode 100644
index 000000000..e980781b3
--- /dev/null
+++ b/packages/amis-editor-core/src/deepSplice.ts
@@ -0,0 +1,130 @@
+import isPlainObject from 'lodash/isPlainObject';
+
+/**
+ * 深度 splice 数组，同时返回新的对象，按需拷贝，没有副作用
+ *
+ * 第二个参数可以是一个函数，函数的返回值不为 false 时，表示找到了目标，函数的返回值为 number 时，表示偏移量
+ *
+ * @param target
+ * @param path
+ * @param numberToDelete
+ * @param items
+ * @returns
+ */
+export function deepSplice(
+  target: any,
+  path:
+    | string
+    | ((value: any, index: number | string, stack: Array<any>) => any),
+  numberToDelete: number,
+  provider?: ((origin: any) => any) | any,
+  ...items: any[]
+) {
+  if (typeof path === 'function') {
+    path = getPathByFunction(target, path);
+  }
+
+  if (!path) {
+    return target;
+  }
+
+  const paths = (path as string).split('.');
+  const last = paths.pop()!;
+  let host = target;
+  const stack: Array<{
+    host: any;
+    key: string | number | undefined;
+  }> = [];
+  for (let i = 0; i < paths.length; i++) {
+    stack.unshift({
+      key: paths[i]!,
+      host: host
+    });
+    host = host[paths[i]];
+  }
+
+  if (!Array.isArray(host)) {
+    throw new Error('deepSplice: target is not an array');
+  }
+  host = host.concat();
+
+  if (provider && typeof provider === 'function') {
+    host.splice.apply(
+      host,
+      [last, numberToDelete].concat(provider(host[last]))
+    );
+  } else {
+    host.splice.apply(host, [last, numberToDelete, provider].concat(items));
+  }
+
+  return stack.reduce((prefix, {host, key}) => {
+    host = Array.isArray(host) ? host.concat() : {...host};
+    host[key!] = prefix;
+
+    return host;
+  }, host);
+}
+
+function getPathByFunction(
+  target: any,
+  fn: (value: any, index: number | string, stack: Array<any>) => any
+): string {
+  let paths: Array<string> = [];
+  let resolved: boolean = false;
+  let stack: Array<any> = [
+    {
+      path: '',
+      key: '',
+      stack: [],
+      data: target
+    }
+  ];
+
+  while (stack.length) {
+    let cur = stack.shift()!;
+    let data = cur.data;
+    let path = cur.path;
+    let nodeStack = cur.stack;
+    let key = cur.key;
+
+    const result = fn(data, key, nodeStack);
+
+    if (result) {
+      resolved = true;
+      paths = path.split('.').filter((item: any) => item);
+
+      // apply offset
+      if (typeof result === 'number') {
+        paths[paths.length - 1] = (
+          parseInt(paths[paths.length - 1], 10) + result
+        ).toString();
+      }
+
+      break;
+    }
+
+    if (Array.isArray(data)) {
+      // 注意 Object.keys 返回的 key 是字符串，所以这里要转换一下
+      data.forEach((prop, key) => {
+        stack.push({
+          path: `${path}.${key}`,
+          key: key,
+          stack: [data].concat(nodeStack),
+          data: prop
+        });
+      });
+    } else if (isPlainObject(data)) {
+      Object.keys(data).forEach(key => {
+        let prop = data[key];
+        stack.push({
+          path: `${path}.${key}`,
+          key: key,
+          stack: [data].concat(nodeStack),
+          data: prop
+        });
+      });
+    }
+  }
+
+  return resolved ? paths.join('.') : '';
+}
diff --git a/packages/amis-editor-core/src/index.ts b/packages/amis-editor-core/src/index.ts
index 7c4d5c3b0..f50b41437 100644
--- a/packages/amis-editor-core/src/index.ts
+++ b/packages/amis-editor-core/src/index.ts
@@ -42,6 +42,9 @@ import {UnknownRendererPlugin} from './plugin/Unknown';
 import ShortcutKey from './component/base/ShortcutKey';
 import WidthDraggableContainer from './component/base/WidthDraggableContainer';
 import {SchemaFrom} from './component/base/SchemaForm';
+import {RendererThumb} from './component/RendererThumb';
+import {AvailableRenderersPanel} from './component/Panel/AvailableRenderersPanel';
+import {deepSplice} from './deepSplice';
 
 export const version = '__buildVersion';
 (window as any).amisEditorVersionInfo = {
@@ -55,6 +58,7 @@ export {
   Editor,
   MiniEditor,
   utils,
+  deepSplice,
   mapReactElement,
   RendererEditor,
   BasicEditor,
@@ -68,6 +72,7 @@ export {
   EditorStoreType,
   ContainerWrapper,
   AvailableRenderersPlugin,
+  AvailableRenderersPanel,
   BasicToolbarPlugin,
   CodePlugin,
   ErrorRendererPlugin,
@@ -75,5 +80,6 @@ export {
   UnknownRendererPlugin,
   ShortcutKey,
   SchemaFrom,
-  WidthDraggableContainer
+  WidthDraggableContainer,
+  RendererThumb
 };
diff --git a/packages/amis-editor-core/src/manager.ts b/packages/amis-editor-core/src/manager.ts
index 56c1f6883..5b70cd59b 100644
--- a/packages/amis-editor-core/src/manager.ts
+++ b/packages/amis-editor-core/src/manager.ts
@@ -9,7 +9,12 @@ import debounce from 'lodash/debounce';
 import findIndex from 'lodash/findIndex';
 import omit from 'lodash/omit';
 import {openContextMenus, toast, alert, DataScope, DataSchema} from 'amis';
-import {getRenderers, RenderOptions, JSONTraverse} from 'amis-core';
+import {
+  getRenderers,
+  RenderOptions,
+  JSONTraverse,
+  wrapFetcher
+} from 'amis-core';
 import {
   PluginInterface,
   BasicPanelItem,
@@ -69,7 +74,7 @@ import {VariableManager} from './variable';
 
 import type {IScopedContext} from 'amis';
 import type {SchemaObject, SchemaCollection} from 'amis';
-import type {RendererConfig} from 'amis-core';
+import type {Api, Payload, RendererConfig, RendererEnv} from 'amis-core';
 import {loadAsyncRenderer} from 'amis-core';
 
 export interface EditorManagerConfig
@@ -215,6 +220,7 @@ export class EditorManager {
 
   /** 变量管理 */
   readonly variableManager;
+  fetch?: (api: Api, data?: any, options?: object) => Promise<Payload>;
 
   constructor(
     readonly config: EditorManagerConfig,
@@ -223,10 +229,17 @@ export class EditorManager {
   ) {
     // 传给 amis 渲染器的默认 env
     this.env = {
-      ...env, // 默认的 env 中带 jumpTo
+      ...(env as any), // 默认的 env 中带 jumpTo
       ...omit(config.amisEnv, 'replaceText'), // 用户也可以设置自定义环境配置，用于覆盖默认的 env
-      theme: config.theme
+      theme: config.theme!
     };
+
+    // 内部统一使用 wrapFetcher 包装 fetcher
+    if (this.env.fetcher) {
+      this.env.fetcher = wrapFetcher(this.env.fetcher as any, this.env.tracker);
+      this.fetch = this.env.fetcher as any;
+    }
+
     this.env.beforeDispatchEvent = this.beforeDispatchEvent.bind(
       this,
       this.env.beforeDispatchEvent
@@ -1837,8 +1850,11 @@ export class EditorManager {
     this.dnd.startDrag(id, e.nativeEvent);
   }
 
-  async scaffold(form: any, value: any): Promise<SchemaObject> {
+  async scaffold(form: ScaffoldForm, value: any): Promise<SchemaObject> {
     const scaffoldFormData = form.pipeIn ? await form.pipeIn(value) : value;
+    if (form.getSchema) {
+      form = Object.assign({}, form, await form.getSchema(scaffoldFormData));
+    }
 
     return new Promise(resolve => {
       this.store.openScaffoldForm({
@@ -1857,7 +1873,7 @@ export class EditorManager {
   // 根据元素ID实时拿取上下文数据
   async reScaffoldV2(id: string) {
     const commonContext = this.buildEventContext(id);
-    const scaffoldForm = commonContext.info?.scaffoldForm;
+    const scaffoldForm = commonContext.info?.scaffoldForm!;
     const curSchema = commonContext.schema;
     const replaceWith = await this.scaffold(scaffoldForm, curSchema);
     this.replaceChild(id, replaceWith);
diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts
index 882252f8c..3d9c0447f 100644
--- a/packages/amis-editor-core/src/plugin.ts
+++ b/packages/amis-editor-core/src/plugin.ts
@@ -335,6 +335,9 @@ export interface PopOverForm {
    * @deprecated 改用 body 代替
    */
   controls?: Array<any>;
+
+  initApi?: any;
+  api?: any;
 }
 
 export interface ScaffoldForm extends PopOverForm {
@@ -342,6 +345,7 @@ export interface ScaffoldForm extends PopOverForm {
   stepsBody?: boolean;
   /** 是否可跳过创建向导直接创建 */
   canSkip?: boolean;
+  getSchema?: (value: any) => PopOverForm | Promise<PopOverForm>;
   mode?:
     | 'normal'
     | 'horizontal'
@@ -453,6 +457,7 @@ export interface PanelProps {
   manager: EditorManager;
   popOverContainer?: () => HTMLElement | void;
   readonly?: boolean;
+  children?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
 }
 
 /**
diff --git a/packages/amis-editor-core/src/store/editor.ts b/packages/amis-editor-core/src/store/editor.ts
index 7b70ec6b4..93d3a05c8 100644
--- a/packages/amis-editor-core/src/store/editor.ts
+++ b/packages/amis-editor-core/src/store/editor.ts
@@ -122,6 +122,14 @@ export interface PopOverFormContext extends PopOverForm {
   node?: EditorNodeType;
 }
 
+export interface ModalFormContext extends PopOverForm {
+  mode?: 'dialog' | 'drawer';
+  size?: string;
+  postion?: string;
+  value: any;
+  callback: (value: any, diff: any) => void;
+}
+
 /**
  * 搜集的 name 信息
  */
@@ -233,6 +241,12 @@ export const MainStore = types
 
     popOverForm: types.maybe(types.frozen<PopOverFormContext>()),
 
+    // 弹出层表单
+    modalForm: types.maybe(types.frozen<ModalFormContext>()),
+    modalMode: '',
+    modalFormBuzy: false,
+    modalFormError: '',
+
     // 弹出子编辑器相关的信息
     subEditorContext: types.maybe(types.frozen<SubEditorContext>()),
     // 子编辑器中可能需要拿到父编辑器的数据
@@ -278,6 +292,10 @@ export const MainStore = types
         return false;
       },
 
+      get rootId() {
+        return this.getRootId();
+      },
+
       getRootId() {
         const curSchema = this.getSchema();
         return curSchema?.$$id;
@@ -2105,6 +2123,24 @@ export const MainStore = types
         self.popOverForm = undefined;
       },
 
+      openModalForm(context: ModalFormContext) {
+        self.modalForm = context;
+        self.modalMode = context?.mode || self.modalMode;
+        self.modalFormError = '';
+      },
+
+      closeModalForm() {
+        self.modalForm = undefined;
+      },
+
+      markModalFormBuzy(value: any) {
+        self.modalFormBuzy = !!value;
+      },
+
+      setModalFormError(msg: string = '') {
+        self.modalFormError = msg;
+      },
+
       activeHighlightNodes(ids: Array<string>) {
         ids.forEach(id => {
           const node = self.getNodeById(id);
diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json
index 37658753b..2f13f60c5 100644
--- a/packages/amis-editor/package.json
+++ b/packages/amis-editor/package.json
@@ -21,8 +21,8 @@
   },
   "scripts": {
     "test": "echo \"Warnings: no test specified\"",
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
-    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
+    "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "clean-dist": "rimraf lib/** esm/**",
     "i18n:update": "npx i18n update --config=./i18nConfig.js",
     "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US",
@@ -49,6 +49,7 @@
     "mobx-state-tree": "^3.17.3"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
diff --git a/packages/amis-editor/src/component/BaseControl.ts b/packages/amis-editor/src/component/BaseControl.ts
index 9952d9469..a3e28ec64 100644
--- a/packages/amis-editor/src/component/BaseControl.ts
+++ b/packages/amis-editor/src/component/BaseControl.ts
@@ -3,12 +3,11 @@
  */
 
 import flatten from 'lodash/flatten';
-import {
-  getEventControlConfig,
-  SUPPORT_STATIC_FORMITEM_CMPTS
-} from '../renderer/event-control/helper';
+import {NO_SUPPORT_STATIC_FORMITEM_CMPTS} from '../renderer/event-control/constants';
+import {getEventControlConfig} from '../renderer/event-control/helper';
 import {getSchemaTpl, isObject, tipedLabel} from 'amis-editor-core';
 import type {BaseEventContext} from 'amis-editor-core';
+import {getRendererByName} from 'amis-core';
 
 // 默认动作
 export const BUTTON_DEFAULT_ACTION = {
@@ -199,7 +198,9 @@ export const formItemControl: (
   context?: BaseEventContext
 ) => Array<any> = (panels, context) => {
   const type = context?.schema?.type || '';
-  const supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
+  const render = getRendererByName(type);
+  const supportStatic =
+    !!render?.isFormItem && !NO_SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
   const collapseProps = {
     type: 'collapse',
     headingClassName: 'ae-formItemControl-header ae-Collapse-header',
diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx
index 711719b05..bd761d9ac 100644
--- a/packages/amis-editor/src/index.tsx
+++ b/packages/amis-editor/src/index.tsx
@@ -5,6 +5,8 @@ export * from './builder';
 import './tpl/index';
 export * from './plugin';
 export * from './validator';
+export * from './renderer/event-control/actionsPanelManager';
+export * from './renderer/event-control/helper';
 
 import './renderer/OptionControl';
 import './renderer/ValueFormatControl';
@@ -45,6 +47,7 @@ import './renderer/event-control/index';
 import './renderer/TreeOptionControl';
 import './renderer/TransferTableControl';
 import './renderer/style-control/ThemeCssCode';
+import './renderer/style-control/SingleThemeCssCode';
 import './renderer/style-control/ColCount';
 import './renderer/style-control/ColSize';
 import './renderer/style-control/LabelAlign';
diff --git a/packages/amis-editor/src/plugin/AnchorNav.tsx b/packages/amis-editor/src/plugin/AnchorNav.tsx
index d3ab76b88..7c8f8fc7f 100644
--- a/packages/amis-editor/src/plugin/AnchorNav.tsx
+++ b/packages/amis-editor/src/plugin/AnchorNav.tsx
@@ -80,6 +80,7 @@ export class AnchorNavPlugin extends BasePlugin {
         body: getSchemaTpl('collapseGroup', [
           {
             title: '基本',
+            id: 'properties-basic',
             body: [
               getSchemaTpl('layout:originPosition', {value: 'left-top'}),
               getSchemaTpl('combo-container', {
@@ -163,6 +164,7 @@ export class AnchorNavPlugin extends BasePlugin {
         body: getSchemaTpl('collapseGroup', [
           {
             title: '基本',
+            id: 'appearance-basic',
             body: [
               {
                 type: 'button-group-select',
diff --git a/packages/amis-editor/src/plugin/Button.tsx b/packages/amis-editor/src/plugin/Button.tsx
index 0f1532c46..d3462d76c 100644
--- a/packages/amis-editor/src/plugin/Button.tsx
+++ b/packages/amis-editor/src/plugin/Button.tsx
@@ -204,6 +204,7 @@ export class ButtonPlugin extends BasePlugin {
                 formType: 'extend',
                 mode: 'normal',
                 label: '气泡提示',
+                id: 'button-tooltip', //便于扩充定位
                 hidden: isInDropdown,
                 form: {
                   body: [
@@ -351,11 +352,16 @@ export class ButtonPlugin extends BasePlugin {
               ...buttonStateFunc("${__editorState == 'active'}", 'active')
             ]
           },
-          getSchemaTpl('theme:cssCode', {
-            themeClass: [
+          getSchemaTpl('theme:singleCssCode', {
+            selectors: [
               {
-                value: '',
-                state: ['default', 'hover', 'active']
+                label: '按钮基本样式',
+                isRoot: true,
+                selector: '.cxd-Button'
+              },
+              {
+                label: '按钮内容样式',
+                selector: 'span'
               }
             ]
           })
diff --git a/packages/amis-editor/src/plugin/CRUD.tsx b/packages/amis-editor/src/plugin/CRUD.tsx
index bc11fd353..a000dfb73 100644
--- a/packages/amis-editor/src/plugin/CRUD.tsx
+++ b/packages/amis-editor/src/plugin/CRUD.tsx
@@ -1,7 +1,10 @@
 import {toast, normalizeApiResponseData} from 'amis';
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 import {genCodeSchema} from '../renderer/APIAdaptorControl';
 import {
   getI18nEnabled,
@@ -20,12 +23,12 @@ import {
   RendererEventContext,
   RendererInfoResolveEventContext,
   ScaffoldForm,
-  SubRendererInfo
+  SubRendererInfo,
+  defaultValue,
+  getSchemaTpl,
+  JSONPipeIn
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {isObject, JSONPipeIn} from 'amis-editor-core';
-import {setVariable, someTree} from 'amis-core';
-import type {ActionSchema} from 'amis';
+import {setVariable, someTree, normalizeApi} from 'amis-core';
 import type {CRUDCommonSchema} from 'amis';
 import {getEnv} from 'mobx-state-tree';
 import type {
@@ -33,7 +36,6 @@ import type {
   RendererPluginAction,
   RendererPluginEvent
 } from 'amis-editor-core';
-import {normalizeApi} from 'amis-core';
 import isPlainObject from 'lodash/isPlainObject';
 import findLastIndex from 'lodash/findLastIndex';
 
@@ -367,12 +369,14 @@ export class CRUDPlugin extends BasePlugin {
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionLabel: '变量赋值',
       actionType: 'setValue',
-      description: '更新列表记录'
+      description: '更新列表记录',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx b/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx
index 537867ea6..17a6c2540 100644
--- a/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx
+++ b/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx
@@ -30,9 +30,10 @@ import {
 } from '../../builder';
 import {
   getEventControlConfig,
-  getArgsWrapper
+  getArgsWrapper,
+  getActionCommonProps
 } from '../../renderer/event-control/helper';
-import {CRUD2Schema} from 'amis/lib/renderers/CRUD2';
+import {CRUD2Schema} from 'amis';
 import {deepRemove, findObj, findSchema} from './utils';
 import {
   ToolsConfig,
@@ -113,9 +114,9 @@ export class BaseCRUDPlugin extends BasePlugin {
           actionType: 'search',
           actionLabel: '数据查询',
           description: '使用指定条件完成列表数据查询',
-          descDetail: (info: any) => {
+          descDetail: (info: any, context: any, props: any) => {
             return (
-              <div>
+              <div className="action-desc">
                 <span className="variable-right">{info?.__rendererLabel}</span>
                 触发数据查询
               </div>
@@ -134,9 +135,9 @@ export class BaseCRUDPlugin extends BasePlugin {
           actionType: 'loadMore',
           actionLabel: '加载更多',
           description: '加载更多条数据到列表容器',
-          descDetail: (info: any) => {
+          descDetail: (info: any, context: any, props: any) => {
             return (
-              <div>
+              <div className="action-desc">
                 <span className="variable-right">{info?.__rendererLabel}</span>
                 加载更多数据
               </div>
@@ -156,7 +157,8 @@ export class BaseCRUDPlugin extends BasePlugin {
         {
           actionType: 'reload',
           actionLabel: '重新加载',
-          description: '触发组件数据刷新并重新渲染'
+          description: '触发组件数据刷新并重新渲染',
+          ...getActionCommonProps('reload')
         },
         ...(actions || [])
       ],
diff --git a/packages/amis-editor/src/plugin/Calendar.tsx b/packages/amis-editor/src/plugin/Calendar.tsx
index 6230e7363..93048b9f5 100644
--- a/packages/amis-editor/src/plugin/Calendar.tsx
+++ b/packages/amis-editor/src/plugin/Calendar.tsx
@@ -1,9 +1,15 @@
-import {registerEditorPlugin, RendererPluginEvent} from 'amis-editor-core';
-import {BaseEventContext, BasePlugin, tipedLabel} from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control';
+import {
+  registerEditorPlugin,
+  RendererPluginEvent,
+  BaseEventContext,
+  BasePlugin,
+  getSchemaTpl
+} from 'amis-editor-core';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control';
 import {FormulaDateType} from '../renderer/FormulaControl';
-import type {Schema} from 'amis';
 
 export class CalendarPlugin extends BasePlugin {
   static id = 'CalendarPlugin';
@@ -126,17 +132,20 @@ export class CalendarPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空'
+      description: '清空',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Chart.tsx b/packages/amis-editor/src/plugin/Chart.tsx
index 24a94539f..e26ee5f3a 100644
--- a/packages/amis-editor/src/plugin/Chart.tsx
+++ b/packages/amis-editor/src/plugin/Chart.tsx
@@ -12,7 +12,10 @@ import {
   RendererPluginEvent,
   tipedLabel
 } from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 
 const ChartConfigEditor = ({value, onChange}: any) => {
   return (
@@ -181,12 +184,14 @@ export class ChartPlugin extends BasePlugin {
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '变量赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
     // 特性动作太多了，这里先不加了，可以通过写代码配置
   ];
diff --git a/packages/amis-editor/src/plugin/Collapse.tsx b/packages/amis-editor/src/plugin/Collapse.tsx
index 2531f8155..47997d609 100644
--- a/packages/amis-editor/src/plugin/Collapse.tsx
+++ b/packages/amis-editor/src/plugin/Collapse.tsx
@@ -1,12 +1,17 @@
+import React from 'react';
 import {
   RendererPluginAction,
   RendererPluginEvent,
   getI18nEnabled,
-  registerEditorPlugin
+  registerEditorPlugin,
+  BasePlugin,
+  RegionConfig,
+  BaseEventContext,
+  defaultValue,
+  getSchemaTpl
 } from 'amis-editor-core';
-import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 import {getEventControlConfig} from '../renderer/event-control/helper';
+import {getActionCommonProps} from '../renderer/event-control/helper';
 
 export class CollapsePlugin extends BasePlugin {
   static id = 'CollapsePlugin';
@@ -114,12 +119,21 @@ export class CollapsePlugin extends BasePlugin {
     {
       actionType: 'expand',
       actionLabel: '组件展开',
-      description: '组件折叠状态变更为展开'
+      description: '组件折叠状态变更为展开',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">{info?.rendererLabel}</span>
+            展开
+          </div>
+        );
+      }
     },
     {
       actionLabel: '组件收起',
       actionType: 'collapse',
-      description: '组件折叠状态变更为收起'
+      description: '组件折叠状态变更为收起',
+      ...getActionCommonProps('collapse')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/CollapseGroup.tsx b/packages/amis-editor/src/plugin/CollapseGroup.tsx
index c27ea5e0a..bab36f171 100644
--- a/packages/amis-editor/src/plugin/CollapseGroup.tsx
+++ b/packages/amis-editor/src/plugin/CollapseGroup.tsx
@@ -27,6 +27,7 @@ export class CollapseGroupPlugin extends BasePlugin {
   pluginIcon = 'collapse-plugin';
   scaffold = {
     type: 'collapse-group',
+    enableFieldSetStyle: true,
     activeKey: ['1'],
     body: [
       {
@@ -101,6 +102,7 @@ export class CollapseGroupPlugin extends BasePlugin {
   panelJustify = true;
 
   panelBodyCreator = (context: BaseEventContext) => {
+    const isInForm = context.path.includes('/form/');
     const i18nEnabled = getI18nEnabled();
     return [
       getSchemaTpl('tabs', [
@@ -111,6 +113,22 @@ export class CollapseGroupPlugin extends BasePlugin {
               title: '基本',
               body: [
                 getSchemaTpl('layout:originPosition', {value: 'left-top'}),
+                {
+                  name: 'enableFieldSetStyle',
+                  label: '展示风格',
+                  visible: isInForm,
+                  type: 'button-group-select',
+                  options: [
+                    {
+                      label: '默认',
+                      value: false
+                    },
+                    {
+                      label: '简洁',
+                      value: true
+                    }
+                  ]
+                },
                 {
                   name: 'expandIconPosition',
                   label: '图标位置',
diff --git a/packages/amis-editor/src/plugin/Dialog.tsx b/packages/amis-editor/src/plugin/Dialog.tsx
index 6ea63e26f..53655e237 100644
--- a/packages/amis-editor/src/plugin/Dialog.tsx
+++ b/packages/amis-editor/src/plugin/Dialog.tsx
@@ -18,7 +18,10 @@ import {
   ChangeEventContext,
   JSONPipeOut
 } from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 import omit from 'lodash/omit';
 import type {RendererConfig, Schema} from 'amis-core';
 import {ModalProps} from 'amis-ui/lib/components/Modal';
@@ -119,7 +122,8 @@ export class DialogPlugin extends BasePlugin {
     {
       actionType: 'confirm',
       actionLabel: '确认',
-      description: '触发弹窗确认操作'
+      description: '触发弹窗确认操作',
+      descDetail: (info: any) => <div>打开确认对话框</div>
     },
     {
       actionType: 'cancel',
@@ -129,7 +133,8 @@ export class DialogPlugin extends BasePlugin {
     {
       actionType: 'setValue',
       actionLabel: '变量赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Drawer.tsx b/packages/amis-editor/src/plugin/Drawer.tsx
index 92199c1b7..d3d15da64 100644
--- a/packages/amis-editor/src/plugin/Drawer.tsx
+++ b/packages/amis-editor/src/plugin/Drawer.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   registerEditorPlugin,
   BaseEventContext,
@@ -12,7 +13,10 @@ import {
   getI18nEnabled,
   JSONPipeOut
 } from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 import {tipedLabel} from 'amis-editor-core';
 import omit from 'lodash/omit';
 import {InlineModal} from './Dialog';
@@ -100,7 +104,8 @@ export class DrawerPlugin extends BasePlugin {
     {
       actionType: 'confirm',
       actionLabel: '确认',
-      description: '触发抽屉确认操作'
+      description: '触发抽屉确认操作',
+      descDetail: (info: any) => <div>触发确认操作</div>
     },
     {
       actionType: 'cancel',
@@ -110,7 +115,8 @@ export class DrawerPlugin extends BasePlugin {
     {
       actionType: 'setValue',
       actionLabel: '变量赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
index d2cbd547c..0a4d72fd4 100644
--- a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
@@ -1,20 +1,22 @@
 import {
   EditorManager,
   EditorNodeType,
-  registerEditorPlugin
-} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-
-import {
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
   RendererPluginAction,
   RendererPluginEvent,
-  tipedLabel
+  tipedLabel,
+  getSchemaTpl,
+  defaultValue
 } from 'amis-editor-core';
-import {getSchemaTpl, defaultValue} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import type {Schema} from 'amis';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {ValidatorTag} from '../../validator';
 import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
-import type {Schema} from 'amis';
 
 export class ButtonGroupControlPlugin extends BasePlugin {
   static id = 'ButtonGroupControlPlugin';
@@ -95,22 +97,26 @@ export class ButtonGroupControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx
index 2494df72b..a9a617943 100644
--- a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx
@@ -1,23 +1,21 @@
 import {
   EditorManager,
   EditorNodeType,
-  registerEditorPlugin
-} from 'amis-editor-core';
-import {
+  registerEditorPlugin,
   BasePlugin,
   BaseEventContext,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo,
   RendererPluginAction,
   RendererPluginEvent,
   tipedLabel,
   getSchemaTpl,
   defaultValue
 } from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
 import type {Schema} from 'amis';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {resolveOptionEventDataSchame} from '../../util';
 import {inputStateTpl} from '../../renderer/style-control/helper';
 
@@ -84,22 +82,26 @@ export class ChainedSelectControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/Checkbox.tsx b/packages/amis-editor/src/plugin/Form/Checkbox.tsx
index 56514e87c..f71b69fe5 100644
--- a/packages/amis-editor/src/plugin/Form/Checkbox.tsx
+++ b/packages/amis-editor/src/plugin/Form/Checkbox.tsx
@@ -2,26 +2,24 @@ import {
   defaultValue,
   setSchemaTpl,
   getSchemaTpl,
-  valuePipeOut,
   undefinedPipeOut,
   EditorNodeType,
-  EditorManager
+  EditorManager,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  tipedLabel,
+  RendererPluginAction,
+  RendererPluginEvent
 } from 'amis-editor-core';
 import {isPureVariable} from 'amis';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo,
-  BaseEventContext,
-  tipedLabel
-} from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
 import omit from 'lodash/omit';
 import {inputStateTpl} from '../../renderer/style-control/helper';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 setSchemaTpl('option', {
   name: 'option',
@@ -105,17 +103,20 @@ export class CheckboxControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
   panelBodyCreator = (context: BaseEventContext) => {
diff --git a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx
index 7602d342b..ece890dd0 100644
--- a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx
+++ b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx
@@ -5,21 +5,22 @@ import {
   valuePipeOut,
   EditorNodeType,
   EditorManager,
-  undefinedPipeOut
-} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {
+  undefinedPipeOut,
+  RendererPluginAction,
+  RendererPluginEvent,
   BasePlugin,
   BasicSubRenderInfo,
   RendererEventContext,
   SubRendererInfo,
-  BaseEventContext
+  BaseEventContext,
+  registerEditorPlugin
 } from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-
 import type {Schema} from 'amis';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {
   OPTION_EDIT_EVENTS,
   resolveOptionEventDataSchame,
@@ -109,22 +110,26 @@ export class CheckboxesControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
   panelJustify = true;
@@ -192,6 +197,7 @@ export class CheckboxesControlPlugin extends BasePlugin {
           },
           {
             title: '选项',
+            id: 'properties-options',
             body: [
               getSchemaTpl('optionControlV2', {
                 multiple: true
diff --git a/packages/amis-editor/src/plugin/Form/CodeEditor.tsx b/packages/amis-editor/src/plugin/Form/CodeEditor.tsx
index b8a42372c..2faa14f69 100644
--- a/packages/amis-editor/src/plugin/Form/CodeEditor.tsx
+++ b/packages/amis-editor/src/plugin/Form/CodeEditor.tsx
@@ -1,12 +1,17 @@
 import {EditorAvailableLanguages as availableLanguages} from 'amis';
-import {defaultValue, getSchemaTpl, undefinedPipeOut} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin} from 'amis-editor-core';
-
+import {
+  defaultValue,
+  getSchemaTpl,
+  undefinedPipeOut,
+  registerEditorPlugin,
+  BasePlugin,
+  RendererPluginEvent,
+  RendererPluginAction
+} from 'amis-editor-core';
 import type {BaseEventContext} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {RendererPluginEvent, RendererPluginAction} from 'amis-editor-core';
 import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 export class CodeEditorControlPlugin extends BasePlugin {
   static id = 'CodeEditorControlPlugin';
@@ -115,22 +120,26 @@ export class CodeEditorControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'focus',
       actionLabel: '获取焦点',
-      description: '输入框获取焦点'
+      description: '输入框获取焦点',
+      ...getActionCommonProps('focus')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/Combo.tsx b/packages/amis-editor/src/plugin/Form/Combo.tsx
index e9eae0c17..b0501bdac 100644
--- a/packages/amis-editor/src/plugin/Form/Combo.tsx
+++ b/packages/amis-editor/src/plugin/Form/Combo.tsx
@@ -18,7 +18,8 @@ import {DSBuilderManager} from '../../builder/DSBuilderManager';
 import {ValidatorTag} from '../../validator';
 import {
   getArgsWrapper,
-  getEventControlConfig
+  getEventControlConfig,
+  getActionCommonProps
 } from '../../renderer/event-control/helper';
 import {resolveInputTableEventDataSchame} from '../../util';
 
@@ -249,12 +250,14 @@ export class ComboControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'addItem',
@@ -292,7 +295,8 @@ export class ComboControlPlugin extends BasePlugin {
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/DiffEditor.tsx b/packages/amis-editor/src/plugin/Form/DiffEditor.tsx
index 214cc8047..131ca36ee 100644
--- a/packages/amis-editor/src/plugin/Form/DiffEditor.tsx
+++ b/packages/amis-editor/src/plugin/Form/DiffEditor.tsx
@@ -3,15 +3,14 @@ import {
   defaultValue,
   getSchemaTpl,
   undefinedPipeOut,
-  valuePipeOut
+  registerEditorPlugin,
+  BasePlugin
 } from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin} from 'amis-editor-core';
-
 import type {BaseEventContext} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
 import {getEventControlConfig} from '../../renderer/event-control/helper';
 import {RendererPluginEvent, RendererPluginAction} from 'amis-editor-core';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 export class DiffEditorControlPlugin extends BasePlugin {
   static id = 'DiffEditorControlPlugin';
@@ -122,22 +121,26 @@ export class DiffEditorControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'focus',
       actionLabel: '获取焦点',
-      description: '获取焦点，焦点落在右侧编辑面板'
+      description: '获取焦点，焦点落在右侧编辑面板',
+      ...getActionCommonProps('focus')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/Form.tsx b/packages/amis-editor/src/plugin/Form/Form.tsx
index 5100fa560..6d9edeb2b 100644
--- a/packages/amis-editor/src/plugin/Form/Form.tsx
+++ b/packages/amis-editor/src/plugin/Form/Form.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import cx from 'classnames';
 import DeepDiff from 'deep-diff';
 import flatten from 'lodash/flatten';
@@ -20,11 +21,15 @@ import {
   ScaffoldForm,
   RegionConfig,
   registerEditorPlugin,
-  JSONPipeOut,
-  InsertEventContext,
-  MoveEventContext,
-  DeleteEventContext
+  JSONPipeOut
 } from 'amis-editor-core';
+import type {FormSchema} from 'amis';
+import type {
+  IFormStore,
+  IFormItemStore,
+  Schema,
+  RendererConfig
+} from 'amis-core';
 import {
   DSFeatureType,
   DSBuilderManager,
@@ -33,17 +38,13 @@ import {
   ApiDSBuilderKey
 } from '../../builder';
 import {FormOperatorMap} from '../../builder/constants';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {FieldSetting} from '../../renderer/FieldSetting';
 import {_isModelComp} from '../../util';
 
-import type {FormSchema} from 'amis/lib/Schema';
-import type {
-  IFormStore,
-  IFormItemStore,
-  Schema,
-  RendererConfig
-} from 'amis-core';
 import type {FormScaffoldConfig} from '../../builder';
 
 export type FormPluginFeat = Extract<
@@ -344,32 +345,48 @@ export class FormPlugin extends BasePlugin {
     {
       actionLabel: '提交表单',
       actionType: 'submit',
-      description: '触发表单提交'
+      description: '触发表单提交',
+      ...getActionCommonProps('submit')
     },
     {
       actionLabel: '重置表单',
       actionType: 'reset',
-      description: '触发表单重置'
+      description: '触发表单重置',
+      ...getActionCommonProps('reset')
     },
     {
       actionLabel: '清空表单',
       actionType: 'clear',
-      description: '触发表单清空'
+      description: '触发表单清空',
+      ...getActionCommonProps('clear')
     },
     {
       actionLabel: '校验表单',
       actionType: 'validate',
-      description: '触发表单校验'
+      description: '触发表单校验',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            校验
+            <span className="variable-left variable-right">
+              {info?.rendererLabel}
+            </span>
+            的数据
+          </div>
+        );
+      }
     },
     {
       actionLabel: '重新加载',
       actionType: 'reload',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionLabel: '变量赋值',
       actionType: 'setValue',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputCity.tsx b/packages/amis-editor/src/plugin/Form/InputCity.tsx
index 050d869d4..77a7eb77b 100644
--- a/packages/amis-editor/src/plugin/Form/InputCity.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputCity.tsx
@@ -1,25 +1,21 @@
 import {
+  BasePlugin,
+  BaseEventContext,
+  RendererPluginAction,
+  RendererPluginEvent,
+  registerEditorPlugin,
   EditorManager,
   EditorNodeType,
   defaultValue,
-  getSchemaTpl,
-  valuePipeOut
-} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo,
-  BaseEventContext
+  getSchemaTpl
 } from 'amis-editor-core';
 import cloneDeep from 'lodash/cloneDeep';
 import type {Schema} from 'amis';
-
-import {formItemControl} from '../../component/BaseControl';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 export class CityControlPlugin extends BasePlugin {
   static id = 'CityControlPlugin';
@@ -102,17 +98,20 @@ export class CityControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置为默认值'
+      description: '重置为默认值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputDate.tsx b/packages/amis-editor/src/plugin/Form/InputDate.tsx
index 8ab093927..6c2e77109 100644
--- a/packages/amis-editor/src/plugin/Form/InputDate.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputDate.tsx
@@ -1,12 +1,20 @@
-import {registerEditorPlugin} from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext, tipedLabel} from 'amis-editor-core';
-
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {FormulaDateType} from '../../renderer/FormulaControl';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {
+  registerEditorPlugin,
+  RendererPluginAction,
+  RendererPluginEvent,
+  defaultValue,
+  getSchemaTpl,
+  BasePlugin,
+  BaseEventContext,
+  tipedLabel
+} from 'amis-editor-core';
 import type {Schema} from 'amis';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {FormulaDateType} from '../../renderer/FormulaControl';
 
 const formatX = [
   {
@@ -248,17 +256,20 @@ export class DateControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空输入框内容'
+      description: '清空输入框内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -347,6 +358,9 @@ export class DateControlPlugin extends BasePlugin {
                 getSchemaTpl('clearable', {
                   pipeIn: defaultValue(true)
                 }),
+                getSchemaTpl('inputForbid', {
+                  pipeIn: defaultValue(false)
+                }),
                 getSchemaTpl('valueFormula', {
                   rendererSchema: (schema: Schema) => schema,
                   placeholder: '请选择静态值',
diff --git a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx b/packages/amis-editor/src/plugin/Form/InputDateRange.tsx
index e7ae92f8b..00421bfee 100644
--- a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputDateRange.tsx
@@ -1,14 +1,22 @@
-import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {FormulaDateType} from '../../renderer/FormulaControl';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {
+  defaultValue,
+  getSchemaTpl,
+  tipedLabel,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  RendererPluginAction,
+  RendererPluginEvent
+} from 'amis-editor-core';
 import {getRendererByName} from 'amis-core';
 import omit from 'lodash/omit';
 import type {Schema} from 'amis';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {FormulaDateType} from '../../renderer/FormulaControl';
 
 const formatX = [
   {
@@ -294,17 +302,20 @@ export class DateRangeControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空输入框内容'
+      description: '清空输入框内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -404,7 +415,9 @@ export class DateRangeControlPlugin extends BasePlugin {
                 getSchemaTpl('clearable', {
                   pipeIn: defaultValue(true)
                 }),
-
+                getSchemaTpl('inputForbid', {
+                  pipeIn: defaultValue(false)
+                }),
                 getSchemaTpl('valueFormula', {
                   rendererSchema: (schema: Schema) => ({
                     ...schema,
diff --git a/packages/amis-editor/src/plugin/Form/InputExcel.tsx b/packages/amis-editor/src/plugin/Form/InputExcel.tsx
index 49371b461..fa5f3e95f 100644
--- a/packages/amis-editor/src/plugin/Form/InputExcel.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputExcel.tsx
@@ -1,17 +1,17 @@
 /**
  * @file input-excel 组件的素项目部
  */
-import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
 import {
   BasePlugin,
   BaseEventContext,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
+  RendererPluginAction,
+  RendererPluginEvent,
+  defaultValue,
+  getSchemaTpl,
+  registerEditorPlugin
 } from 'amis-editor-core';
 import {formItemControl} from '../../component/BaseControl';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 export class ExcelControlPlugin extends BasePlugin {
   static id = 'ExcelControlPlugin';
@@ -80,17 +80,20 @@ export class ExcelControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
   panelBodyCreator = (context: BaseEventContext) => {
diff --git a/packages/amis-editor/src/plugin/Form/InputFile.tsx b/packages/amis-editor/src/plugin/Form/InputFile.tsx
index d283e556a..eb2a170d2 100644
--- a/packages/amis-editor/src/plugin/Form/InputFile.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputFile.tsx
@@ -1,9 +1,19 @@
-import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
-import {registerEditorPlugin, tipedLabel} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut,
+  RendererPluginAction,
+  RendererPluginEvent,
+  registerEditorPlugin,
+  tipedLabel,
+  BasePlugin,
+  BaseEventContext
+} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 export class FileControlPlugin extends BasePlugin {
   static id = 'FileControlPlugin';
@@ -146,12 +156,14 @@ export class FileControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空数据',
-      description: '清除选择的文件'
+      description: '清除选择的文件',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputImage.tsx b/packages/amis-editor/src/plugin/Form/InputImage.tsx
index 2b23773b1..d3ff17046 100644
--- a/packages/amis-editor/src/plugin/Form/InputImage.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputImage.tsx
@@ -5,10 +5,13 @@ import {
   RendererPluginEvent,
   BasePlugin,
   BaseEventContext,
-  registerEditorPlugin
+  registerEditorPlugin,
+  tipedLabel
 } from 'amis-editor-core';
-import {tipedLabel} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {ValidatorTag} from '../../validator';
 
 const addBtnCssClassName = 'themeCss.addBtnControlClassName';
@@ -189,12 +192,14 @@ export class ImageControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空数据',
-      description: '清除选择的文件'
+      description: '清除选择的文件',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputKV.tsx b/packages/amis-editor/src/plugin/Form/InputKV.tsx
index 5d548ecef..d28e541b2 100644
--- a/packages/amis-editor/src/plugin/Form/InputKV.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputKV.tsx
@@ -1,16 +1,15 @@
 /**
  * @file input-kv 组件的素项目部
  */
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
 import {
-  BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo
+  RendererPluginAction,
+  RendererPluginEvent,
+  defaultValue,
+  getSchemaTpl,
+  registerEditorPlugin,
+  BasePlugin
 } from 'amis-editor-core';
-
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 export class KVControlPlugin extends BasePlugin {
   static id = 'KVControlPlugin';
   static scene = ['layout'];
@@ -113,17 +112,20 @@ export class KVControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputNumber.tsx b/packages/amis-editor/src/plugin/Form/InputNumber.tsx
index 39ad558d7..113594fd0 100644
--- a/packages/amis-editor/src/plugin/Form/InputNumber.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputNumber.tsx
@@ -3,25 +3,22 @@ import {
   getI18nEnabled,
   RAW_TYPE_MAP,
   RendererPluginAction,
-  RendererPluginEvent
-} from 'amis-editor-core';
-import flatten from 'lodash/flatten';
-import {ContainerWrapper} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {isObject} from 'amis-editor-core';
-import {
+  RendererPluginEvent,
   BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo,
-  BaseEventContext
+  BaseEventContext,
+  registerEditorPlugin,
+  defaultValue,
+  getSchemaTpl,
+  tipedLabel
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {inputStateTpl} from '../../renderer/style-control/helper';
 import {Schema} from 'amis-core';
 import type {SchemaType} from 'amis';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class NumberControlPlugin extends BasePlugin {
   static id = 'NumberControlPlugin';
@@ -42,6 +39,7 @@ export class NumberControlPlugin extends BasePlugin {
     type: 'input-number',
     label: '数字',
     name: 'number',
+    showSteps: true,
     keyboard: true
   };
   previewSchema: any = {
@@ -137,17 +135,20 @@ export class NumberControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空数字框内容'
+      description: '清空数字框内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置为默认值'
+      description: '重置为默认值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -210,6 +211,13 @@ export class NumberControlPlugin extends BasePlugin {
                   label: '最大值',
                   valueType: 'number'
                 }),
+                {
+                  type: 'switch',
+                  label: '显示上下按钮',
+                  name: 'showSteps',
+                  value: true,
+                  inputClassName: 'is-inline'
+                },
                 {
                   type: 'input-number',
                   name: 'step',
@@ -217,6 +225,7 @@ export class NumberControlPlugin extends BasePlugin {
                   min: 0,
                   value: 1,
                   precision: '${precision}',
+                  visibleOn: '${showSteps}',
                   strictMode: false
                 },
                 {
@@ -322,16 +331,26 @@ export class NumberControlPlugin extends BasePlugin {
                   )
                 ]
               },
-              getSchemaTpl('theme:cssCode', {
-                themeClass: [
+              getSchemaTpl('theme:singleCssCode', {
+                selectors: [
                   {
-                    name: '数字输入框',
-                    value: '',
-                    className: 'inputControlClassName',
-                    state: ['default', 'hover', 'active']
+                    label: '表单项基本样式',
+                    isRoot: true,
+                    selector: '.cxd-from-item'
+                  },
+                  {
+                    label: '标题样式',
+                    selector: '.cxd-Form-label'
+                  },
+                  {
+                    label: '数字框基本样式',
+                    selector: '.cxd-Number'
+                  },
+                  {
+                    label: '输入框样式',
+                    selector: '.cxd-Number-input'
                   }
-                ],
-                isFormItem: true
+                ]
               })
             ],
             {...context?.schema, configTitle: 'style'}
diff --git a/packages/amis-editor/src/plugin/Form/InputRange.tsx b/packages/amis-editor/src/plugin/Form/InputRange.tsx
index 20db6a195..17c60ab24 100644
--- a/packages/amis-editor/src/plugin/Form/InputRange.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputRange.tsx
@@ -1,4 +1,5 @@
 import {isObject} from 'amis';
+import type {IFormStore, IFormItemStore} from 'amis-core';
 import {
   BasePlugin,
   defaultValue,
@@ -6,10 +7,6 @@ import {
   tipedLabel,
   registerEditorPlugin
 } from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-
-import type {IFormStore, IFormItemStore} from 'amis-core';
 import type {
   EditorNodeType,
   RendererPluginAction,
@@ -17,6 +14,11 @@ import type {
   BaseEventContext,
   EditorManager
 } from 'amis-editor-core';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 export class RangeControlPlugin extends BasePlugin {
   static id = 'RangeControlPlugin';
@@ -155,17 +157,20 @@ export class RangeControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除输入框'
+      description: '清除输入框',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputRating.tsx b/packages/amis-editor/src/plugin/Form/InputRating.tsx
index 2c4693465..2c3f79ec7 100644
--- a/packages/amis-editor/src/plugin/Form/InputRating.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputRating.tsx
@@ -4,13 +4,19 @@ import {
   getI18nEnabled,
   getSchemaTpl,
   isObject,
-  undefinedPipeOut
+  undefinedPipeOut,
+  RendererPluginAction,
+  RendererPluginEvent,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  tipedLabel
 } from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext, tipedLabel} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 export class RateControlPlugin extends BasePlugin {
   static id = 'RateControlPlugin';
@@ -80,17 +86,20 @@ export class RateControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空评分值'
+      description: '清空评分值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputTable.tsx b/packages/amis-editor/src/plugin/Form/InputTable.tsx
index 09e22850a..d52c16fab 100644
--- a/packages/amis-editor/src/plugin/Form/InputTable.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputTable.tsx
@@ -12,18 +12,17 @@ import {
   RendererPluginAction,
   tipedLabel,
   getI18nEnabled,
-  repeatArray,
-  mockValue,
   EditorNodeType,
   EditorManager,
   RAW_TYPE_MAP
 } from 'amis-editor-core';
-import {setVariable, someTree} from 'amis-core';
+import {someTree} from 'amis-core';
 import {DSBuilderManager} from '../../builder/DSBuilderManager';
 import {ValidatorTag} from '../../validator';
 import {
   getEventControlConfig,
-  getArgsWrapper
+  getArgsWrapper,
+  getActionCommonProps
 } from '../../renderer/event-control/helper';
 import cloneDeep from 'lodash/cloneDeep';
 import {
@@ -951,7 +950,8 @@ export class TableControlPlugin extends BasePlugin {
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     },
     {
       actionType: 'addItem',
@@ -1101,7 +1101,8 @@ export class TableControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空组件数据'
+      description: '清空组件数据',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'initDrag',
diff --git a/packages/amis-editor/src/plugin/Form/InputTag.tsx b/packages/amis-editor/src/plugin/Form/InputTag.tsx
index ac57c2e27..50677b5ae 100644
--- a/packages/amis-editor/src/plugin/Form/InputTag.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputTag.tsx
@@ -2,21 +2,17 @@ import {
   EditorManager,
   EditorNodeType,
   getSchemaTpl,
-  tipedLabel
-} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {
+  tipedLabel,
   BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo,
-  BaseEventContext
+  BaseEventContext,
+  registerEditorPlugin,
+  RendererPluginAction,
+  RendererPluginEvent
 } from 'amis-editor-core';
-
 import {formItemControl} from '../../component/BaseControl';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import type {Schema} from 'amis';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 export class TagControlPlugin extends BasePlugin {
   static id = 'TagControlPlugin';
@@ -153,17 +149,20 @@ export class TagControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置为默认值'
+      description: '重置为默认值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx
index 6fe286a26..2465de4d4 100644
--- a/packages/amis-editor/src/plugin/Form/InputText.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputText.tsx
@@ -2,21 +2,21 @@ import {
   EditorManager,
   EditorNodeType,
   RAW_TYPE_MAP,
-  registerEditorPlugin
-} from 'amis-editor-core';
-import {
+  registerEditorPlugin,
   BasePlugin,
-  BasicSubRenderInfo,
-  RendererEventContext,
-  SubRendererInfo,
-  BaseEventContext
+  BaseEventContext,
+  defaultValue,
+  getSchemaTpl,
+  tipedLabel
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
+import type {SchemaType} from 'amis';
 import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {inputStateTpl} from '../../renderer/style-control/helper';
 import {resolveOptionType} from '../../util';
-import type {SchemaType} from 'amis';
 
 const isText = 'this.type === "input-text"';
 const isPassword = 'this.type === "input-password"';
@@ -187,22 +187,26 @@ export class TextControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空输入框内容'
+      description: '清空输入框内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx
index c2defef53..0166d52de 100644
--- a/packages/amis-editor/src/plugin/Form/InputTree.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx
@@ -3,20 +3,28 @@ import {
   EditorNodeType,
   getI18nEnabled,
   RendererPluginAction,
-  RendererPluginEvent
+  RendererPluginEvent,
+  registerEditorPlugin,
+  defaultValue,
+  getSchemaTpl,
+  BaseEventContext,
+  BasePlugin,
+  tipedLabel,
+  diff
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BaseEventContext, BasePlugin} from 'amis-editor-core';
-import cloneDeep from 'lodash/cloneDeep';
+import type {Schema} from 'amis';
 import {
   getArgsWrapper,
   getEventControlConfig
 } from '../../renderer/event-control/helper';
-import {tipedLabel} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {resolveOptionType, TREE_BASE_EVENTS} from '../../util';
-import type {Schema} from 'amis';
+import {
+  resolveOptionType,
+  schemaArrayFormat,
+  schemaToArray,
+  TREE_BASE_EVENTS
+} from '../../util';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 // 树组件公共动作
 export const TreeCommonAction: RendererPluginAction[] = [
@@ -176,6 +184,8 @@ export class TreeControlPlugin extends BasePlugin {
 
   panelTitle = '树选择';
 
+  regions = [{key: 'toolbar', label: '工具栏', preferTag: '工具栏内容'}];
+
   // 事件定义
   events: (schema: any) => RendererPluginEvent[] = (schema: any) =>
     TREE_BASE_EVENTS(schema);
@@ -187,9 +197,9 @@ export class TreeControlPlugin extends BasePlugin {
       actionLabel: '展开',
       description: '展开指定层级',
       innerArgs: ['openLevel'],
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             展开到第
             <span className="variable-left variable-right">
@@ -212,29 +222,101 @@ export class TreeControlPlugin extends BasePlugin {
     {
       actionType: 'collapse',
       actionLabel: '收起',
-      description: '收起树节点'
+      description: '收起树节点',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">{info?.rendererLabel}</span>
+            {info?.args?.closeLevel ? (
+              <>
+                收起到第
+                <span className="variable-left variable-right">
+                  {info?.args?.closeLevel}
+                </span>
+                层
+              </>
+            ) : (
+              '收起'
+            )}
+          </div>
+        );
+      },
+      innerArgs: ['closeLevel'],
+      schema: getArgsWrapper(
+        getSchemaTpl('formulaControl', {
+          name: 'closeLevel',
+          label: '收起层级',
+          variables: '${variables}',
+          size: 'lg',
+          mode: 'horizontal',
+          horizontal: {
+            left: 'normal'
+          }
+        })
+      )
     },
     /** 新增、编辑、删除 */
     ...TreeCommonAction,
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除数据'
+      description: '清除数据',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置数据'
+      description: '重置数据',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
+    },
+    // 检索
+    {
+      actionType: 'search',
+      actionLabel: '搜索',
+      description: '搜索当前数据源内的选项',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">{info?.rendererLabel}</span>
+            {info?.args?.keyword ? (
+              <>
+                搜索
+                <span className="variable-left variable-right">
+                  {info?.args?.keyword}
+                </span>
+                的选项
+              </>
+            ) : (
+              '搜索'
+            )}
+          </div>
+        );
+      },
+      innerArgs: ['keyword'],
+      schema: getArgsWrapper(
+        getSchemaTpl('formulaControl', {
+          name: 'keyword',
+          label: '关键词',
+          variables: '${variables}',
+          size: 'lg',
+          mode: 'horizontal',
+          horizontal: {
+            left: 'normal'
+          }
+        })
+      )
     }
   ];
 
@@ -359,6 +441,14 @@ export class TreeControlPlugin extends BasePlugin {
                 name: 'cascade',
                 hiddenOn: '!this.multiple || !this.autoCheckChildren'
               }),
+              getSchemaTpl('switch', {
+                label: tipedLabel(
+                  '子节点反选取消父节点',
+                  '取消任意子节点选中状态的同时取消父节点选中状态'
+                ),
+                name: 'autoCancelParent',
+                hiddenOn: '!this.multiple || !this.cascade'
+              }),
               getSchemaTpl('switch', {
                 label: tipedLabel(
                   '值包含父节点',
@@ -414,6 +504,25 @@ export class TreeControlPlugin extends BasePlugin {
                 },
                 {context}
               ),
+              {
+                type: 'checkboxes',
+                name: 'nodeBehavior',
+                label: '节点行为',
+                value: ['check'],
+                joinValues: false,
+                extractValue: true,
+                inline: true,
+                options: [
+                  {
+                    label: '选中',
+                    value: 'check'
+                  },
+                  {
+                    label: '展开',
+                    value: 'unfold'
+                  }
+                ]
+              },
               getSchemaTpl('switch', {
                 label: '只可选择叶子节点',
                 name: 'onlyLeaf'
@@ -466,7 +575,57 @@ export class TreeControlPlugin extends BasePlugin {
                     name: 'removeTip'
                   }
                 ]
-              })
+              }),
+              {
+                type: 'select',
+                label: '操作栏位置',
+                value: '',
+                name: 'themeCss.actionControlClassName.marginLeft',
+                options: [
+                  {
+                    label: '左侧',
+                    value: ''
+                  },
+                  {
+                    label: '右侧',
+                    value: 'auto'
+                  }
+                ]
+              },
+              {
+                type: 'ae-switch-more',
+                mode: 'normal',
+                label: '自定义操作',
+                bulk: false,
+                name: 'itemActions',
+                formType: 'extend',
+                form: {
+                  body: [
+                    {
+                      type: 'button',
+                      level: 'primary',
+                      size: 'sm',
+                      block: true,
+                      onClick: this.editDetail.bind(this, context.id),
+                      label: '配置自定义操作模板'
+                    }
+                  ]
+                },
+                pipeIn: (value: any) => {
+                  return value !== undefined;
+                },
+                pipeOut: (value: any) => {
+                  if (value === true) {
+                    return {
+                      type: 'button',
+                      icon: 'fa fa-plus',
+                      level: 'link',
+                      size: 'xs'
+                    };
+                  }
+                  return value ? value : undefined;
+                }
+              }
             ]
           },
           {
@@ -546,19 +705,6 @@ export class TreeControlPlugin extends BasePlugin {
                 label: tipedLabel('显示层级展开线', '显示树层级展开线'),
                 name: 'showOutline'
               }),
-              getSchemaTpl('switch', {
-                name: 'withChildren',
-                label: '数值是否携带子节点',
-                visibleOn: 'this.cascade !== true && this.multiple',
-                disabledOn: 'this.onlyChildren'
-              }),
-
-              getSchemaTpl('switch', {
-                name: 'onlyChildren',
-                label: '数值是否只包含子节点',
-                visibleOn: 'this.cascade !== true && this.multiple',
-                disabledOn: 'this.withChildren'
-              }),
               {
                 type: 'ae-Switch-More',
                 mode: 'normal',
@@ -598,13 +744,32 @@ export class TreeControlPlugin extends BasePlugin {
       {
         title: '外观',
         body: getSchemaTpl('collapseGroup', [
-          getSchemaTpl('style:formItem', {renderer}),
-          getSchemaTpl('style:classNames', {
-            schema: [
-              getSchemaTpl('className', {
-                label: '外层容器',
-                name: 'treeContainerClassName'
-              })
+          getSchemaTpl('theme:formItem', {
+            schema: {
+              type: 'input-number',
+              label: '高度',
+              name: 'wrapperCustomStyle.root.height',
+              clearable: true,
+              unitOptions: ['px', '%', 'em', 'vh', 'vw']
+            }
+          }),
+          getSchemaTpl('theme:form-label'),
+          getSchemaTpl('theme:form-description'),
+          getSchemaTpl('theme:base', {
+            classname: 'toolbarControlClassName',
+            title: '工具栏样式',
+            visibleOn: 'this.searchable'
+          }),
+          getSchemaTpl('theme:singleCssCode', {
+            selectors: [
+              {
+                label: '树基本样式',
+                selector: '.cxd-TreeControl'
+              },
+              {
+                label: '树工具栏样式',
+                selector: '.cxd-Tabs-toolbar'
+              }
             ]
           })
         ])
@@ -671,6 +836,76 @@ export class TreeControlPlugin extends BasePlugin {
 
     return dataSchema;
   }
+
+  getSubEditorVariable(schema: any): Array<{label: string; children: any}> {
+    let labelField = schema?.labelField || 'label';
+    let valueField = schema?.valueField || 'value';
+
+    return [
+      {
+        label: '当前节点',
+        children: [
+          {
+            label: '节点索引',
+            value: 'index'
+          },
+          {
+            label: '节点名称',
+            value: labelField
+          },
+          {
+            label: '节点值',
+            value: valueField
+          },
+          {
+            label: '节点状态',
+            value: 'checked'
+          }
+        ]
+      }
+    ];
+  }
+
+  getDisplayField(data: any) {
+    if (
+      data.source ||
+      (data.map &&
+        Array.isArray(data.map) &&
+        data.map[0] &&
+        Object.keys(data.map[0]).length > 1)
+    ) {
+      return data.labelField ?? 'label';
+    }
+    return 'item';
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+    const defaultItemSchema = {
+      type: 'button',
+      icon: 'fa fa-plus',
+      level: 'link',
+      size: 'xs'
+    };
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置自定义操作模板',
+        value: schemaToArray(value.itemActions ?? defaultItemSchema),
+        slot: {
+          type: 'container',
+          body: '$$'
+        },
+        onChange: (newValue: any) => {
+          newValue = {...value, itemActions: schemaArrayFormat(newValue)};
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        }
+      });
+  }
 }
 
 registerEditorPlugin(TreeControlPlugin);
diff --git a/packages/amis-editor/src/plugin/Form/Item.tsx b/packages/amis-editor/src/plugin/Form/Item.tsx
index 90ded8f2d..7ffe536ff 100644
--- a/packages/amis-editor/src/plugin/Form/Item.tsx
+++ b/packages/amis-editor/src/plugin/Form/Item.tsx
@@ -15,8 +15,12 @@ import {
 import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 import find from 'lodash/find';
 import {JSONDelete, JSONPipeIn, JSONUpdate} from 'amis-editor-core';
-import {SUPPORT_STATIC_FORMITEM_CMPTS} from '../../renderer/event-control/helper';
-import {isExpression, resolveVariableAndFilter} from 'amis-core';
+import {NO_SUPPORT_STATIC_FORMITEM_CMPTS} from '../../renderer/event-control/constants';
+import {
+  isExpression,
+  resolveVariableAndFilter,
+  getRendererByName
+} from 'amis-core';
 
 export class ItemPlugin extends BasePlugin {
   static id = 'ItemPlugin';
@@ -59,7 +63,10 @@ export class ItemPlugin extends BasePlugin {
   }
   panelBodyCreator = (context: BaseEventContext) => {
     const type = context.schema.type || '';
-    const supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
+    const render = getRendererByName(type);
+    // 支持静态表单项条件：是表单项组件，切不在不支持静态列表组件中
+    const supportStatic =
+      !!render?.isFormItem && !NO_SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
     const ignoreName = ~['button', 'submit', 'reset'].indexOf(type);
     const notRequiredName = ~[
       'button-toobar',
diff --git a/packages/amis-editor/src/plugin/Form/ListSelect.tsx b/packages/amis-editor/src/plugin/Form/ListSelect.tsx
index cc64ddcc8..a6c8f314a 100644
--- a/packages/amis-editor/src/plugin/Form/ListSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ListSelect.tsx
@@ -2,23 +2,25 @@ import {
   EditorNodeType,
   JSONPipeIn,
   JSONPipeOut,
-  getSchemaTpl
+  getSchemaTpl,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  diff
 } from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext, diff} from 'amis-editor-core';
-import {formItemControl} from '../../component/BaseControl';
 import type {
   EditorManager,
   RendererPluginAction,
   RendererPluginEvent
 } from 'amis-editor-core';
 import type {Schema} from 'amis';
+import {formItemControl} from '../../component/BaseControl';
 import {
   resolveOptionEventDataSchame,
   resolveOptionType,
-  schemaArrayFormat,
-  schemaToArray
+  schemaArrayFormat
 } from '../../util';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 export class ListControlPlugin extends BasePlugin {
   static id = 'ListControlPlugin';
@@ -102,22 +104,26 @@ export class ListControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/LocationPicker.tsx b/packages/amis-editor/src/plugin/Form/LocationPicker.tsx
index cf336f51b..44606b538 100644
--- a/packages/amis-editor/src/plugin/Form/LocationPicker.tsx
+++ b/packages/amis-editor/src/plugin/Form/LocationPicker.tsx
@@ -1,8 +1,18 @@
-import {EditorNodeType, getSchemaTpl, tipedLabel} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  EditorNodeType,
+  getSchemaTpl,
+  tipedLabel,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  RendererPluginAction,
+  RendererPluginEvent
+} from 'amis-editor-core';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {inputStateTpl} from '../../renderer/style-control/helper';
 import {ValidatorTag} from '../../validator';
 
 export class LocationControlPlugin extends BasePlugin {
@@ -89,17 +99,20 @@ export class LocationControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
index d19e28d91..a60eab886 100644
--- a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
+++ b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
@@ -10,7 +10,10 @@ import {
   EditorNodeType
 } from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 export class MatrixControlPlugin extends BasePlugin {
   static id = 'MatrixControlPlugin';
@@ -95,22 +98,26 @@ export class MatrixControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置为默认值'
+      description: '重置为默认值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx
index 4d376185b..0cd368473 100644
--- a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx
@@ -2,15 +2,20 @@ import {
   EditorManager,
   EditorNodeType,
   RendererPluginAction,
-  RendererPluginEvent
+  RendererPluginEvent,
+  getSchemaTpl,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  tipedLabel
 } from 'amis-editor-core';
-import {getSchemaTpl} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext, tipedLabel} from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import type {Schema} from 'amis';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class NestedSelectControlPlugin extends BasePlugin {
@@ -197,22 +202,26 @@ export class NestedSelectControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
   panelBodyCreator = (context: BaseEventContext) => {
diff --git a/packages/amis-editor/src/plugin/Form/Radios.tsx b/packages/amis-editor/src/plugin/Form/Radios.tsx
index 7b35372ac..c5b526dad 100644
--- a/packages/amis-editor/src/plugin/Form/Radios.tsx
+++ b/packages/amis-editor/src/plugin/Form/Radios.tsx
@@ -3,16 +3,20 @@ import {
   EditorNodeType,
   RAW_TYPE_MAP,
   defaultValue,
-  getSchemaTpl
+  getSchemaTpl,
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  RendererPluginAction,
+  RendererPluginEvent
 } from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import type {Schema, SchemaType} from 'amis';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class RadiosControlPlugin extends BasePlugin {
@@ -100,22 +104,26 @@ export class RadiosControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -148,6 +156,7 @@ export class RadiosControlPlugin extends BasePlugin {
           },
           {
             title: '选项',
+            id: 'properties-options',
             body: [getSchemaTpl('optionControlV2'), getSchemaTpl('selectFirst')]
           },
           getSchemaTpl('status', {isFormItem: true}),
diff --git a/packages/amis-editor/src/plugin/Form/Select.tsx b/packages/amis-editor/src/plugin/Form/Select.tsx
index 4ac88f40d..14925df26 100644
--- a/packages/amis-editor/src/plugin/Form/Select.tsx
+++ b/packages/amis-editor/src/plugin/Form/Select.tsx
@@ -1,27 +1,12 @@
-import React from 'react';
-import omit from 'lodash/omit';
-import {findObjectsWithKey} from 'amis-core';
-import {Button, Icon} from 'amis-ui';
+import type {Schema, SchemaType} from 'amis';
 import {
   registerEditorPlugin,
   getSchemaTpl,
   BasePlugin,
   tipedLabel,
-  JSONPipeOut,
   undefinedPipeOut,
   RAW_TYPE_MAP
 } from 'amis-editor-core';
-
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {
-  OPTION_EDIT_EVENTS,
-  OPTION_EDIT_EVENTS_OLD,
-  resolveOptionEventDataSchame,
-  resolveOptionType
-} from '../../util';
-
-import type {Schema, SchemaType} from 'amis';
 import type {
   EditorNodeType,
   RendererPluginAction,
@@ -29,6 +14,19 @@ import type {
   BaseEventContext,
   EditorManager
 } from 'amis-editor-core';
+
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
+import {
+  OPTION_EDIT_EVENTS,
+  OPTION_EDIT_EVENTS_OLD,
+  resolveOptionEventDataSchame,
+  resolveOptionType
+} from '../../util';
+
 import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class SelectControlPlugin extends BasePlugin {
@@ -173,22 +171,26 @@ export class SelectControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -199,6 +201,7 @@ export class SelectControlPlugin extends BasePlugin {
         body: getSchemaTpl('collapseGroup', [
           {
             title: '基本',
+            id: 'properties-basic',
             body: [
               getSchemaTpl('layout:originPosition', {value: 'left-top'}),
               getSchemaTpl('formItemName', {
@@ -232,6 +235,7 @@ export class SelectControlPlugin extends BasePlugin {
           },
           {
             title: '选项',
+            id: 'properties-options',
             body: [
               getSchemaTpl('optionControlV2'),
               getSchemaTpl('selectFirst', {
diff --git a/packages/amis-editor/src/plugin/Form/Switch.tsx b/packages/amis-editor/src/plugin/Form/Switch.tsx
index 21f09ba59..6545d73da 100644
--- a/packages/amis-editor/src/plugin/Form/Switch.tsx
+++ b/packages/amis-editor/src/plugin/Form/Switch.tsx
@@ -2,13 +2,9 @@ import {
   defaultValue,
   getSchemaTpl,
   undefinedPipeOut,
-  valuePipeOut
-} from 'amis-editor-core';
-import {registerEditorPlugin, tipedLabel} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import type {
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
   EditorManager,
   EditorNodeType,
   RendererPluginAction,
@@ -16,6 +12,11 @@ import type {
 } from 'amis-editor-core';
 import {isExpression, isPureVariable} from 'amis-core';
 import omit from 'lodash/omit';
+import {ValidatorTag} from '../../validator';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 
 export class SwitchControlPlugin extends BasePlugin {
   static id = 'SwitchControlPlugin';
@@ -97,17 +98,20 @@ export class SwitchControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除选中值'
+      description: '清除选中值',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
index cd6401c59..02c3b2e3f 100644
--- a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
+++ b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
@@ -3,13 +3,17 @@ import {
   EditorManager,
   EditorNodeType,
   getSchemaTpl,
-  tipedLabel
+  tipedLabel,
+  BasePlugin,
+  BaseEventContext,
+  registerEditorPlugin,
+  RendererPluginAction,
+  RendererPluginEvent
 } from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 
 export class TabsTransferPlugin extends BasePlugin {
@@ -196,20 +200,22 @@ export class TabsTransferPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空选中内容'
+      description: '清空选中内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置选择的内容'
+      description: '重置选择的内容',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'changeTabKey',
       actionLabel: '修改选中tab',
       description: '修改当前选中tab，来选择其他选项',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             修改选中tab
           </div>
@@ -219,7 +225,8 @@ export class TabsTransferPlugin extends BasePlugin {
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/Textarea.tsx b/packages/amis-editor/src/plugin/Form/Textarea.tsx
index c345a0798..bee5edf07 100644
--- a/packages/amis-editor/src/plugin/Form/Textarea.tsx
+++ b/packages/amis-editor/src/plugin/Form/Textarea.tsx
@@ -1,11 +1,18 @@
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, tipedLabel} from 'amis-editor-core';
-
+import {
+  defaultValue,
+  getSchemaTpl,
+  registerEditorPlugin,
+  BasePlugin,
+  tipedLabel,
+  RendererPluginAction,
+  RendererPluginEvent
+} from 'amis-editor-core';
 import type {BaseEventContext} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../../renderer/event-control/helper';
 import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class TextareaControlPlugin extends BasePlugin {
@@ -115,17 +122,20 @@ export class TextareaControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空输入框内容'
+      description: '清空输入框内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '将值重置为初始值'
+      description: '将值重置为初始值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Form/Transfer.tsx b/packages/amis-editor/src/plugin/Form/Transfer.tsx
index b0b43fef6..0bf9a3174 100644
--- a/packages/amis-editor/src/plugin/Form/Transfer.tsx
+++ b/packages/amis-editor/src/plugin/Form/Transfer.tsx
@@ -2,21 +2,20 @@ import {
   EditorManager,
   EditorNodeType,
   defaultValue,
-  getSchemaTpl
-} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin, BaseEventContext} from 'amis-editor-core';
-import {getEventControlConfig} from '../../renderer/event-control/helper';
-import {
+  getSchemaTpl,
+  BasePlugin,
+  BaseEventContext,
+  registerEditorPlugin,
+  tipedLabel,
   RendererPluginAction,
   RendererPluginEvent,
   undefinedPipeOut
 } from 'amis-editor-core';
-
-import {ValidatorTag} from '../../validator';
-import {tipedLabel} from 'amis-editor-core';
-import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
 import type {Schema} from 'amis';
+import {getEventControlConfig} from '../../renderer/event-control/helper';
+import {ValidatorTag} from '../../validator';
+import {resolveOptionEventDataSchame, resolveOptionType} from '../../util';
+import {getActionCommonProps} from '../../renderer/event-control/helper';
 
 export class TransferPlugin extends BasePlugin {
   static id = 'TransferPlugin';
@@ -118,22 +117,26 @@ export class TransferPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空选中内容'
+      description: '清空选中内容',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置选择的内容'
+      description: '重置选择的内容',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'selectAll',
       actionLabel: '全选',
-      description: '选中所有选项'
+      description: '选中所有选项',
+      ...getActionCommonProps('selectAll')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新，多值用“,”分隔'
+      description: '触发组件数据更新，多值用“,”分隔',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -247,11 +250,6 @@ export class TransferPlugin extends BasePlugin {
                 }
               },
 
-              getSchemaTpl('optionControl', {
-                visibleOn: 'this.selectMode === "list"',
-                multiple: true
-              }),
-
               getSchemaTpl(
                 'loadingConfig',
                 {
@@ -259,6 +257,10 @@ export class TransferPlugin extends BasePlugin {
                 },
                 {context}
               ),
+              getSchemaTpl('optionControl', {
+                visibleOn: 'this.selectMode === "list"',
+                multiple: true
+              }),
 
               {
                 type: 'ae-transferTableControl',
@@ -291,6 +293,21 @@ export class TransferPlugin extends BasePlugin {
                 label: '可检索',
                 name: 'searchable'
               }),
+              getSchemaTpl('switch', {
+                label: tipedLabel(
+                  '仅包含子节点的值',
+                  '仅在autoCheckChildren=true时生效'
+                ),
+                value: true,
+                name: 'onlyChildren',
+                visibleOn: 'this.selectMode === "tree"'
+              }),
+              getSchemaTpl('switch', {
+                label: '选中父节点自动选中子节点',
+                name: 'autoCheckChildren',
+                value: true,
+                visibleOn: 'this.selectMode === "tree"'
+              }),
 
               getSchemaTpl('optionsMenuTpl', {
                 manager: this.manager,
diff --git a/packages/amis-editor/src/plugin/Form/TransferPicker.tsx b/packages/amis-editor/src/plugin/Form/TransferPicker.tsx
index 591bb2504..36877fbc8 100644
--- a/packages/amis-editor/src/plugin/Form/TransferPicker.tsx
+++ b/packages/amis-editor/src/plugin/Form/TransferPicker.tsx
@@ -1,4 +1,4 @@
-import {registerEditorPlugin} from 'amis-editor-core';
+import {registerEditorPlugin, RendererPluginEvent} from 'amis-editor-core';
 
 import {TransferPlugin} from './Transfer';
 
@@ -45,6 +45,32 @@ export class TransferPickerPlugin extends TransferPlugin {
     ]
   };
 
+  events: RendererPluginEvent[] = [
+    ...this.events,
+    {
+      eventName: 'itemClick',
+      eventLabel: '点击选项',
+      description: '选项被点击时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            data: {
+              type: 'object',
+              title: '数据',
+              properties: {
+                item: {
+                  type: 'object',
+                  title: '当前选项'
+                }
+              }
+            }
+          }
+        }
+      ]
+    }
+  ];
+
   notRenderFormZone = true;
 }
 
diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
index a834665dc..828e0f521 100644
--- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
@@ -3,24 +3,29 @@ import {
   EditorNodeType,
   getI18nEnabled,
   RendererPluginAction,
-  RendererPluginEvent
+  RendererPluginEvent,
+  defaultValue,
+  getSchemaTpl,
+  registerEditorPlugin,
+  BaseEventContext,
+  BasePlugin,
+  tipedLabel,
+  diff
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BaseEventContext, BasePlugin} from 'amis-editor-core';
-import cloneDeep from 'lodash/cloneDeep';
 import {
-  getArgsWrapper,
-  getEventControlConfig
+  getEventControlConfig,
+  getActionCommonProps
 } from '../../renderer/event-control/helper';
 import {ValidatorTag} from '../../validator';
-import {tipedLabel} from 'amis-editor-core';
 import {
   resolveOptionEventDataSchame,
   resolveOptionType,
+  schemaArrayFormat,
+  schemaToArray,
   TREE_BASE_EVENTS
 } from '../../util';
 import {TreeCommonAction} from './InputTree';
+import {inputStateTpl} from '../../renderer/style-control/helper';
 
 export class TreeSelectControlPlugin extends BasePlugin {
   static id = 'TreeSelectControlPlugin';
@@ -154,22 +159,26 @@ export class TreeSelectControlPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清除数据'
+      description: '清除数据',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置数据'
+      description: '重置数据',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     }
   ];
 
@@ -297,6 +306,14 @@ export class TreeSelectControlPlugin extends BasePlugin {
                 name: 'cascade',
                 hiddenOn: '!this.multiple || !this.autoCheckChildren'
               }),
+              getSchemaTpl('switch', {
+                label: tipedLabel(
+                  '子节点反选取消父节点',
+                  '取消任意子节点选中状态的同时取消父节点选中状态'
+                ),
+                name: 'autoCancelParent',
+                hiddenOn: '!this.multiple || !this.cascade'
+              }),
               getSchemaTpl('switch', {
                 label: tipedLabel(
                   '值包含父节点',
@@ -353,6 +370,25 @@ export class TreeSelectControlPlugin extends BasePlugin {
                 },
                 {context}
               ),
+              {
+                type: 'checkboxes',
+                name: 'nodeBehavior',
+                label: '节点行为',
+                value: ['check'],
+                joinValues: false,
+                extractValue: true,
+                inline: true,
+                options: [
+                  {
+                    label: '选中',
+                    value: 'check'
+                  },
+                  {
+                    label: '展开',
+                    value: 'unfold'
+                  }
+                ]
+              },
               getSchemaTpl('switch', {
                 label: '只可选择叶子节点',
                 name: 'onlyLeaf'
@@ -404,7 +440,57 @@ export class TreeSelectControlPlugin extends BasePlugin {
                     name: 'removeTip'
                   }
                 ]
-              })
+              }),
+              {
+                type: 'select',
+                label: '操作栏位置',
+                value: '',
+                name: 'themeCss.actionControlClassName.marginLeft',
+                options: [
+                  {
+                    label: '左侧',
+                    value: ''
+                  },
+                  {
+                    label: '右侧',
+                    value: 'auto'
+                  }
+                ]
+              },
+              {
+                type: 'ae-switch-more',
+                mode: 'normal',
+                label: '自定义操作',
+                bulk: false,
+                name: 'itemActions',
+                formType: 'extend',
+                form: {
+                  body: [
+                    {
+                      type: 'button',
+                      level: 'primary',
+                      size: 'sm',
+                      block: true,
+                      onClick: this.editDetail.bind(this, context.id),
+                      label: '配置自定义操作模板'
+                    }
+                  ]
+                },
+                pipeIn: (value: any) => {
+                  return value !== undefined;
+                },
+                pipeOut: (value: any) => {
+                  if (value === true) {
+                    return {
+                      type: 'button',
+                      icon: 'fa fa-plus',
+                      level: 'link',
+                      size: 'xs'
+                    };
+                  }
+                  return value ? value : undefined;
+                }
+              }
             ]
           },
           {
@@ -484,19 +570,6 @@ export class TreeSelectControlPlugin extends BasePlugin {
                 label: tipedLabel('显示层级展开线', '显示树层级展开线'),
                 name: 'showOutline'
               }),
-              getSchemaTpl('switch', {
-                name: 'withChildren',
-                label: '数值是否携带子节点',
-                visibleOn: 'this.cascade !== true && this.multiple',
-                disabledOn: 'this.onlyChildren'
-              }),
-
-              getSchemaTpl('switch', {
-                name: 'onlyChildren',
-                label: '数值是否只包含子节点',
-                visibleOn: 'this.cascade !== true && this.multiple',
-                disabledOn: 'this.withChildren'
-              }),
               {
                 type: 'ae-Switch-More',
                 mode: 'normal',
@@ -536,15 +609,18 @@ export class TreeSelectControlPlugin extends BasePlugin {
       {
         title: '外观',
         body: getSchemaTpl('collapseGroup', [
-          getSchemaTpl('style:formItem', {renderer}),
-          getSchemaTpl('style:classNames', {
-            schema: [
-              getSchemaTpl('className', {
-                label: '外层容器',
-                name: 'treeContainerClassName'
-              })
+          getSchemaTpl('theme:formItem'),
+          getSchemaTpl('theme:form-label'),
+          getSchemaTpl('theme:form-description'),
+          {
+            title: '输入框样式',
+            body: [
+              ...inputStateTpl(
+                'themeCss.inputControlClassName',
+                '--input-default'
+              )
             ]
-          })
+          }
         ])
       },
       {
@@ -609,6 +685,76 @@ export class TreeSelectControlPlugin extends BasePlugin {
 
     return dataSchema;
   }
+
+  getSubEditorVariable(schema: any): Array<{label: string; children: any}> {
+    let labelField = schema?.labelField || 'label';
+    let valueField = schema?.valueField || 'value';
+
+    return [
+      {
+        label: '节点选项',
+        children: [
+          {
+            label: '节点索引',
+            value: 'index'
+          },
+          {
+            label: '节点名称',
+            value: labelField
+          },
+          {
+            label: '节点值',
+            value: valueField
+          },
+          {
+            label: '节点状态',
+            value: 'checked'
+          }
+        ]
+      }
+    ];
+  }
+
+  getDisplayField(data: any) {
+    if (
+      data.source ||
+      (data.map &&
+        Array.isArray(data.map) &&
+        data.map[0] &&
+        Object.keys(data.map[0]).length > 1)
+    ) {
+      return data.labelField ?? 'label';
+    }
+    return 'item';
+  }
+
+  editDetail(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+    const defaultItemSchema = {
+      type: 'button',
+      icon: 'fa fa-plus',
+      level: 'link',
+      size: 'xs'
+    };
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置自定义操作模板',
+        value: schemaToArray(value.itemActions ?? defaultItemSchema),
+        slot: {
+          type: 'container',
+          body: '$$'
+        },
+        onChange: (newValue: any) => {
+          newValue = {...value, itemActions: schemaArrayFormat(newValue)};
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        }
+      });
+  }
 }
 
 registerEditorPlugin(TreeSelectControlPlugin);
diff --git a/packages/amis-editor/src/plugin/Mapping.tsx b/packages/amis-editor/src/plugin/Mapping.tsx
index 2da3c22ee..ee5624e07 100644
--- a/packages/amis-editor/src/plugin/Mapping.tsx
+++ b/packages/amis-editor/src/plugin/Mapping.tsx
@@ -58,6 +58,7 @@ export class MappingPlugin extends BasePlugin {
           body: getSchemaTpl('collapseGroup', [
             {
               title: '基本',
+              id: 'properties-basic',
               body: [
                 isUnderField
                   ? {
diff --git a/packages/amis-editor/src/plugin/Nav.tsx b/packages/amis-editor/src/plugin/Nav.tsx
index 6157c9c14..52feda67b 100644
--- a/packages/amis-editor/src/plugin/Nav.tsx
+++ b/packages/amis-editor/src/plugin/Nav.tsx
@@ -10,7 +10,11 @@ import {
   RendererPluginAction,
   tipedLabel
 } from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
+
 export class NavPlugin extends BasePlugin {
   static id = 'NavPlugin';
   static scene = ['layout'];
@@ -254,12 +258,14 @@ export class NavPlugin extends BasePlugin {
     {
       actionType: 'collapse',
       actionLabel: '菜单折叠',
-      description: '触发组件的折叠与展开'
+      description: '触发组件的折叠与展开',
+      ...getActionCommonProps('collapse')
     },
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Others/TableCell.tsx b/packages/amis-editor/src/plugin/Others/TableCell.tsx
index 73cb4146d..aac1f64b1 100644
--- a/packages/amis-editor/src/plugin/Others/TableCell.tsx
+++ b/packages/amis-editor/src/plugin/Others/TableCell.tsx
@@ -1,7 +1,11 @@
 import {Button} from 'amis';
 import React from 'react';
 import get from 'lodash/get';
-import {getI18nEnabled, registerEditorPlugin} from 'amis-editor-core';
+import {
+  getI18nEnabled,
+  registerEditorPlugin,
+  tipedLabel
+} from 'amis-editor-core';
 import {
   BasePlugin,
   BasicRendererInfo,
@@ -427,10 +431,35 @@ export class TableCellPlugin extends BasePlugin {
                   ? value.replace(/\*\s*,\s*|\s*,\s*\*/g, '')
                   : value
             },
-
+            {
+              name: 'textOverflow',
+              type: 'button-group-select',
+              label: '文本超出处理',
+              size: 'xs',
+              mode: 'inline',
+              inputClassName: 'mt-1 w-full',
+              pipeIn: defaultValue('default'),
+              options: [
+                {
+                  label: '默认',
+                  value: 'default'
+                },
+                {
+                  label: '溢出隐藏',
+                  value: 'ellipsis'
+                },
+                {
+                  label: '取消换行',
+                  value: 'noWrap'
+                }
+              ]
+            },
             getSchemaTpl('switch', {
               name: 'className',
-              label: '内容强制换行',
+              label: tipedLabel(
+                '允许任意字符间断行',
+                '开启此项，换行处理将在任意字母处断行，长英文单词或长英文字符会被切断，如url链接'
+              ),
               pipeIn: (value: any) =>
                 typeof value === 'string' && /\word\-break\b/.test(value),
               pipeOut: (value: any, originValue: any) =>
diff --git a/packages/amis-editor/src/plugin/Page.tsx b/packages/amis-editor/src/plugin/Page.tsx
index a1c097e5e..5eca49a87 100644
--- a/packages/amis-editor/src/plugin/Page.tsx
+++ b/packages/amis-editor/src/plugin/Page.tsx
@@ -6,7 +6,10 @@ import {
   getSchemaTpl,
   defaultValue
 } from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import type {SchemaObject} from 'amis';
 import {tipedLabel} from 'amis-editor-core';
@@ -110,12 +113,14 @@ export class PagePlugin extends BasePlugin {
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '变量赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
@@ -222,6 +227,24 @@ export class PagePlugin extends BasePlugin {
                     inputClassName: 'is-inline',
                     pipeIn: defaultValue(true),
                     hiddenOn: 'this.regions && !this.regions.includes("aside")'
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'asidePosition',
+                    size: 'sm',
+                    label: '边栏位置',
+                    pipeIn: defaultValue('left'),
+                    options: [
+                      {
+                        label: '左',
+                        value: 'left'
+                      },
+                      {
+                        label: '右',
+                        value: 'right'
+                      }
+                    ],
+                    hiddenOn: 'this.regions && !this.regions.includes("aside")'
                   }
                 ]
               },
@@ -288,7 +311,7 @@ export class PagePlugin extends BasePlugin {
           body: [
             getSchemaTpl('collapseGroup', [
               ...getSchemaTpl('theme:common', {
-                exclude: ['layout'],
+                exclude: ['layout', 'theme-css-code'],
                 classname: 'baseControlClassName',
                 baseTitle: '基本样式',
                 extra: [
@@ -320,6 +343,31 @@ export class PagePlugin extends BasePlugin {
                     hiddenOn: 'this.regions && !this.regions.includes("aside")'
                   })
                 ]
+              }),
+              getSchemaTpl('theme:singleCssCode', {
+                selectors: [
+                  {
+                    label: '页面基本样式',
+                    isRoot: true,
+                    selector: '.cxd-Page'
+                  },
+                  {
+                    label: '页面内容区样式',
+                    selector: '.cxd-Page-body'
+                  },
+                  {
+                    label: '页面标题栏样式',
+                    selector: '.cxd-Page-title'
+                  },
+                  {
+                    label: '页面工具栏样式',
+                    selector: '.cxd-Page-toolbar'
+                  },
+                  {
+                    label: '页面边栏样式',
+                    selector: '.cxd-Page-aside'
+                  }
+                ]
               })
             ])
           ]
diff --git a/packages/amis-editor/src/plugin/Panel.tsx b/packages/amis-editor/src/plugin/Panel.tsx
index f5684fa7e..5a0f8533e 100644
--- a/packages/amis-editor/src/plugin/Panel.tsx
+++ b/packages/amis-editor/src/plugin/Panel.tsx
@@ -97,6 +97,7 @@ export class PanelPlugin extends BasePlugin {
             getSchemaTpl('collapseGroup', [
               {
                 className: 'p-none',
+                id: 'properties-basic',
                 title: '基本',
                 body: [
                   getSchemaTpl('layout:originPosition', {value: 'left-top'}),
@@ -199,6 +200,7 @@ export class PanelPlugin extends BasePlugin {
                     label: '主题',
                     type: 'select',
                     size: 'sm',
+                    id: 'panel-settings-panelClassName',
                     pipeIn: (value: any) =>
                       typeof value === 'string' &&
                       /(?:^|\s)(Panel\-\-(\w+))(?:$|\s)/.test(value)
diff --git a/packages/amis-editor/src/plugin/Progress.tsx b/packages/amis-editor/src/plugin/Progress.tsx
index 290cfa11f..3b316e195 100644
--- a/packages/amis-editor/src/plugin/Progress.tsx
+++ b/packages/amis-editor/src/plugin/Progress.tsx
@@ -1,9 +1,13 @@
-import {registerEditorPlugin, RendererPluginAction} from 'amis-editor-core';
-import {BaseEventContext, BasePlugin} from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import {tipedLabel} from 'amis-editor-core';
-import {ValidatorTag} from '../validator';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  registerEditorPlugin,
+  RendererPluginAction,
+  BaseEventContext,
+  BasePlugin,
+  defaultValue,
+  getSchemaTpl,
+  tipedLabel
+} from 'amis-editor-core';
+import {getActionCommonProps} from '../renderer/event-control/helper';
 
 export class ProgressPlugin extends BasePlugin {
   static id = 'ProgressPlugin';
@@ -37,12 +41,14 @@ export class ProgressPlugin extends BasePlugin {
     {
       actionType: 'reset',
       actionLabel: '重置',
-      description: '重置为默认值'
+      description: '重置为默认值',
+      ...getActionCommonProps('reset')
     },
     {
       actionType: 'setValue',
       actionLabel: '赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/SearchBox.tsx b/packages/amis-editor/src/plugin/SearchBox.tsx
index 080073927..fb54baeb7 100644
--- a/packages/amis-editor/src/plugin/SearchBox.tsx
+++ b/packages/amis-editor/src/plugin/SearchBox.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
 import {
   registerEditorPlugin,
   BaseEventContext,
   BasePlugin,
   RendererPluginEvent,
-  RendererPluginAction
+  RendererPluginAction,
+  getSchemaTpl
 } from 'amis-editor-core';
-import {getSchemaTpl} from 'amis-editor-core';
-import {getEventControlConfig} from '../renderer/event-control/helper';
-
 import type {Schema} from 'amis-core';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 
 export class SearchBoxPlugin extends BasePlugin {
   static id = 'SearchBoxPlugin';
@@ -144,12 +145,14 @@ export class SearchBoxPlugin extends BasePlugin {
     {
       actionType: 'clear',
       actionLabel: '清空',
-      description: '清空输入框'
+      description: '清空输入框',
+      ...getActionCommonProps('clear')
     },
     {
       actionType: 'setValue',
       actionLabel: '更新数据',
-      description: '更新数据'
+      description: '更新数据',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Service.tsx b/packages/amis-editor/src/plugin/Service.tsx
index f1ec52a63..486984047 100644
--- a/packages/amis-editor/src/plugin/Service.tsx
+++ b/packages/amis-editor/src/plugin/Service.tsx
@@ -16,7 +16,10 @@ import {
 } from 'amis-editor-core';
 import {DSBuilderManager} from '../builder/DSBuilderManager';
 import {DSFeatureEnum, ModelDSBuilderKey, ApiDSBuilderKey} from '../builder';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {
+  getEventControlConfig,
+  getActionCommonProps
+} from '../renderer/event-control/helper';
 
 import type {Schema} from 'amis-core';
 import type {
@@ -168,7 +171,8 @@ export class ServicePlugin extends BasePlugin {
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'rebuild',
@@ -178,7 +182,8 @@ export class ServicePlugin extends BasePlugin {
     {
       actionType: 'setValue',
       actionLabel: '变量赋值',
-      description: '更新数据域数据'
+      description: '更新数据域数据',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/plugin/Steps.tsx b/packages/amis-editor/src/plugin/Steps.tsx
index 1eb60ae98..7199aca67 100644
--- a/packages/amis-editor/src/plugin/Steps.tsx
+++ b/packages/amis-editor/src/plugin/Steps.tsx
@@ -107,6 +107,11 @@ export class StepsPlugin extends BasePlugin {
       {
         title: '外观',
         body: [
+          getSchemaTpl('switch', {
+            name: 'iconPosition',
+            label: '图标文字垂直展示',
+            value: false
+          }),
           {
             name: 'mode',
             type: 'select',
diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx
index 7910e876f..37cf6a44c 100644
--- a/packages/amis-editor/src/plugin/Table.tsx
+++ b/packages/amis-editor/src/plugin/Table.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import {Button, resolveVariable} from 'amis';
+import type {DataScope, SchemaObject} from 'amis';
 import {
   getI18nEnabled,
   RendererPluginAction,
-  RendererPluginEvent
-} from 'amis-editor-core';
-import {findTree, setVariable, someTree} from 'amis-core';
-import {registerEditorPlugin, repeatArray, diff} from 'amis-editor-core';
-import {
+  RendererPluginEvent,
   BasePlugin,
   BaseEventContext,
   PluginEvent,
@@ -16,13 +13,20 @@ import {
   BasicRendererInfo,
   PluginInterface,
   InsertEventContext,
-  ScaffoldForm
+  ScaffoldForm,
+  registerEditorPlugin,
+  repeatArray,
+  diff,
+  mockValue,
+  EditorNodeType,
+  defaultValue,
+  getSchemaTpl,
+  tipedLabel
 } from 'amis-editor-core';
+import type {EditorManager} from 'amis-editor-core';
+import {setVariable, someTree} from 'amis-core';
+import {reaction} from 'mobx';
 import {DSBuilderManager} from '../builder/DSBuilderManager';
-import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
-import {mockValue} from 'amis-editor-core';
-import {EditorNodeType} from 'amis-editor-core';
-import type {DataScope, SchemaObject} from 'amis';
 import {
   getEventControlConfig,
   getArgsWrapper
@@ -32,9 +36,7 @@ import {
   schemaToArray,
   resolveArrayDatasource
 } from '../util';
-import {reaction} from 'mobx';
-
-import type {EditorManager} from 'amis-editor-core';
+import {getActionCommonProps} from '../renderer/event-control/helper';
 
 export class TablePlugin extends BasePlugin {
   static id = 'TablePlugin';
@@ -464,7 +466,8 @@ export class TablePlugin extends BasePlugin {
     {
       actionType: 'selectAll',
       actionLabel: '设置全部选中',
-      description: '设置表格全部项选中'
+      description: '设置表格全部项选中',
+      ...getActionCommonProps('selectAll')
     },
     {
       actionType: 'clearAll',
diff --git a/packages/amis-editor/src/plugin/Table2.tsx b/packages/amis-editor/src/plugin/Table2.tsx
index c4783d036..2309199a4 100644
--- a/packages/amis-editor/src/plugin/Table2.tsx
+++ b/packages/amis-editor/src/plugin/Table2.tsx
@@ -33,6 +33,7 @@ import {resolveArrayDatasource} from '../util';
 import type {SchemaObject} from 'amis';
 import type {IFormItemStore, IFormStore} from 'amis-core';
 import type {EditorManager} from 'amis-editor-core';
+import {getActionCommonProps} from '../renderer/event-control/helper';
 
 export const Table2RenderereEvent: RendererPluginEvent[] = [
   {
@@ -307,7 +308,8 @@ export const Table2RendererAction: RendererPluginAction[] = [
   {
     actionType: 'selectAll',
     actionLabel: '设置全部选中',
-    description: '设置表格全部项选中'
+    description: '设置表格全部项选中',
+    ...getActionCommonProps('selectAll')
   },
   {
     actionType: 'clearAll',
diff --git a/packages/amis-editor/src/plugin/Tabs.tsx b/packages/amis-editor/src/plugin/Tabs.tsx
index bc5b4b612..76609d7f6 100644
--- a/packages/amis-editor/src/plugin/Tabs.tsx
+++ b/packages/amis-editor/src/plugin/Tabs.tsx
@@ -17,7 +17,6 @@ import findIndex from 'lodash/findIndex';
 import {RegionWrapper as Region} from 'amis-editor-core';
 import {Tab} from 'amis';
 import {tipedLabel} from 'amis-editor-core';
-import {ValidatorTag} from '../validator';
 import {
   getArgsWrapper,
   getEventControlConfig
@@ -89,6 +88,28 @@ export class TabsPlugin extends BasePlugin {
           }
         }
       ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '选项卡删除',
+      description: '选项卡删除',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            data: {
+              type: 'object',
+              title: '数据',
+              properties: {
+                value: {
+                  type: 'string',
+                  title: '选项卡索引'
+                }
+              }
+            }
+          }
+        }
+      ]
     }
   ];
 
@@ -96,11 +117,11 @@ export class TabsPlugin extends BasePlugin {
     {
       actionType: 'changeActiveKey',
       actionLabel: '激活指定选项卡',
-      description: '修改当前激活tab项的key',
+      description: '修改当前激活tab项',
       config: ['activeKey'],
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             激活第
             <span className="variable-left variable-right">
               {info?.args?.activeKey}
@@ -115,7 +136,39 @@ export class TabsPlugin extends BasePlugin {
           label: '激活项',
           variables: '${variables}',
           size: 'lg',
-          mode: 'horizontal'
+          mode: 'horizontal',
+          horizontal: {
+            left: 'normal'
+          }
+        })
+      )
+    },
+    {
+      actionType: 'deleteTab',
+      actionLabel: '删除指定选项卡',
+      description: '删除指定hash的tab项',
+      descDetail: (info: any) => {
+        return (
+          <div>
+            删除hash为
+            <span className="variable-left variable-right">
+              {info?.args?.deleteHash}
+            </span>
+            的tab项
+          </div>
+        );
+      },
+      schema: getArgsWrapper(
+        getSchemaTpl('formulaControl', {
+          name: 'deleteHash',
+          label: '删除项',
+          variables: '${variables}',
+          size: 'lg',
+          mode: 'horizontal',
+          placeholder: '请输入hash值',
+          horizontal: {
+            left: 'normal'
+          }
         })
       )
     }
@@ -193,7 +246,8 @@ export class TabsPlugin extends BasePlugin {
                 placeholder: '默认激活的选项卡',
                 pipeOut: (data: string) =>
                   data === '' || isNaN(Number(data)) ? data : Number(data)
-              }
+              },
+              getSchemaTpl('closable')
             ]
           },
           getSchemaTpl('status'),
@@ -233,7 +287,7 @@ export class TabsPlugin extends BasePlugin {
               body: [
                 {
                   name: 'tabsMode',
-                  label: '样式',
+                  label: '展示形式',
                   type: 'select',
                   options: [
                     {
@@ -289,31 +343,54 @@ export class TabsPlugin extends BasePlugin {
                 })
               ]
             },
-            getSchemaTpl('style:classNames', {
-              isFormItem: false,
-              schema: [
-                getSchemaTpl('className', {
-                  name: 'linksClassName',
-                  label: '标题区'
+            getSchemaTpl('theme:base', {
+              classname: 'titleControlClassName',
+              title: '标题样式',
+              hidePaddingAndMargin: true,
+              hideRadius: true,
+              hideShadow: true,
+              hideBorder: true,
+              hideBackground: true,
+              state: ['default', 'hover', 'focused', 'disabled'],
+              extra: [
+                getSchemaTpl('theme:select', {
+                  label: '宽度',
+                  name: 'themeCss.titleControlClassName.width'
                 }),
-
-                getSchemaTpl('className', {
-                  name: 'toolbarClassName',
-                  label: '工具栏'
-                }),
-
-                getSchemaTpl('className', {
-                  name: 'contentClassName',
-                  label: '内容区'
-                }),
-
-                getSchemaTpl('className', {
-                  name: 'showTipClassName',
-                  label: '提示',
-                  visibleOn: 'this.showTip',
-                  clearValueOnHidden: true
+                getSchemaTpl('theme:font', {
+                  label: '文字',
+                  name: 'themeCss.titleControlClassName.font'
                 })
               ]
+            }),
+            getSchemaTpl('theme:base', {
+              classname: 'toolbarControlClassName',
+              title: '工具栏样式'
+            }),
+            getSchemaTpl('theme:base', {
+              classname: 'contentControlClassName',
+              title: '内容区样式'
+            }),
+            getSchemaTpl('theme:singleCssCode', {
+              selectors: [
+                {
+                  label: '选项卡基本样式',
+                  isRoot: true,
+                  selector: '.cxd-Tabs'
+                },
+                {
+                  label: '选项卡工具栏样式',
+                  selector: '.cxd-Tabs-toolbar'
+                },
+                {
+                  label: '选项卡标题样式',
+                  selector: '.cxd-Tabs-link'
+                },
+                {
+                  label: '选项卡内容区样式',
+                  selector: '.cxd-Tabs-content'
+                }
+              ]
             })
           ])
         ]
@@ -377,7 +454,7 @@ export class TabsPlugin extends BasePlugin {
                     ]
                   }
                 },
-
+                getSchemaTpl('closable'),
                 {
                   label: tipedLabel(
                     'Hash',
@@ -418,8 +495,9 @@ export class TabsPlugin extends BasePlugin {
         {
           title: '外观',
           body: getSchemaTpl('collapseGroup', [
-            getSchemaTpl('style:classNames', {
-              isFormItem: false
+            getSchemaTpl('theme:base', {
+              classname: 'panelControlClassName',
+              title: '基本样式'
             })
           ])
         }
diff --git a/packages/amis-editor/src/plugin/Wizard.tsx b/packages/amis-editor/src/plugin/Wizard.tsx
index 1dfbd1a1d..076ee447f 100644
--- a/packages/amis-editor/src/plugin/Wizard.tsx
+++ b/packages/amis-editor/src/plugin/Wizard.tsx
@@ -1,26 +1,25 @@
+import React from 'react';
 import {
   EditorNodeType,
   getI18nEnabled,
   jsonToJsonSchema,
-  registerEditorPlugin
-} from 'amis-editor-core';
-import {
+  registerEditorPlugin,
   BaseEventContext,
   BasePlugin,
   BasicToolbarItem,
   RendererInfo,
-  VRendererConfig
+  VRendererConfig,
+  getSchemaTpl,
+  VRenderer,
+  mapReactElement,
+  RegionWrapper as Region,
+  RendererPluginAction,
+  RendererPluginEvent
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
-import React from 'react';
-import {VRenderer} from 'amis-editor-core';
-import {mapReactElement} from 'amis-editor-core';
-import {RegionWrapper as Region} from 'amis-editor-core';
-
-import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
 import {
   getArgsWrapper,
-  getEventControlConfig
+  getEventControlConfig,
+  getActionCommonProps
 } from '../renderer/event-control/helper';
 
 export class WizardPlugin extends BasePlugin {
@@ -252,15 +251,16 @@ export class WizardPlugin extends BasePlugin {
     {
       actionType: 'submit',
       actionLabel: '全部提交',
-      description: '提交全部数据'
+      description: '提交全部数据',
+      ...getActionCommonProps('submit')
     },
     {
       actionType: 'stepSubmit',
       actionLabel: '分步提交',
       description: '提交当前步骤数据',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             提交当前步骤数据
           </div>
@@ -270,21 +270,39 @@ export class WizardPlugin extends BasePlugin {
     {
       actionType: 'prev',
       actionLabel: '上一步',
-      description: '返回上一步'
+      description: '返回上一步',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">{info?.rendererLabel}</span>
+            {info?.__rendererName === 'carousel' ? '滚动至上一张' : null}
+            {info?.__rendererName === 'wizard' ? '返回前一步' : null}
+          </div>
+        );
+      }
     },
     {
       actionType: 'next',
       actionLabel: '下一步',
-      description: '提交当前步骤数据'
+      description: '提交当前步骤数据',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">{info?.rendererLabel}</span>
+            {info?.__rendererName === 'carousel' ? '滚动至下一张' : null}
+            {info?.__rendererName === 'wizard' ? '提交当前步骤数据' : null}
+          </div>
+        );
+      }
     },
     {
       actionType: 'goto-step',
       actionLabel: '定位步骤',
       description: '切换到指定步骤',
       innerArgs: ['step'],
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             切换到第
             <span className="variable-left variable-right">
@@ -308,12 +326,14 @@ export class WizardPlugin extends BasePlugin {
     {
       actionType: 'reload',
       actionLabel: '重新加载',
-      description: '触发组件数据刷新并重新渲染'
+      description: '触发组件数据刷新并重新渲染',
+      ...getActionCommonProps('reload')
     },
     {
       actionType: 'setValue',
       actionLabel: '变量赋值',
-      description: '触发组件数据更新'
+      description: '触发组件数据更新',
+      ...getActionCommonProps('setValue')
     }
   ];
 
diff --git a/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx b/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx
index b08fedde4..05d27a96f 100644
--- a/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx
+++ b/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx
@@ -14,9 +14,10 @@ import React from 'react';
 import {ActionConfig, ComponentInfo} from './types';
 import ActionConfigPanel from './action-config-panel';
 import {BASE_ACTION_PROPS} from './comp-action-select';
-import {findActionNode} from './helper';
+import {findActionNode} from './eventControlConfigHelper';
 import {PlainObject, SchemaNode, Option} from 'amis-core';
 import {i18n as _i18n} from 'i18n-runtime';
+import './actionsPanelPlugins';
 
 interface ActionDialogProp {
   show: boolean;
@@ -236,7 +237,7 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
         type: 'dialog',
         title: '动作配置',
         headerClassName: 'font-bold',
-        className: 'action-config-dialog',
+        className: 'ae-action-config-dialog',
         bodyClassName: 'action-config-dialog-body',
         closeOnEsc: closeOnEsc,
         closeOnOutside: false,
@@ -322,30 +323,47 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
                   },
                   {
                     body: [
-                      {
-                        type: 'tpl',
-                        tpl: '动作说明',
-                        className: 'action-panel-title',
-                        visibleOn: 'this.actionType',
-                        inline: false
-                      },
-                      {
-                        type: 'tpl',
-                        className: 'action-desc',
-                        tpl: '${__actionDesc}',
-                        visibleOn: 'this.actionType'
-                      },
-                      {
-                        type: 'tpl',
-                        tpl: '基础设置',
-                        className: 'action-panel-title',
-                        visibleOn: 'this.actionType',
-                        inline: false
-                      },
                       {
                         type: 'container',
                         className: 'right-panel-container',
                         body: [
+                          {
+                            type: 'container',
+                            className: 'action-panel-title',
+                            body: [
+                              {
+                                type: 'tpl',
+                                tpl: '动作说明',
+                                visibleOn: 'this.actionType'
+                              },
+                              {
+                                type: 'tooltip-wrapper',
+                                content: '${__actionDesc}',
+                                visibleOn: 'this.actionType',
+                                body: {
+                                  type: 'icon',
+                                  icon: 'far fa-question-circle',
+                                  vendor: '',
+                                  className: 'ml-0.5'
+                                },
+                                className: 'inline-block ml-0.5 mb-1'
+                              }
+                            ]
+                          },
+                          {
+                            name: 'description',
+                            type: 'textarea',
+                            label: '动作描述',
+                            mode: 'horizontal',
+                            visibleOn: 'this.actionType'
+                          },
+                          {
+                            type: 'tpl',
+                            tpl: '基础设置',
+                            className: 'action-panel-title',
+                            visibleOn: 'this.actionType',
+                            inline: false
+                          },
                           {
                             asFormItem: true,
                             component: ActionConfigPanel,
diff --git a/packages/amis-editor/src/renderer/event-control/action-config-panel.tsx b/packages/amis-editor/src/renderer/event-control/action-config-panel.tsx
index 11d1fdbae..8a10fd208 100644
--- a/packages/amis-editor/src/renderer/event-control/action-config-panel.tsx
+++ b/packages/amis-editor/src/renderer/event-control/action-config-panel.tsx
@@ -6,7 +6,8 @@ import {RendererProps, Schema} from 'amis-core';
 import {RendererPluginAction} from 'amis-editor-core';
 import React from 'react';
 import cx from 'classnames';
-import {COMMON_ACTION_SCHEMA_MAP, renderCmptActionSelect} from './helper';
+import isFunction from 'lodash/isFunction';
+import {renderCmptActionSelect} from './helper';
 
 export default class ActionConfigPanel extends React.Component<RendererProps> {
   render() {
@@ -19,10 +20,6 @@ export default class ActionConfigPanel extends React.Component<RendererProps> {
       manager
     } = this.props;
     const actionType = data.__subActions ? data.groupType : data.actionType;
-    const commonActionConfig = {
-      ...COMMON_ACTION_SCHEMA_MAP,
-      ...actionConfigItemsMap
-    };
     let schema: any = null;
 
     if (data.actionType === 'component') {
@@ -30,7 +27,8 @@ export default class ActionConfigPanel extends React.Component<RendererProps> {
       const subActionSchema =
         pluginActions?.[data.__rendererName]?.find(
           (item: RendererPluginAction) => item.actionType === data.groupType
-        )?.schema ?? commonActionConfig[data.groupType]?.schema;
+        )?.schema ??
+        (actionConfigItemsMap && actionConfigItemsMap[data.groupType]?.schema);
       const baseSchema = renderCmptActionSelect(
         '选择组件',
         true,
@@ -46,7 +44,10 @@ export default class ActionConfigPanel extends React.Component<RendererProps> {
           : [subActionSchema])
       ];
     } else {
-      schema = data.__actionSchema;
+      const __originActionSchema = data.__actionSchema;
+      schema = isFunction(__originActionSchema)
+        ? __originActionSchema(manager)
+        : __originActionSchema;
     }
 
     return schema ? (
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelManager.ts b/packages/amis-editor/src/renderer/event-control/actionsPanelManager.ts
new file mode 100644
index 000000000..23604c7ed
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelManager.ts
@@ -0,0 +1,111 @@
+import {RendererPluginAction, EditorManager} from 'amis-editor-core';
+const builtInActionsPanel: Array<RendererPluginAction> = [];
+
+export interface ActionLeftPanelTree {
+  actionType?: string;
+  actionLabel?: string;
+  children?: RendererPluginAction | Array<RendererPluginAction>;
+}
+
+type ActionPanel = Omit<RendererPluginAction, 'actionType' | 'actionLabel'> & {
+  label: string;
+  tag: string;
+};
+
+/**
+ * 构建actionTypeTree 数据结构
+ *
+ * @param actionPanel
+ */
+
+const builtInActionPanelData = (
+  actionType: string,
+  actionPanel: ActionPanel | undefined
+) => {
+  const {label, description, ...rest} = actionPanel || {};
+  return {
+    actionType,
+    actionLabel: label,
+    description,
+    ...rest
+  };
+};
+
+/**
+ * 注册动作面板插件
+ *
+ * @param actionPanel
+ */
+export const registerActionPanel = (
+  actionType: string,
+  actionPanel?: ActionPanel
+) => {
+  const {label, tag} = actionPanel || {};
+  if (!actionType) {
+    console.warn(`actionType 不能为空`);
+    return;
+  }
+  if (!label || !tag) {
+    console.warn(`label 或 tag 不能为空`);
+    return;
+  }
+
+  if (builtInActionsPanel.length === 0) {
+    builtInActionsPanel.push({
+      actionType: tag,
+      actionLabel: tag,
+      children: [builtInActionPanelData(actionType, actionPanel)]
+    });
+    return;
+  }
+
+  const idx = builtInActionsPanel.findIndex(item => item.actionType === tag);
+  if (idx === -1) {
+    builtInActionsPanel.push({
+      actionType: tag,
+      actionLabel: tag,
+      children: [builtInActionPanelData(actionType, actionPanel)]
+    });
+  } else {
+    const subActionsPanel = builtInActionsPanel[idx]?.children || [];
+    const idx2 = subActionsPanel.findIndex(
+      item => item.actionType === actionType
+    );
+    const processData = builtInActionPanelData(actionType, actionPanel);
+    if (idx2 === -1) {
+      subActionsPanel.push(processData);
+    } else {
+      console.warn(
+        `存在actionType：${actionType}相同的动作面板，将会覆盖原有的动作面板`
+      );
+      subActionsPanel.splice(idx2, 1, processData);
+    }
+  }
+};
+
+/**
+ * 注销动作面板插件
+ *
+ * @param actionType
+ */
+export const unRegisterActionsPanel = (actionType: string | string[]) => {
+  if (!Array.isArray(actionType)) {
+    actionType = [actionType];
+  }
+
+  actionType.forEach(type => {
+    builtInActionsPanel.forEach((item, index) => {
+      item.children?.forEach((subItem, index) => {
+        if (subItem.actionType === type) {
+          subItem.children?.splice(index, 1);
+        }
+      });
+    });
+  });
+};
+
+export const ACTION_TYPE_TREE = (
+  manager: EditorManager
+): RendererPluginAction[] => {
+  return builtInActionsPanel;
+};
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/clear.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/clear.tsx
new file mode 100644
index 000000000..cd5e02cf2
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/clear.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('clear', {
+  label: '清空表单',
+  tag: '组件',
+  description: '清空表单数据',
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        清空
+        {buildLinkActionDesc(props.manager, info)}
+        的数据
+      </div>
+    );
+  },
+  supportComponents: 'form',
+  schema: () => [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/component.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/component.tsx
new file mode 100644
index 000000000..fa7793f82
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/component.tsx
@@ -0,0 +1,10 @@
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptActionSelect} from './helper';
+
+registerActionPanel('component', {
+  label: '组件特性动作',
+  tag: '组件',
+  description: '触发所选组件的特性动作',
+  supportComponents: '*',
+  schema: () => renderCmptActionSelect('目标组件', true)
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/helper.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/helper.tsx
new file mode 100644
index 000000000..48bc872d4
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/helper.tsx
@@ -0,0 +1,135 @@
+import {JSONGetById, EditorManager} from 'amis-editor-core';
+import {DataSchema} from 'amis-core';
+import CmptActionSelect from '../../comp-action-select';
+
+// 下拉展示可赋值属性范围
+export const SELECT_PROPS_CONTAINER = ['form'];
+
+export const renderCmptActionSelect = (
+  componentLabel: string,
+  required: boolean,
+  onChange?: (value: string, oldVal: any, data: any, form: any) => void,
+  hideAutoFill?: boolean,
+  manager?: EditorManager
+) => {
+  return [
+    ...renderCmptSelect(
+      componentLabel || '选择组件',
+      true,
+      async (value: string, oldVal: any, data: any, form: any) => {
+        // 获取组件上下文
+        if (form.data.__nodeId) {
+          if (form.data.actionType === 'setValue') {
+            // todo:这里会闪一下，需要从amis查下问题
+            form.setValueByName('args.value', []);
+            form.setValueByName('args.__comboType', undefined);
+            form.setValueByName('args.__valueInput', undefined);
+            form.setValueByName('args.__containerType', undefined);
+
+            if (SELECT_PROPS_CONTAINER.includes(form.data.__rendererName)) {
+              const contextSchema: any = await form.data.getContextSchemas?.(
+                form.data.__nodeId,
+                true
+              );
+
+              const dataSchema = new DataSchema(contextSchema || []);
+              const variables = dataSchema?.getDataPropsAsOptions() || [];
+              form.setValueByName(
+                '__setValueDs',
+                variables.filter(item => item.value !== '$$id')
+              );
+            } else {
+              form.setValueByName('__setValueDs', []);
+            }
+          }
+        }
+        form.setValueByName('groupType', '');
+        onChange?.(value, oldVal, data, form);
+      },
+      hideAutoFill
+    ),
+    {
+      type: 'input-text',
+      name: '__cmptId',
+      mode: 'horizontal',
+      size: 'lg',
+      required: true,
+      label: '组件id',
+      visibleOn:
+        'this.componentId === "customCmptId" && this.actionType === "component"',
+      onChange: async (value: string, oldVal: any, data: any, form: any) => {
+        let schema = JSONGetById(manager!.store.schema, value, 'id');
+        if (schema) {
+          form.setValues({
+            __rendererName: schema.type
+          });
+        } else {
+          form.setValues({
+            __rendererName: ''
+          });
+        }
+      }
+    },
+    {
+      asFormItem: true,
+      label: '组件动作',
+      name: 'groupType',
+      mode: 'horizontal',
+      required: true,
+      visibleOn: 'this.actionType === "component"',
+      component: CmptActionSelect,
+      description: '${__cmptActionDesc}'
+    }
+  ];
+};
+
+export const renderCmptSelect = (
+  componentLabel: string,
+  required: boolean,
+  onChange?: (value: string, oldVal: any, data: any, form: any) => void,
+  hideAutoFill?: boolean
+) => [
+  {
+    type: 'tree-select',
+    name: 'componentId',
+    label: componentLabel || '选择组件',
+    showIcon: false,
+    searchable: true,
+    required,
+    selfDisabledAffectChildren: false,
+    size: 'lg',
+    source: '${__cmptTreeSource}',
+    mode: 'horizontal',
+    autoFill: {
+      __isScopeContainer: '${isScopeContainer}',
+      ...(hideAutoFill
+        ? {}
+        : {
+            __rendererLabel: '${label}',
+            __rendererName: '${type}',
+            __nodeId: '${id}',
+            __nodeSchema: '${schema}'
+          })
+    },
+    onChange: async (value: string, oldVal: any, data: any, form: any) => {
+      onChange?.(value, oldVal, data, form);
+    }
+  }
+];
+
+export const renderCmptIdInput = (
+  onChange?: (value: string, oldVal: any, data: any, form: any) => void
+) => {
+  return {
+    type: 'input-text',
+    name: '__cmptId',
+    mode: 'horizontal',
+    size: 'lg',
+    required: true,
+    label: '组件id',
+    visibleOn: 'this.componentId === "customCmptId"',
+    onChange: async (value: string, oldVal: any, data: any, form: any) => {
+      onChange?.(value, oldVal, data, form);
+    }
+  };
+};
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/index.ts b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/index.ts
new file mode 100644
index 000000000..c4d4cf47c
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/index.ts
@@ -0,0 +1,11 @@
+import './visibility';
+import './usability';
+import './staticStatus';
+import './reload';
+import './setValue';
+import './submit';
+import './clear';
+import './reset';
+import './validate';
+import './validateFormItem';
+import './component';
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reload.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reload.tsx
new file mode 100644
index 000000000..20b74b7ba
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reload.tsx
@@ -0,0 +1,177 @@
+import React from 'react';
+import {getRendererByName} from 'amis-core';
+import {
+  getSchemaTpl,
+  defaultValue,
+  JSONGetById,
+  tipedLabel,
+  EditorManager
+} from 'amis-editor-core';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('reload', {
+  label: '重新请求数据',
+  tag: '组件',
+  description:
+    '如果开启发送数据，会先发送配置数据到目标组件，然后重新请求数据。',
+  descDetail: (info: any, context: any, props: any) => {
+    // TODO: actionConfig
+    return (
+      <div className="action-desc">
+        刷新
+        {buildLinkActionDesc(props.manager, info)}
+        组件
+      </div>
+    );
+  },
+  supportComponents: 'byComponent',
+  schema: (manager: EditorManager) => [
+    {
+      type: 'wrapper',
+      size: 'sm',
+      className: 'p-0',
+      body: [
+        ...renderCmptSelect(
+          '目标组件',
+          true,
+          (value: string, oldVal: any, data: any, form: any) => {
+            form.setValueByName('args.resetPage', true);
+            form.setValueByName('__addParam', false);
+            form.setValueByName('__containerType', 'all');
+            form.setValueByName('__reloadParam', []);
+          },
+          true
+        )
+      ]
+    },
+    renderCmptIdInput((value: string, oldVal: any, data: any, form: any) => {
+      // 找到组件并设置相关的属性
+      let schema = JSONGetById(manager.store.schema, value, 'id');
+      if (schema) {
+        const render = getRendererByName(schema.type);
+        let __isScopeContainer = !!render?.storeType;
+        let __rendererName = schema.type;
+        form.setValues({
+          __isScopeContainer,
+          __rendererName
+        });
+      } else {
+        form.setValues({
+          __isScopeContainer: false,
+          __rendererName: ''
+        });
+      }
+    }),
+    {
+      type: 'switch',
+      name: '__resetPage',
+      label: tipedLabel('重置页码', '选择“是”时，将重新请求第一页数据。'),
+      onText: '是',
+      offText: '否',
+      mode: 'horizontal',
+      pipeIn: defaultValue(true),
+      visibleOn: `this.actionType === "reload" && this.__rendererName === "crud"`
+    },
+    {
+      type: 'switch',
+      name: '__addParam',
+      label: tipedLabel(
+        '发送数据',
+        '开启“发送数据”后，所配置的数据将发送给目标组件，这些数据将与目标组件数据域进行合并或覆盖'
+      ),
+      onText: '是',
+      offText: '否',
+      mode: 'horizontal',
+      pipeIn: defaultValue(false),
+      visibleOn: `this.actionType === "reload" &&  this.__isScopeContainer`,
+      onChange: (value: string, oldVal: any, data: any, form: any) => {
+        form.setValueByName('__containerType', 'all');
+      }
+    },
+    {
+      type: 'radios',
+      name: '__containerType',
+      mode: 'horizontal',
+      label: '',
+      pipeIn: defaultValue('all'),
+      visibleOn: `this.__addParam && this.actionType === "reload" && this.__isScopeContainer`,
+      options: [
+        {
+          label: '直接赋值',
+          value: 'all'
+        },
+        {
+          label: '成员赋值',
+          value: 'appoint'
+        }
+      ],
+      onChange: (value: string, oldVal: any, data: any, form: any) => {
+        form.setValueByName('__reloadParams', []);
+        form.setValueByName('__valueInput', undefined);
+      }
+    },
+    getSchemaTpl('formulaControl', {
+      name: '__valueInput',
+      label: '',
+      variables: '${variables}',
+      size: 'lg',
+      mode: 'horizontal',
+      required: true,
+      visibleOn: `this.__addParam && this.__containerType === "all" && this.actionType === "reload" && this.__isScopeContainer`
+    }),
+    {
+      type: 'combo',
+      name: '__reloadParams',
+      label: '',
+      multiple: true,
+      removable: true,
+      addable: true,
+      strictMode: false,
+      canAccessSuperData: true,
+      size: 'lg',
+      mode: 'horizontal',
+      formClassName: 'event-action-combo',
+      itemClassName: 'event-action-combo-item',
+      items: [
+        {
+          name: 'key',
+          type: 'input-text',
+          placeholder: '参数名',
+          labelField: 'label',
+          valueField: 'value',
+          required: true
+        },
+        getSchemaTpl('formulaControl', {
+          name: 'val',
+          variables: '${variables}',
+          placeholder: '参数值',
+          columnClassName: 'flex-1'
+        })
+      ],
+      visibleOn: `this.__addParam && this.__containerType === "appoint" && this.actionType === "reload" && this.__isScopeContainer`
+    },
+    {
+      type: 'radios',
+      name: 'dataMergeMode',
+      mode: 'horizontal',
+      label: tipedLabel(
+        '数据处理方式',
+        '选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。'
+      ),
+      pipeIn: defaultValue('merge'),
+      visibleOn: `this.__addParam && this.actionType === "reload" && this.__isScopeContainer`,
+      options: [
+        {
+          label: '合并',
+          value: 'merge'
+        },
+        {
+          label: '覆盖',
+          value: 'override'
+        }
+      ]
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reset.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reset.tsx
new file mode 100644
index 000000000..c7ce1c4cf
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reset.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('reset', {
+  label: '重置表单',
+  tag: '组件',
+  description: '重置表单数据',
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        重置
+        {buildLinkActionDesc(props.manager, info)}
+        的数据
+      </div>
+    );
+  },
+  supportComponents: 'form',
+  schema: () => [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/setValue.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/setValue.tsx
new file mode 100644
index 000000000..1fc901caa
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/setValue.tsx
@@ -0,0 +1,482 @@
+import React from 'react';
+import {
+  getSchemaTpl,
+  defaultValue,
+  JSONGetById,
+  EditorManager
+} from 'amis-editor-core';
+import {getRendererByName} from 'amis-core';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptActionSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc, getArgsWrapper} from '../../helper';
+import {getRootManager} from '../../eventControlConfigHelper';
+
+// 下拉展示可赋值属性范围
+export const SELECT_PROPS_CONTAINER = ['form'];
+
+// 是否下拉展示可赋值属性
+export const SHOW_SELECT_PROP = `${JSON.stringify(
+  SELECT_PROPS_CONTAINER
+)}.includes(this.__rendererName)`;
+
+// 用于变量赋值 页面变量和内存变量的树选择器中，支持展示变量类型
+const getCustomNodeTreeSelectSchema = (opts: Object) => ({
+  type: 'tree-select',
+  name: 'path',
+  label: '内存变量',
+  multiple: false,
+  mode: 'horizontal',
+  required: true,
+  placeholder: '请选择变量',
+  showIcon: false,
+  size: 'lg',
+  hideRoot: false,
+  rootLabel: '内存变量',
+  options: [],
+  menuTpl: {
+    type: 'flex',
+    className: 'p-1',
+    items: [
+      {
+        type: 'container',
+        body: [
+          {
+            type: 'tpl',
+            tpl: '${label}',
+            inline: true,
+            wrapperComponent: ''
+          }
+        ],
+        style: {
+          display: 'flex',
+          flexWrap: 'nowrap',
+          alignItems: 'center',
+          position: 'static',
+          overflowY: 'auto',
+          flex: '0 0 auto'
+        },
+        wrapperBody: false,
+        isFixedHeight: true
+      },
+      {
+        type: 'container',
+        body: [
+          {
+            type: 'tpl',
+            tpl: '${type}',
+            inline: true,
+            wrapperComponent: '',
+            style: {
+              background: '#f5f5f5',
+              paddingLeft: '8px',
+              paddingRight: '8px',
+              borderRadius: '4px'
+            }
+          }
+        ],
+        size: 'xs',
+        style: {
+          display: 'flex',
+          flexWrap: 'nowrap',
+          alignItems: 'center',
+          position: 'static',
+          overflowY: 'auto',
+          flex: '0 0 auto'
+        },
+        wrapperBody: false,
+        isFixedHeight: true,
+        isFixedWidth: false
+      }
+    ],
+    style: {
+      position: 'relative',
+      inset: 'auto',
+      flexWrap: 'nowrap',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      height: '24px',
+      overflowY: 'hidden'
+    },
+    isFixedHeight: true,
+    isFixedWidth: false
+  },
+  ...opts
+});
+
+registerActionPanel('setValue', {
+  label: '变量赋值',
+  tag: '组件',
+  description: '更新目标组件或变量的数据值',
+  innerArgs: [
+    'path',
+    'value',
+    'index',
+    '__valueInput',
+    '__comboType',
+    '__containerType'
+  ],
+  descDetail: (info: any, context: any, props: any) => {
+    const variableManager = info?.variableManager;
+    return (
+      <div className="action-desc">
+        {/* 只要path字段存在就认为是应用变量赋值，无论是否有值 */}
+        {typeof info?.args?.path === 'string' && !info?.componentId ? (
+          <>
+            设置变量
+            <span className="variable-left variable-right">
+              {variableManager.getNameByPath(info.args.path)}
+            </span>
+            的数据
+          </>
+        ) : (
+          <>
+            设置组件
+            {buildLinkActionDesc(props.manager, info)}
+            的数据
+          </>
+        )}
+      </div>
+    );
+  },
+  supportComponents: 'byComponent',
+  schema: (manager: EditorManager) => {
+    // TODO: 传context
+    const variableManager = manager?.variableManager;
+    /** 变量列表 */
+    const variableOptions = variableManager?.getVariableOptions() || [];
+    const pageVariableOptions =
+      variableManager?.getPageVariablesOptions() || [];
+    return [
+      {
+        children: ({render, data}: any) => {
+          const path = data?.args?.path || '';
+          return render('setValueType', {
+            name: '__actionSubType',
+            type: 'radios',
+            label: '动作类型',
+            mode: 'horizontal',
+            options: [
+              {label: '组件变量', value: 'cmpt'},
+              {label: '页面参数', value: 'page'},
+              {label: '内存变量', value: 'app'}
+            ],
+            value: /^appVariables/.test(path) // 只需要初始化时更新value
+              ? 'app'
+              : /^(__page|__query)/.test(path)
+              ? 'page'
+              : 'cmpt',
+            onChange: (value: string, oldVal: any, data: any, form: any) => {
+              form.setValueByName('__valueInput', undefined);
+              form.setValueByName('args.value', undefined);
+              form.deleteValueByName('args.path');
+            }
+          });
+        }
+      },
+      // 组件变量
+      {
+        type: 'container',
+        visibleOn: '__actionSubType === "cmpt"',
+        body: [
+          {
+            type: 'wrapper',
+            visibleOn: 'this.componentId === "customCmptId"',
+            className: 'p-none mb-6',
+            body: [
+              ...renderCmptActionSelect(
+                '目标组件',
+                true,
+                (value: string, oldVal: any, data: any, form: any) => {
+                  form.setValueByName('args.__containerType', 'all');
+                  form.setValueByName('args.__comboType', 'all');
+                },
+                true
+              )
+            ]
+          },
+          {
+            type: 'wrapper',
+            visibleOn: 'this.componentId !== "customCmptId"',
+            className: 'p-none mb-6',
+            body: [
+              ...renderCmptActionSelect(
+                '目标组件',
+                true,
+                (value: string, oldVal: any, data: any, form: any) => {
+                  form.setValueByName('args.__containerType', 'all');
+                  form.setValueByName('args.__comboType', 'all');
+                }
+              )
+            ]
+          },
+          renderCmptIdInput(
+            (value: string, oldVal: any, data: any, form: any) => {
+              // 找到root再查询
+              const root = getRootManager(manager);
+
+              // 找到组件并设置相关的属性
+              let schema = JSONGetById(root.store.schema, value, 'id');
+              if (schema) {
+                const render = getRendererByName(schema.type);
+                let __isScopeContainer = !!render?.storeType;
+                let __rendererName = schema.type;
+                form.setValues({
+                  __isScopeContainer,
+                  __rendererName
+                });
+              } else {
+                form.setValues({
+                  __isScopeContainer: false,
+                  __rendererName: ''
+                });
+              }
+            }
+          ),
+          getArgsWrapper({
+            type: 'wrapper',
+            body: [
+              {
+                type: 'radios',
+                name: '__containerType',
+                mode: 'horizontal',
+                label: '数据设置',
+                pipeIn: defaultValue('all'),
+                visibleOn: 'this.__isScopeContainer',
+                options: [
+                  {
+                    label: '直接赋值',
+                    value: 'all'
+                  },
+                  {
+                    label: '成员赋值',
+                    value: 'appoint'
+                  }
+                ],
+                onChange: (
+                  value: string,
+                  oldVal: any,
+                  data: any,
+                  form: any
+                ) => {
+                  form.setValueByName('value', []);
+                  form.setValueByName('__valueInput', undefined);
+                }
+              },
+              {
+                type: 'radios',
+                name: '__comboType',
+                inputClassName: 'event-action-radio',
+                mode: 'horizontal',
+                label: '数据设置',
+                pipeIn: defaultValue('all'),
+                visibleOn: `this.__rendererName === 'combo' || this.__rendererName === 'input-table'`,
+                options: [
+                  {
+                    label: '全量',
+                    value: 'all'
+                  },
+                  {
+                    label: '指定序号',
+                    value: 'appoint'
+                  }
+                ],
+                onChange: (
+                  value: string,
+                  oldVal: any,
+                  data: any,
+                  form: any
+                ) => {
+                  form.setValueByName('index', undefined);
+                  form.setValueByName('value', []);
+                  form.setValueByName('__valueInput', undefined);
+                }
+              },
+              getSchemaTpl('formulaControl', {
+                name: 'index',
+                label: '输入序号',
+                required: true,
+                rendererSchema: {
+                  type: 'input-number'
+                },
+                valueType: 'number',
+                variables: '${variables}',
+                size: 'lg',
+                mode: 'horizontal',
+                placeholder: '请输入待更新序号',
+                visibleOn: `(this.__rendererName === 'input-table' || this.__rendererName === 'combo')
+              && this.__comboType === 'appoint'`
+              }),
+              {
+                type: 'combo',
+                name: 'value',
+                label: '',
+                multiple: true,
+                removable: true,
+                required: true,
+                addable: true,
+                strictMode: false,
+                canAccessSuperData: true,
+                size: 'lg',
+                mode: 'horizontal',
+                formClassName: 'event-action-combo',
+                itemClassName: 'event-action-combo-item',
+                items: [
+                  {
+                    name: 'key',
+                    type: 'input-text',
+                    placeholder: '变量名',
+                    source: '${__setValueDs}',
+                    labelField: 'label',
+                    valueField: 'value',
+                    required: true
+                  },
+                  getSchemaTpl('formulaControl', {
+                    name: 'val',
+                    variables: '${variables}',
+                    placeholder: '字段值',
+                    columnClassName: 'flex-1'
+                  })
+                ],
+                visibleOn: `this.__isScopeContainer && this.__containerType === 'appoint' || this.__comboType === 'appoint'`
+              },
+              {
+                type: 'combo',
+                name: 'value',
+                label: '',
+                multiple: true,
+                removable: true,
+                required: true,
+                addable: true,
+                strictMode: false,
+                canAccessSuperData: true,
+                mode: 'horizontal',
+                size: 'lg',
+                items: [
+                  {
+                    type: 'combo',
+                    name: 'item',
+                    label: false,
+                    renderLabel: false,
+                    multiple: true,
+                    removable: true,
+                    required: true,
+                    addable: true,
+                    strictMode: false,
+                    canAccessSuperData: true,
+                    className: 'm-l',
+                    size: 'lg',
+                    mode: 'horizontal',
+                    formClassName: 'event-action-combo',
+                    itemClassName: 'event-action-combo-item',
+                    items: [
+                      {
+                        name: 'key',
+                        type: 'input-text',
+                        source: '${__setValueDs}',
+                        labelField: 'label',
+                        valueField: 'value',
+                        required: true,
+                        visibleOn: `this.__rendererName`
+                      },
+                      getSchemaTpl('formulaControl', {
+                        name: 'val',
+                        variables: '${variables}',
+                        columnClassName: 'flex-1'
+                      })
+                    ]
+                  }
+                ],
+                visibleOn: `(this.__rendererName === 'combo' || this.__rendererName === 'input-table')
+              && this.__comboType === 'all'`
+              },
+              getSchemaTpl('formulaControl', {
+                name: '__valueInput',
+                label: '',
+                variables: '${variables}',
+                size: 'lg',
+                mode: 'horizontal',
+                visibleOn: `(this.__isScopeContainer || ${SHOW_SELECT_PROP}) && this.__containerType === 'all'`,
+                required: true
+              }),
+              getSchemaTpl('formulaControl', {
+                name: '__valueInput',
+                label: '数据设置',
+                variables: '${variables}',
+                size: 'lg',
+                mode: 'horizontal',
+                visibleOn: `this.__rendererName && !this.__isScopeContainer && this.__rendererName !== 'combo' && this.__rendererName !== 'input-table'`,
+                required: true
+              })
+            ]
+          })
+        ]
+      },
+      // 页面参数
+      {
+        type: 'container',
+        visibleOn: '__actionSubType === "page"',
+        body: [
+          getArgsWrapper([
+            {
+              type: 'wrapper',
+              body: [
+                getCustomNodeTreeSelectSchema({
+                  label: '页面参数',
+                  rootLabel: '页面参数',
+                  options: pageVariableOptions,
+                  horizontal: {
+                    leftFixed: true
+                  }
+                }),
+                getSchemaTpl('formulaControl', {
+                  name: 'value',
+                  label: '数据设置',
+                  variables: '${variables}',
+                  size: 'lg',
+                  mode: 'horizontal',
+                  required: true,
+                  placeholder: '请输入变量值',
+                  horizontal: {
+                    leftFixed: true
+                  }
+                })
+              ]
+            }
+          ])
+        ]
+      },
+      // 内存变量
+      {
+        type: 'container',
+        visibleOn: '__actionSubType === "app"',
+        body: [
+          getArgsWrapper([
+            {
+              type: 'wrapper',
+              body: [
+                getCustomNodeTreeSelectSchema({
+                  options: variableOptions,
+                  horizontal: {
+                    leftFixed: true
+                  }
+                }),
+                getSchemaTpl('formulaControl', {
+                  name: 'value',
+                  label: '数据设置',
+                  variables: '${variables}',
+                  size: 'lg',
+                  mode: 'horizontal',
+                  required: true,
+                  placeholder: '请输入变量值',
+                  horizontal: {
+                    leftFixed: true
+                  }
+                })
+              ]
+            }
+          ])
+        ]
+      }
+    ];
+  }
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/staticStatus.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/staticStatus.tsx
new file mode 100644
index 000000000..2c8cc9b92
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/staticStatus.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {defaultValue} from 'amis-editor-core';
+import without from 'lodash/without';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+
+registerActionPanel('staticStatus', {
+  label: '组件展示态',
+  tag: '组件',
+  description: '控制所选的组件的输入态/静态',
+  actions: [
+    {
+      actionType: 'static',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">
+              {info?.rendererLabel || info.componentId}
+            </span>
+            组件切换为静态
+          </div>
+        );
+      }
+    },
+    {
+      actionType: 'nonstatic',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            <span className="variable-right">
+              {info?.rendererLabel || info.componentId}
+            </span>
+            组件切换为输入态
+          </div>
+        );
+      }
+    }
+  ],
+  supportComponents: ['form', 'isStaticFormItem'],
+  schema: [
+    ...renderCmptSelect('选择组件', true),
+    renderCmptIdInput(),
+    {
+      type: 'radios',
+      label: '组件状态',
+      name: 'groupType',
+      mode: 'horizontal',
+      inputClassName: 'event-action-radio',
+      value: 'nonstatic',
+      required: true,
+      pipeIn: defaultValue('nonstatic'),
+      options: [
+        {
+          label: '表单输入',
+          value: 'nonstatic'
+        },
+        {
+          label: '表单静态',
+          value: 'static'
+        }
+      ]
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/submit.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/submit.tsx
new file mode 100644
index 000000000..92c0688c3
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/submit.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('submit', {
+  label: '提交表单',
+  tag: '组件',
+  description: '触发表单提交',
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        提交
+        {buildLinkActionDesc(props.manager, info)}
+        的数据
+      </div>
+    );
+  },
+  supportComponents: 'form',
+  schema: () => [
+    ...renderCmptSelect('目标组件', true),
+    renderCmptIdInput(),
+    {
+      name: 'outputVar',
+      type: 'input-text',
+      label: '提交结果',
+      placeholder: '请输入存储提交结果的变量名称',
+      description:
+        '如需执行多次表单提交，可以修改此变量名用于区分不同的提交结果',
+      mode: 'horizontal',
+      size: 'lg',
+      value: 'submitResult',
+      required: true
+    }
+  ],
+  outputVarDataSchema: [
+    {
+      type: 'object',
+      title: 'submitResult',
+      properties: {
+        error: {
+          type: 'string',
+          title: '错误信息'
+        },
+        errors: {
+          type: 'object',
+          title: '错误详情'
+        },
+        payload: {
+          type: 'object',
+          title: '提交的表单数据'
+        },
+        responseData: {
+          type: 'object',
+          title: '提交请求的响应数据'
+        }
+      }
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/usability.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/usability.tsx
new file mode 100644
index 000000000..d0daebc7f
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/usability.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import {getSchemaTpl, defaultValue} from 'amis-editor-core';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+const SUPPORT_DISABLED_CMPTS = [
+  'button-group',
+  'action',
+  'button',
+  'submit',
+  'reset',
+  'collapse',
+  'container',
+  'dropdown-button',
+  'flex',
+  'flex-item',
+  'grid',
+  'grid-2d',
+  'link',
+  'nav',
+  'wizard'
+  // 'card2'
+];
+
+registerActionPanel('usability', {
+  label: '组件可用性',
+  tag: '组件',
+  description: '控制所选的组件的启用/禁用',
+  actions: [
+    {
+      actionType: 'enabled',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            启用
+            {buildLinkActionDesc(props.manager, info)}
+            组件
+          </div>
+        );
+      }
+    },
+    {
+      actionType: 'disabled',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            禁用
+            {buildLinkActionDesc(props.manager, info)}
+            组件
+          </div>
+        );
+      }
+    },
+    {
+      actionType: 'usability',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            组件
+            {buildLinkActionDesc(props.manager, info)}
+            表达式已配置
+          </div>
+        );
+      }
+    }
+  ],
+  supportComponents: ['form', 'isFormItem', ...SUPPORT_DISABLED_CMPTS],
+  schema: [
+    ...renderCmptSelect('目标组件', true),
+    renderCmptIdInput(),
+    {
+      type: 'radios',
+      label: '条件',
+      name: 'groupType',
+      mode: 'horizontal',
+      inputClassName: 'event-action-radio',
+      value: 'static',
+      required: true,
+      options: [
+        {
+          label: '静态',
+          value: 'static'
+        },
+        {
+          label: '表达式',
+          value: 'usability'
+        }
+      ]
+    },
+    {
+      type: 'radios',
+      label: '启用/禁用',
+      name: '__statusType',
+      mode: 'horizontal',
+      inputClassName: 'event-action-radio',
+      value: 'enabled',
+      required: true,
+      pipeIn: defaultValue('enabled'),
+      visibleOn: "this.groupType === 'static'",
+      options: [
+        {
+          label: '启用',
+          value: 'enabled'
+        },
+        {
+          label: '禁用',
+          value: 'disabled'
+        }
+      ]
+    },
+    getSchemaTpl('expressionFormulaControl', {
+      mode: 'horizontal',
+      label: '表达式',
+      required: true,
+      size: 'lg',
+      evalMode: true,
+      name: '__actionExpression',
+      visibleOn: "this.groupType === 'usability'"
+    })
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validate.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validate.tsx
new file mode 100644
index 000000000..44f9cda0d
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validate.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('validate', {
+  label: '校验表单',
+  tag: '组件',
+  description: '校验表单数据',
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        校验
+        {buildLinkActionDesc(props.manager, info)}
+        的数据
+      </div>
+    );
+  },
+  supportComponents: 'form',
+  schema: () => [
+    ...renderCmptSelect('目标组件', true),
+    renderCmptIdInput(),
+    {
+      name: 'outputVar',
+      type: 'input-text',
+      label: '校验结果',
+      placeholder: '请输入存储校验结果的变量名称',
+      description:
+        '如需执行多次表单校验，可以修改此变量名用于区分不同的校验结果',
+      mode: 'horizontal',
+      size: 'lg',
+      value: 'validateResult',
+      required: true
+    }
+  ],
+  outputVarDataSchema: [
+    {
+      type: 'object',
+      title: 'validateResult',
+      properties: {
+        error: {
+          type: 'string',
+          title: '错误信息'
+        },
+        errors: {
+          type: 'object',
+          title: '错误详情'
+        },
+        payload: {
+          type: 'object',
+          title: '提交的表单数据'
+        }
+      }
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validateFormItem.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validateFormItem.tsx
new file mode 100644
index 000000000..4ec701525
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/validateFormItem.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('validateFormItem', {
+  label: '校验表单项',
+  tag: '组件',
+  description: '校验单个表单项数据',
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        校验
+        {buildLinkActionDesc(props.manager, info)}
+        的数据
+      </div>
+    );
+  },
+  supportComponents: ['isFormItem'],
+  schema: () => [
+    ...renderCmptSelect('目标组件', true),
+    renderCmptIdInput(),
+    {
+      name: 'outputVar',
+      type: 'input-text',
+      label: '校验结果',
+      placeholder: '请输入存储校验结果的变量名称',
+      description:
+        '如需执行多次表单校验，可以修改此变量名用于区分不同的校验结果',
+      mode: 'horizontal',
+      size: 'lg',
+      value: 'validateFormItemResult',
+      required: true
+    }
+  ],
+  outputVarDataSchema: [
+    {
+      type: 'object',
+      title: 'validateFormItemResult',
+      properties: {
+        error: {
+          type: 'string',
+          title: '错误信息'
+        },
+        value: {
+          type: 'object',
+          title: '校验的表单项的值'
+        }
+      }
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/visibility.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/visibility.tsx
new file mode 100644
index 000000000..98a326f9b
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/visibility.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import {getSchemaTpl, defaultValue} from 'amis-editor-core';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
+
+registerActionPanel('visibility', {
+  label: '组件可见性',
+  tag: '组件',
+  description: '控制所选的组件的显示/隐藏',
+  actions: [
+    {
+      actionType: 'show',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            显示
+            {buildLinkActionDesc(props.manager, info)}
+            组件
+          </div>
+        );
+      }
+    },
+    {
+      actionType: 'hidden',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            隐藏
+            {buildLinkActionDesc(props.manager, info)}
+            组件
+          </div>
+        );
+      }
+    },
+    {
+      actionType: 'visibility',
+      descDetail: (info: any, context: any, props: any) => {
+        return (
+          <div className="action-desc">
+            组件
+            {buildLinkActionDesc(props.manager, info)}
+            表达式已配置
+          </div>
+        );
+      }
+    }
+  ],
+  supportComponents: '*',
+  schema: () => [
+    ...renderCmptSelect('目标组件', true),
+    renderCmptIdInput(),
+    {
+      type: 'radios',
+      label: '条件',
+      name: 'groupType',
+      mode: 'horizontal',
+      value: 'static',
+      required: true,
+      inputClassName: 'event-action-radio',
+      options: [
+        {
+          label: '静态',
+          value: 'static'
+        },
+        {
+          label: '表达式',
+          value: 'visibility'
+        }
+      ]
+    },
+    {
+      type: 'radios',
+      label: '显示/隐藏',
+      name: '__statusType',
+      mode: 'horizontal',
+      value: 'show',
+      required: true,
+      pipeIn: defaultValue('show'),
+      inputClassName: 'event-action-radio',
+      visibleOn: "this.groupType === 'static'",
+      options: [
+        {
+          label: '显示',
+          value: 'show'
+        },
+        {
+          label: '隐藏',
+          value: 'hidden'
+        }
+      ]
+    },
+    getSchemaTpl('expressionFormulaControl', {
+      mode: 'horizontal',
+      label: '表达式',
+      required: true,
+      size: 'lg',
+      variables: '${variables}',
+      evalMode: true,
+      name: '__actionExpression',
+      visibleOn: "this.groupType === 'visibility'"
+    })
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/index.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/index.tsx
new file mode 100644
index 000000000..f745b1eb9
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/index.tsx
@@ -0,0 +1,5 @@
+import './pageActionsPanel';
+import './modalActionsPanel';
+import './serverActionsPanel';
+import './componentActionsPanel';
+import './otherActionsPanel';
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/closeDialog.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/closeDialog.tsx
new file mode 100644
index 000000000..500ca8b66
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/closeDialog.tsx
@@ -0,0 +1,7 @@
+import {registerActionPanel} from '../../actionsPanelManager';
+
+registerActionPanel('closeDialog', {
+  label: '关闭弹窗',
+  tag: '弹窗消息',
+  description: '关闭当前弹窗'
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/index.ts b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/index.ts
new file mode 100644
index 000000000..1ac409155
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/index.ts
@@ -0,0 +1,3 @@
+import './openDialog';
+import './closeDialog';
+import './toast';
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/openDialog.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/openDialog.tsx
new file mode 100644
index 000000000..d33365327
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/openDialog.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import {modalsToDefinitions} from 'amis-editor-core';
+import {registerActionPanel} from '../../actionsPanelManager';
+import DialogActionPanel from '../../DialogActionPanel';
+import {TooltipWrapper} from 'amis';
+
+const modalDescDetail: (info: any, context: any, props: any) => any = (
+  info,
+  {eventKey, actionIndex},
+  props: any
+) => {
+  const {
+    actionTree,
+    actions: pluginActions,
+    commonActions,
+    allComponents,
+    node,
+    manager
+  } = props;
+  const store = manager.store;
+  const modals = store.modals;
+  const onEvent = node.schema?.onEvent;
+  const action = onEvent?.[eventKey].actions?.[actionIndex];
+  const actionBody =
+    action?.[action?.actionType === 'drawer' ? 'drawer' : 'dialog'];
+  let modalId = actionBody?.$$id;
+  if (actionBody?.$ref) {
+    modalId =
+      modals.find((item: any) => item.$$ref === actionBody.$ref)?.$$id || '';
+  }
+  const modal = modalId
+    ? manager.store.modals.find((item: any) => item.$$id === modalId)
+    : '';
+  if (modal) {
+    const desc =
+      modal.editorSetting?.displayName || modal.title || '未命名弹窗';
+    return (
+      <>
+        <div className="action-desc">
+          打开&nbsp;
+          <span className="desc-tag variable-left variable-right">
+            <TooltipWrapper
+              rootClose
+              placement="top"
+              tooltip={`${desc}，点击查看弹窗配置`}
+              tooltipClassName="ae-event-item-header-tip"
+            >
+              <a
+                href="#"
+                className="component-action-tag"
+                onClick={(e: React.UIEvent<any>) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  const modalId = modal.$$id;
+                  manager.openSubEditor({
+                    title: '编辑弹窗',
+                    value: {
+                      type: 'dialog',
+                      ...modal,
+                      definitions: modalsToDefinitions(store.modals, {}, modal)
+                    },
+                    onChange: ({definitions, ...modal}: any, diff: any) => {
+                      store.updateModal(modalId, modal, definitions);
+                    }
+                  });
+                }}
+              >
+                {desc}
+              </a>
+            </TooltipWrapper>
+          </span>
+          &nbsp;
+          {(modal as any).actionType === 'confirmDialog'
+            ? '确认框'
+            : modal.type === 'drawer'
+            ? '抽屉弹窗'
+            : '弹窗'}
+        </div>
+      </>
+    );
+  } else if (Array.isArray(info.__actionModals)) {
+    const modal = info.__actionModals.find((item: any) => item.isActive);
+    if (modal) {
+      // 这个时候还不能打开弹窗，schema 还没插入进去不知道 $$id，无法定位
+      return (
+        <>
+          <div className="action-desc">
+            打开
+            <span className="variable-left">{modal.label}</span>
+            &nbsp;
+            {modal.tip}
+          </div>
+        </>
+      );
+    }
+  }
+
+  return null;
+};
+
+registerActionPanel('openDialog', {
+  label: '打开弹窗',
+  tag: '弹窗消息',
+  description: '打开弹窗，弹窗内支持复杂的交互设计',
+  actions: [
+    {
+      actionType: 'dialog',
+      descDetail: modalDescDetail
+    },
+    {
+      actionType: 'drawer',
+      descDetail: modalDescDetail
+    },
+    {
+      actionType: 'confirmDialog',
+      descDetail: modalDescDetail
+    }
+  ],
+  schema: [
+    {
+      component: DialogActionPanel
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/toast.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/toast.tsx
new file mode 100644
index 000000000..68ad7fc31
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/modalActionsPanel/toast.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import {getSchemaTpl} from 'amis-editor-core';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {getArgsWrapper} from '../../helper';
+
+const MSG_TYPES: {[key: string]: string} = {
+  info: '提示',
+  warning: '警告',
+  success: '成功',
+  error: '错误'
+};
+
+registerActionPanel('toast', {
+  label: '消息提醒',
+  tag: '弹窗消息',
+  description: '弹出消息提醒',
+  innerArgs: [
+    'title',
+    'msgType',
+    'msg',
+    'position',
+    'timeout',
+    'closeButton',
+    'showIcon',
+    'className'
+  ],
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        {MSG_TYPES[info?.args?.msgType] || ''}
+        <span className="variable-left">{info?.args?.msg || '-'}</span>
+      </div>
+    );
+  },
+  schema: getArgsWrapper({
+    type: 'wrapper',
+    body: [
+      {
+        type: 'button-group-select',
+        name: 'msgType',
+        label: '消息类型',
+        value: 'info',
+        required: true,
+        mode: 'horizontal',
+        options: Object.keys(MSG_TYPES).map(key => ({
+          label: MSG_TYPES[key],
+          value: key,
+          level: 'default'
+        }))
+      },
+      getSchemaTpl('textareaFormulaControl', {
+        name: 'msg',
+        label: '消息内容',
+        mode: 'horizontal',
+        variables: '${variables}',
+        size: 'lg',
+        required: true
+      }),
+      getSchemaTpl('textareaFormulaControl', {
+        name: 'title',
+        label: '标题内容',
+        variables: '${variables}',
+        mode: 'horizontal',
+        size: 'lg'
+      }),
+      getSchemaTpl('formulaControl', {
+        name: 'timeout',
+        label: '持续时间(ms)',
+        rendererSchema: {
+          type: 'input-number'
+        },
+        valueType: 'number',
+        variables: '${variables}',
+        size: 'lg',
+        mode: 'horizontal'
+      }),
+      {
+        type: 'button-group-select',
+        name: 'position',
+        value: 'top-right',
+        mode: 'horizontal',
+        label: '显示位置',
+        options: [
+          {
+            label: '左上',
+            value: 'top-left'
+          },
+
+          {
+            label: '中上',
+            value: 'top-center'
+          },
+
+          {
+            label: '右上',
+            value: 'top-right'
+          },
+
+          {
+            label: '左下',
+            value: 'bottom-left'
+          },
+          {
+            label: '中下',
+            value: 'bottom-center'
+          },
+
+          {
+            label: '右下',
+            value: 'bottom-right'
+          }
+        ]
+      },
+      {
+        type: 'switch',
+        name: 'closeButton',
+        value: true,
+        label: '展示关闭按钮',
+        mode: 'horizontal'
+      },
+      {
+        type: 'switch',
+        name: 'showIcon',
+        value: true,
+        label: '展示图标',
+        mode: 'horizontal'
+      }
+    ]
+  })
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/copy.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/copy.tsx
new file mode 100644
index 000000000..c7735287d
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/copy.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {getArgsWrapper} from '../../helper';
+import {getSchemaTpl} from 'amis-editor-core';
+
+registerActionPanel('copy', {
+  label: '复制内容',
+  tag: '其他',
+  description: '复制文本内容至粘贴板',
+  innerArgs: ['content', 'copyFormat'],
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        复制内容：
+        <span className="variable-left">{info?.args?.content || '-'}</span>
+      </div>
+    );
+  },
+  schema: () =>
+    getArgsWrapper({
+      type: 'wrapper',
+      body: [
+        getSchemaTpl('textareaFormulaControl', {
+          name: 'content',
+          label: '内容模板',
+          variables: '${variables}',
+          mode: 'horizontal',
+          size: 'lg',
+          visibleOn: 'this.actionType === "copy"',
+          required: true
+        }),
+        {
+          type: 'select',
+          name: 'copyFormat',
+          mode: 'horizontal',
+          value: 'text/plain',
+          size: 'lg',
+          options: [
+            {
+              label: '纯文本',
+              value: 'text/plain'
+            },
+            {
+              label: '富文本',
+              value: 'text/html'
+            }
+          ],
+          label: '复制格式'
+        }
+      ]
+    })
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/custom.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/custom.tsx
new file mode 100644
index 000000000..f44ed5874
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/custom.tsx
@@ -0,0 +1,42 @@
+import {registerActionPanel} from '../../actionsPanelManager';
+
+registerActionPanel('custom', {
+  label: '自定义JS',
+  tag: '其他',
+  description: '通过JavaScript自定义动作逻辑',
+  schema: {
+    type: 'js-editor',
+    allowFullscreen: true,
+    required: true,
+    name: 'script',
+    label: '自定义JS',
+    mode: 'horizontal',
+    options: {
+      automaticLayout: true,
+      lineNumbers: 'off',
+      glyphMargin: false,
+      tabSize: 2,
+      fontSize: '12px',
+      wordWrap: 'on',
+      lineDecorationsWidth: 0,
+      lineNumbersMinChars: 0,
+      selectOnLineNumbers: true,
+      scrollBeyondLastLine: false,
+      folding: true
+    },
+    className: 'ae-event-control-action-js-editor',
+    value: `/* 自定义JS使用说明：
+      * 1.动作执行函数doAction，可以执行所有类型的动作
+      * 2.通过上下文对象context可以获取当前组件实例，例如context.props可以获取该组件相关属性
+      * 3.事件对象event，在doAction之后执行event.stopPropagation();可以阻止后续动作执行
+      */
+      const myMsg = '我是自定义JS';
+      doAction({
+      actionType: 'toast',
+      args: {
+      msg: myMsg
+      }
+      });
+      `
+  }
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/index.ts b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/index.ts
new file mode 100644
index 000000000..f8d49ff18
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/index.ts
@@ -0,0 +1,2 @@
+import './copy';
+import './custom';
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/goBack.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/goBack.tsx
new file mode 100644
index 000000000..117d03938
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/goBack.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+
+registerActionPanel('goBack', {
+  label: '回退页面',
+  tag: '页面',
+  description: '浏览器回退',
+  descDetail: (info: any, context: any, props: any) => {
+    return <div className="action-desc">返回上一页</div>;
+  }
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/index.ts b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/index.ts
new file mode 100644
index 000000000..91e6de4f7
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/index.ts
@@ -0,0 +1,3 @@
+import './url';
+import './refresh';
+import './goBack';
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/refresh.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/refresh.tsx
new file mode 100644
index 000000000..01884d8f0
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/refresh.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+
+registerActionPanel('refresh', {
+  label: '刷新页面',
+  tag: '页面',
+  description: '触发浏览器刷新页面',
+  descDetail: (info: any, context: any, props: any) => {
+    return <div className="action-desc">{info?.label}</div>;
+  }
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/url.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/url.tsx
new file mode 100644
index 000000000..3efdc9b14
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/pageActionsPanel/url.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {getArgsWrapper} from '../../helper';
+import {defaultValue, getSchemaTpl} from 'amis-editor-core';
+
+registerActionPanel('url', {
+  label: '跳转链接',
+  tag: '页面',
+  description: '跳转至指定链接的页面',
+  innerArgs: ['url', 'params', 'blank'],
+  descDetail: (info: any, context: any, props: any) => {
+    return (
+      <div className="action-desc">
+        跳转至
+        <span className="variable-left">{info?.args?.url || '-'}</span>
+      </div>
+    );
+  },
+  schema: () => {
+    const data = getArgsWrapper([
+      {
+        type: 'wrapper',
+        body: [
+          getSchemaTpl('textareaFormulaControl', {
+            name: 'url',
+            label: '页面地址',
+            variables: '${variables}',
+            mode: 'horizontal',
+            // placeholder: 'http://', 长文本暂不支持
+            size: 'lg',
+            required: true,
+            visibleOn: 'this.actionType === "url"'
+          }),
+          {
+            type: 'combo',
+            name: 'params',
+            label: '页面参数',
+            multiple: true,
+            mode: 'horizontal',
+            size: 'lg',
+            formClassName: 'event-action-combo',
+            itemClassName: 'event-action-combo-item',
+            items: [
+              {
+                name: 'key',
+                placeholder: '参数名',
+                type: 'input-text'
+              },
+              getSchemaTpl('formulaControl', {
+                variables: '${variables}',
+                name: 'val',
+                placeholder: '参数值',
+                columnClassName: 'flex-1'
+              })
+            ]
+          },
+          {
+            type: 'switch',
+            name: 'blank',
+            label: '新窗口打开',
+            onText: '是',
+            offText: '否',
+            mode: 'horizontal',
+            pipeIn: defaultValue(true)
+          }
+        ]
+      }
+    ]);
+    return data;
+  }
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/ajax.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/ajax.tsx
new file mode 100644
index 000000000..85a9ebfea
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/ajax.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import {registerActionPanel} from '../../actionsPanelManager';
+import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
+import {normalizeApi} from 'amis-core';
+
+registerActionPanel('ajax', {
+  label: '发送请求',
+  tag: '服务',
+  description: '配置并发送API请求',
+  // innerArgs: ['api', 'options'],
+  descDetail: (info: any, context: any, props: any) => {
+    let apiInfo = info?.api ?? info?.args?.api;
+    if (typeof apiInfo === 'string') {
+      apiInfo = normalizeApi(apiInfo);
+    }
+    return (
+      <div className="action-desc">
+        发送
+        <span className="variable-right variable-left">
+          {apiInfo?.method || '-'}
+        </span>
+        请求：
+        <span className="variable-left">{apiInfo?.url || '-'}</span>
+      </div>
+    );
+  },
+  schema: {
+    type: 'wrapper',
+    className: 'p-none',
+    body: [
+      getSchemaTpl('apiControl', {
+        name: 'api',
+        label: '配置请求',
+        mode: 'horizontal',
+        size: 'lg',
+        inputClassName: 'm-b-none',
+        renderLabel: true,
+        required: true
+      }),
+      {
+        name: 'options',
+        type: 'combo',
+        label: tipedLabel(
+          '静默请求',
+          '开启后，服务请求将以静默模式发送，即不会弹出成功或报错提示。'
+        ),
+        mode: 'horizontal',
+        items: [
+          {
+            type: 'switch',
+            name: 'silent',
+            label: false,
+            onText: '开启',
+            offText: '关闭',
+            mode: 'horizontal',
+            pipeIn: defaultValue(false)
+          }
+        ]
+      },
+      {
+        name: 'outputVar',
+        type: 'input-text',
+        label: '请求结果',
+        placeholder: '请输入存储请求结果的变量名称',
+        description:
+          '如需执行多次发送请求，可以修改此变量名用于区分不同请求返回的结果',
+        mode: 'horizontal',
+        size: 'lg',
+        value: 'responseResult',
+        required: true
+      }
+    ]
+  },
+  outputVarDataSchema: [
+    {
+      type: 'object',
+      title: 'responseResult',
+      properties: {
+        responseData: {
+          type: 'object',
+          title: '响应数据'
+        },
+        responseStatus: {
+          type: 'number',
+          title: '状态标识'
+        },
+        responseMsg: {
+          type: 'string',
+          title: '提示信息'
+        }
+      }
+    }
+  ]
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/download.tsx b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/download.tsx
new file mode 100644
index 000000000..4d42a780e
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/download.tsx
@@ -0,0 +1,23 @@
+import {registerActionPanel} from '../../actionsPanelManager';
+import {getSchemaTpl} from 'amis-editor-core';
+
+registerActionPanel('download', {
+  label: '下载文件',
+  tag: '服务',
+  description: '触发下载文件',
+  schema: {
+    type: 'wrapper',
+    className: 'p-none',
+    body: [
+      getSchemaTpl('apiControl', {
+        name: 'api',
+        label: '配置请求',
+        mode: 'horizontal',
+        inputClassName: 'm-b-none',
+        size: 'lg',
+        renderLabel: true,
+        required: true
+      })
+    ]
+  }
+});
diff --git a/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/index.ts b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/index.ts
new file mode 100644
index 000000000..24a937a92
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/serverActionsPanel/index.ts
@@ -0,0 +1,2 @@
+import './ajax';
+import './download';
diff --git a/packages/amis-editor/src/renderer/event-control/comp-action-select.tsx b/packages/amis-editor/src/renderer/event-control/comp-action-select.tsx
index f83bf4ff6..e90884e69 100644
--- a/packages/amis-editor/src/renderer/event-control/comp-action-select.tsx
+++ b/packages/amis-editor/src/renderer/event-control/comp-action-select.tsx
@@ -5,7 +5,7 @@
 import {Option, Select} from 'amis';
 import {RendererProps, getRendererByName} from 'amis-core';
 import React from 'react';
-import {FORMITEM_CMPTS} from './helper';
+import {getActionsByRendererName} from './helper';
 
 // 动作基本配置项
 export const BASE_ACTION_PROPS = [
@@ -59,15 +59,10 @@ export default class CmptActionSelect extends React.Component<RendererProps> {
   render() {
     const {data, formStore} = this.props;
     // 根据type 从组件树中获取actions
-    const actions = (data.pluginActions[data.__rendererName] || []).slice();
-    // 表单项类型组件，添加校验动作
-    if (getRendererByName(data.__rendererName)?.isFormItem) {
-      actions.push({
-        actionLabel: '校验',
-        description: '对单个表单项进行校验',
-        actionType: 'validateFormItem'
-      });
-    }
+    const actions = getActionsByRendererName(
+      data.pluginActions,
+      data.__rendererName
+    );
 
     return (
       <Select
diff --git a/packages/amis-editor/src/renderer/event-control/constants.ts b/packages/amis-editor/src/renderer/event-control/constants.ts
new file mode 100644
index 000000000..3cd13ab79
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/constants.ts
@@ -0,0 +1,47 @@
+// 下拉展示可赋值属性范围
+export const SELECT_PROPS_CONTAINER = ['form'];
+
+// 是否下拉展示可赋值属性
+export const SHOW_SELECT_PROP = `${JSON.stringify(
+  SELECT_PROPS_CONTAINER
+)}.includes(this.__rendererName)`;
+
+// 不支持静态表单项组件（反向枚举是因为表单项组件数量太多）
+export const NO_SUPPORT_STATIC_FORMITEM_CMPTS = [
+  'button-toolbar',
+  'condition-builder',
+  'diff-editor',
+  'editor',
+  'formula',
+  'hidden',
+  'icon-picker',
+  'input-excel',
+  'input-file',
+  'input-formula',
+  'input-image',
+  'input-repeat',
+  'input-rich-text',
+  'input-sub-form',
+  'input-table',
+  'picker',
+  'uuid'
+];
+
+export const SUPPORT_DISABLED_CMPTS = [
+  'button-group',
+  'action',
+  'button',
+  'submit',
+  'reset',
+  'collapse',
+  'container',
+  'dropdown-button',
+  'flex',
+  'flex-item',
+  'grid',
+  'grid-2d',
+  'link',
+  'nav',
+  'wizard'
+  // 'card2'
+];
diff --git a/packages/amis-editor/src/renderer/event-control/eventControlConfigHelper.ts b/packages/amis-editor/src/renderer/event-control/eventControlConfigHelper.ts
new file mode 100644
index 000000000..7c4e998a8
--- /dev/null
+++ b/packages/amis-editor/src/renderer/event-control/eventControlConfigHelper.ts
@@ -0,0 +1,656 @@
+import {
+  BaseEventContext,
+  EditorManager,
+  JSONGetById,
+  PluginActions,
+  RendererPluginAction,
+  SubRendererPluginAction
+} from 'amis-editor-core';
+import {
+  filterTree,
+  findTree,
+  normalizeApi,
+  PlainObject,
+  Schema,
+  getRendererByName
+} from 'amis-core';
+import {ActionConfig, ComponentInfo} from './types';
+import {ActionData} from '.';
+import {NO_SUPPORT_STATIC_FORMITEM_CMPTS} from './constants';
+
+/**
+ * Combo组件对象数组转对象
+ * @param arr
+ * @returns
+ */
+const comboArrayToObject = (arr: any[]) => {
+  let obj: PlainObject = {};
+  arr?.forEach(item => {
+    obj[item.key] = item.val;
+  });
+
+  return obj;
+};
+
+// 获取包含指定子动作的动作
+export const findSubActionNode = (
+  actions: RendererPluginAction[],
+  actionType: string
+) =>
+  findTree(actions, node =>
+    node.actions?.find(
+      (item: SubRendererPluginAction) => item.actionType === actionType
+    )
+  );
+
+// 获取真实的动作类型
+export const getActionType = (
+  action: ActionConfig,
+  hasSubActionNode: RendererPluginAction | null
+) =>
+  action.groupType === 'component'
+    ? 'component'
+    : hasSubActionNode
+    ? hasSubActionNode.actionType
+    : action.actionType;
+
+// 判断插件动作中是否存在指定动作
+export const hasActionType = (
+  actionType: string,
+  actions?: RendererPluginAction[]
+) => {
+  if (!Array.isArray(actions)) {
+    return false;
+  }
+  return !!actions?.find(item =>
+    [item.actionType, 'component'].includes(actionType)
+  );
+};
+
+/**
+ * 对象转Combo组件对象数组
+ * @param obj
+ * @returns
+ */
+const objectToComboArray = (obj: PlainObject) =>
+  Object.entries(obj).map(([key, val]) => ({
+    key,
+    val
+  }));
+
+// 获取动作配置，主要是为了获取config和desc，schema强制捆绑在动作树节点（动作配置可能在插件动作中 > 树节点 or 子动作）
+export const getPropOfAcion = (
+  action: ActionConfig,
+  propName: string,
+  actionTree: RendererPluginAction[],
+  pluginActions: PluginActions,
+  commonActions?: {[propName: string]: RendererPluginAction},
+  allComponents?: ComponentInfo[]
+): any => {
+  let prop: any = null;
+  if (action.componentId) {
+    // 优先从组件特性动作中找
+    const node = findTree(
+      allComponents ?? [],
+      item => item.value === action.componentId
+    );
+    prop =
+      node &&
+      pluginActions[node.type]?.find(
+        (item: RendererPluginAction) => item.actionType === action.actionType
+      )?.[propName as keyof RendererPluginAction];
+  }
+
+  if (!prop) {
+    prop = findActionNode(actionTree, action.actionType)?.[
+      propName as keyof RendererPluginAction
+    ];
+  }
+
+  if (!prop) {
+    const commonActionConfig = {
+      ...commonActions
+    };
+    const hasSubActionNode = findSubActionNode(actionTree, action.actionType);
+
+    if (propName === 'actionLabel') {
+      prop = hasSubActionNode?.actionLabel;
+    } else {
+      prop =
+        hasSubActionNode?.actions?.find(
+          (item: SubRendererPluginAction) =>
+            item.actionType === action.actionType
+        )?.[propName as keyof SubRendererPluginAction] ??
+        commonActionConfig[action.actionType]?.[
+          propName as keyof RendererPluginAction
+        ];
+    }
+  }
+
+  return prop;
+};
+
+export const checkComponent =
+  (manager: EditorManager) => (node: any, action: RendererPluginAction) => {
+    const actionType = action?.actionType;
+    const actions = manager?.pluginActions[node.type];
+    const haveChild = !!node.children?.length;
+    let isSupport = false;
+
+    const render = getRendererByName(node.type);
+
+    if (typeof action.supportComponents === 'string') {
+      isSupport =
+        action.supportComponents === '*' ||
+        action.supportComponents === node.type;
+      // 内置逻辑
+      if (action.supportComponents === 'byComponent' && actionType) {
+        isSupport = hasActionType(actionType, actions);
+        node.scoped = isSupport;
+      }
+    } else if (action.supportComponents?.includes('isFormItem')) {
+      isSupport = !!render?.isFormItem;
+    } else if (action.supportComponents?.includes('isStaticFormItem')) {
+      isSupport =
+        !!render?.isFormItem &&
+        !NO_SUPPORT_STATIC_FORMITEM_CMPTS.includes(node.type);
+    } else if (Array.isArray(action.supportComponents)) {
+      isSupport = action.supportComponents.includes(node.type);
+    }
+
+    node.isScopeContainer = !!render?.storeType;
+    if (actionType === 'component' && !actions?.length) {
+      node.disabled = true;
+    }
+    if (isSupport) {
+      return true;
+    } else if (haveChild) {
+      return true;
+    }
+    return false;
+  };
+
+// 获取动作树中指定的动作
+export const findActionNode = (
+  actions: RendererPluginAction[],
+  actionType: string
+) => findTree(actions, node => node.actionType === actionType);
+
+export const getContextSchemasHoc =
+  (manager: EditorManager, context?: BaseEventContext) =>
+  async (id?: string, withoutSuper?: boolean) => {
+    const dataSchema = await manager.getContextSchemas(
+      id ?? context!.id,
+      withoutSuper
+    );
+    // 存在指定id时，只需要当前层上下文
+    if (id) {
+      return dataSchema;
+    }
+    return manager.dataSchema;
+  };
+
+export const getComponentsHoc =
+  (manager: EditorManager) => (action: RendererPluginAction) => {
+    if (!action) {
+      return [];
+    }
+
+    const isSubEditor = manager.store.isSubEditor;
+    let components = manager?.store?.getComponentTreeSource();
+    let finalCmpts: any[] = [];
+    if (isSubEditor) {
+      let editorData = manager.store.getSuperEditorData;
+      while (components) {
+        if (editorData?.__curCmptTreeWrap) {
+          components = [
+            {
+              ...editorData.__curCmptTreeWrap,
+              children: components
+            }
+          ];
+        }
+        finalCmpts = [...finalCmpts, ...components];
+        components = editorData?.__superCmptTreeSource;
+        editorData = editorData?.__super;
+      }
+    } else {
+      finalCmpts = components;
+    }
+    const result = filterTree(
+      finalCmpts,
+      node => checkComponent(manager)(node, action),
+      1,
+      true
+    );
+    result.unshift({
+      label: '输入组件id',
+      value: 'customCmptId'
+    });
+    return result;
+  };
+
+export const getRootManager = (manager: EditorManager) => {
+  let rootManager = manager;
+  while (rootManager) {
+    if (!rootManager.parent) {
+      break;
+    }
+    rootManager = rootManager.parent;
+  }
+
+  return rootManager;
+};
+
+export const actionConfigInitFormatterHoc =
+  (
+    manager: EditorManager,
+    actionTree: RendererPluginAction[],
+    commonActions: any,
+    allComponents: ComponentInfo[]
+  ) =>
+  async (action: ActionConfig) => {
+    let config = {...action};
+    config.args = {...action.args};
+    if (['link', 'url'].includes(action.actionType) && action.args?.params) {
+      config.args = {
+        ...config.args,
+        params: objectToComboArray(action.args?.params)
+      };
+    }
+
+    if (['setValue'].includes(action.actionType) && action.args?.value) {
+      !config.args && (config.args = {});
+      if (Array.isArray(action.args?.value)) {
+        config.args.value = action.args?.value.reduce(
+          (arr: any, valueItem: any, index: number) => {
+            if (!arr[index]) {
+              arr[index] = {};
+            }
+            arr[index].item = objectToComboArray(valueItem);
+            return arr;
+          },
+          []
+        );
+        // 目前只有给combo赋值会是数组，所以认为是全量的赋值方式
+        config.args['__comboType'] = 'all';
+      } else if (typeof action.args?.value === 'object') {
+        config.args.value = objectToComboArray(action.args?.value);
+        config.args['__containerType'] = 'appoint';
+        // 如果有index，认为是给指定序号的combo赋值，所以认为是指定序号的赋值方式
+        if (action.args.index !== undefined) {
+          config.args['__comboType'] = 'appoint';
+        }
+      } else if (
+        action.actionType === 'setValue' &&
+        typeof action.args?.path === 'string' &&
+        typeof action.args?.value === 'string'
+      ) {
+        /** 应用变量赋值 */
+        config.args['__containerType'] = 'all';
+      } else if (
+        action.actionType === 'setValue' &&
+        typeof action.args?.value === 'string'
+      ) {
+        config.args['__containerType'] = 'all';
+        config.args['__valueInput'] = config.args['value'];
+        delete config.args?.value;
+      }
+    }
+
+    if (['show', 'hidden', 'enabled', 'disabled'].includes(action.actionType)) {
+      // 兼容老逻辑，初始化actionType
+      config.__statusType = action.actionType;
+      config.__actionType = 'static';
+    }
+
+    if (['usability', 'visibility'].includes(action.actionType)) {
+      // 初始化条件参数
+      config.__actionExpression = action.args?.value;
+    }
+
+    if (['ajax', 'download'].includes(action.actionType)) {
+      config.api = action.api ?? action?.args?.api;
+      config.options = action.options ?? action?.args?.options;
+      if (typeof action?.api === 'string') {
+        config.api = normalizeApi(action?.api);
+      }
+      delete config.args;
+    }
+
+    // 获取动作专有配置参数
+    const innerArgs: any = getPropOfAcion(
+      action,
+      'innerArgs',
+      actionTree,
+      manager.pluginActions,
+      commonActions
+    );
+
+    // 处理刷新组件动作的追加参数
+    if (config.actionType === 'reload') {
+      config.__resetPage = config.args?.resetPage;
+      config.__addParam = !!config.data;
+
+      if (
+        (config.data && typeof config.data === 'object') ||
+        (config.args &&
+          Object.keys(config.args).length &&
+          config.data === undefined)
+      ) {
+        config.__addParam = true;
+        config.__containerType = 'appoint';
+        config.dataMergeMode = config.dataMergeMode || 'merge';
+      }
+
+      if (config.__addParam && config.data) {
+        if (typeof config.data === 'string') {
+          config.__containerType = 'all';
+          config.__valueInput = config.data;
+        } else {
+          config.__containerType = 'appoint';
+          config.__reloadParams = objectToComboArray(config.data);
+        }
+      } else if (
+        config.args &&
+        Object.keys(config.args).length &&
+        config.data === undefined
+      ) {
+        config.__reloadParams = objectToComboArray(config.args);
+      }
+    }
+
+    // 如果不在可以选择的组件范围，设置一下自定义输入组件数据
+    if (
+      [
+        'setValue',
+        'static',
+        'nonstatic',
+        'show',
+        'visibility',
+        'hidden',
+        'enabled',
+        'disabled',
+        'usability',
+        'reload',
+        'submit',
+        'clear',
+        'reset',
+        'validate'
+      ].includes(action.actionType)
+    ) {
+      const node = findTree(
+        allComponents ?? [],
+        item => item.value === config.componentId
+      );
+      if (!node) {
+        config.__cmptId = config.componentId;
+        config.componentId = 'customCmptId';
+      }
+
+      if (['setValue'].includes(action.actionType)) {
+        const root = getRootManager(manager);
+        let schema = JSONGetById(
+          root.store.schema,
+          config.__cmptId || action.componentId,
+          'id'
+        );
+        if (schema) {
+          const render = getRendererByName(schema.type);
+          config.__isScopeContainer = !!render?.storeType;
+          config.__rendererName = schema.type;
+        }
+      }
+    }
+
+    delete config.data;
+
+    // 处理下 addItem 的初始化
+    if (action.actionType === 'addItem') {
+      if (Array.isArray(action.args?.item)) {
+        const comboArray = (action.args?.item || []).map((raw: any) =>
+          objectToComboArray(raw)
+        );
+        config.args = {
+          ...config.args,
+          value: comboArray.map(combo => ({item: combo}))
+        };
+      } else {
+        config.args = {
+          ...config.args,
+          item: objectToComboArray(action.args?.item)
+        };
+      }
+    }
+
+    // 还原args为可视化配置结构(args + addOnArgs)
+    if (config.args) {
+      if (innerArgs) {
+        let tmpArgs = {};
+        config.addOnArgs = [];
+        Object.keys(config.args).forEach(key => {
+          // 筛选出附加配置参数
+          if (!innerArgs.includes(key)) {
+            config.addOnArgs = [
+              ...config.addOnArgs,
+              {
+                key: key,
+                val: config.args?.[key]
+              }
+            ];
+          } else {
+            tmpArgs = {
+              ...tmpArgs,
+              [key]: config.args?.[key]
+            };
+          }
+        });
+        config.args = tmpArgs;
+      }
+    }
+
+    // 获取左侧命中的动作节点
+    const hasSubActionNode = findSubActionNode(actionTree, action.actionType);
+
+    return {
+      ...config,
+      actionType: getActionType(action, hasSubActionNode),
+      args: config.args
+    };
+  };
+
+export const actionConfigSubmitFormatterHoc =
+  (actionTree: any) =>
+  (
+    config: ActionConfig,
+    type?: string,
+    actionData?: ActionData,
+    shcema?: Schema
+  ) => {
+    let action: ActionConfig = {...config, groupType: undefined};
+    action.__title = findActionNode(actionTree, config.actionType)?.actionLabel;
+
+    // 修正动作名称
+    if (config.actionType === 'component') {
+      action.actionType = config.groupType;
+      // 标记一下组件特性动作
+      action.groupType = config.actionType;
+    }
+    const hasSubActionNode = findSubActionNode(actionTree, config.groupType);
+    if (hasSubActionNode) {
+      // 修正动作
+      action.actionType = config.groupType;
+    }
+
+    // 合并附加的动作参数
+    if (config.addOnArgs) {
+      config.addOnArgs.forEach((args: any) => {
+        action.args = action.args ?? {};
+        action.args = {
+          ...action.args,
+          [args.key]: args.val
+        };
+      });
+      delete action.addOnArgs;
+    }
+
+    // 不加回来可能数据会丢失
+    ['drawer', 'dialog', 'args', 'preventDefault'].forEach(key => {
+      action[key] = action[key] ?? actionData?.[key];
+    });
+
+    // 刷新组件时，处理是否追加事件变量
+    if (config.actionType === 'reload') {
+      action.data = undefined;
+      action.dataMergeMode = undefined;
+
+      action.args =
+        action.__rendererName === 'crud'
+          ? {
+              ...action.args,
+              resetPage: config.__resetPage ?? true
+            }
+          : undefined;
+
+      action.data = undefined;
+      if (config.__addParam) {
+        action.dataMergeMode = config.dataMergeMode || 'merge';
+        action.data =
+          config.__containerType === 'all'
+            ? config.__valueInput
+            : comboArrayToObject(config.__reloadParams || []);
+      }
+    }
+
+    // 转换下格式
+    if (['link', 'url'].includes(action.actionType)) {
+      const params = config.args?.params;
+      if (params && params.length) {
+        action.args = {
+          ...action.args,
+          params: comboArrayToObject(params)
+        };
+      }
+    }
+
+    if (action.actionType === 'toast') {
+      // 配置一个toast组件默认class
+      action.args = {
+        ...action.args,
+        className: 'theme-toast-action-scope'
+      };
+    }
+
+    // 转换下格式
+    if (action.actionType === 'setValue') {
+      if (config.args?.hasOwnProperty('path')) {
+        /** 应用变量赋值 */
+        action.args = {
+          path: config.args.path,
+          value: config.args?.value ?? ''
+        };
+
+        action.hasOwnProperty('componentId') && delete action.componentId;
+        return action;
+      } else {
+        action?.args?.hasOwnProperty('path') && delete action.args.path;
+
+        if (config.args?.__valueInput !== undefined) {
+          action.args = {
+            value: config.args?.__valueInput
+          };
+        } else if (Array.isArray(config.args?.value)) {
+          action.args = action.args ?? {};
+          if (
+            (action.__rendererName === 'combo' ||
+              action.__rendererName === 'input-table') &&
+            action.args?.index === undefined
+          ) {
+            // combo、input-table特殊处理
+            let tempArr: any = [];
+            config.args?.value.forEach((valueItem: any, index: number) => {
+              valueItem.item.forEach((item: any) => {
+                if (!tempArr[index]) {
+                  tempArr[index] = {};
+                }
+                tempArr[index][item.key] = item.val;
+              });
+            });
+            action.args = {
+              ...action.args,
+              value: tempArr
+            };
+          } else {
+            action.args = {
+              ...action.args,
+              value: comboArrayToObject(config.args?.value!)
+            };
+          }
+        }
+      }
+    }
+
+    if (
+      [
+        'setValue',
+        'static',
+        'nonstatic',
+        'show',
+        'visibility',
+        'hidden',
+        'enabled',
+        'disabled',
+        'usability',
+        'reload',
+        'submit',
+        'clear',
+        'reset',
+        'validate'
+      ].includes(action.actionType)
+    ) {
+      // 处理一下自行输入组件id的转换
+      if (action.componentId === 'customCmptId') {
+        action.componentId = action.__cmptId;
+      }
+    }
+
+    if (action.actionType === 'addItem' && action.__rendererName === 'combo') {
+      action.args = {
+        ...action.args,
+        item: comboArrayToObject(config.args?.item!)
+      };
+    }
+
+    if (
+      action.actionType === 'addItem' &&
+      action.__rendererName === 'input-table'
+    ) {
+      const comboArray = (config.args?.value! || []).map(
+        (combo: any) => combo.item || {}
+      );
+      action.args = {
+        ...action.args,
+        item: comboArray.map((raw: any) => comboArrayToObject(raw))
+      };
+      delete action.args?.value;
+    }
+
+    // 转换下格式
+    if (['visibility', 'usability'].includes(config.actionType)) {
+      action.args =
+        action.actionType !== 'static'
+          ? {
+              value: action.__actionExpression
+            }
+          : undefined;
+      action.actionType === 'static' &&
+        (action.actionType = config.__statusType);
+      delete action.__actionExpression;
+      delete action.__statusType;
+    }
+
+    delete action.config;
+    delete action.__keywords;
+    delete action.__resultActionTree;
+    return action;
+  };
diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx
index 9d6462a84..a1324b647 100644
--- a/packages/amis-editor/src/renderer/event-control/helper.tsx
+++ b/packages/amis-editor/src/renderer/event-control/helper.tsx
@@ -7,35 +7,26 @@ import {
   defaultValue,
   EditorManager,
   getSchemaTpl,
-  JsonGenerateID,
   JSONGetById,
-  modalsToDefinitions,
   persistGet,
   persistSet,
-  PluginActions,
   RendererPluginAction,
-  RendererPluginEvent,
-  SubRendererPluginAction,
-  tipedLabel
+  RendererPluginEvent
 } from 'amis-editor-core';
-import {
-  DataSchema,
-  filterTree,
-  findTree,
-  guid,
-  mapTree,
-  normalizeApi,
-  PlainObject,
-  Schema,
-  Option
-} from 'amis-core';
-import {Button} from 'amis';
+import {DataSchema, Schema, Option, getRendererByName} from 'amis-core';
+import {Button, toast, TooltipWrapper} from 'amis';
 import {i18n as _i18n} from 'i18n-runtime';
-import without from 'lodash/without';
-import {ActionConfig, ComponentInfo, ContextVariables} from './types';
+import {ActionConfig} from './types';
 import CmptActionSelect from './comp-action-select';
 import {ActionData} from '.';
-import DialogActionPanel from './DialogActionPanel';
+import {
+  getContextSchemasHoc,
+  getComponentsHoc,
+  actionConfigInitFormatterHoc,
+  actionConfigSubmitFormatterHoc
+} from './eventControlConfigHelper';
+import {ACTION_TYPE_TREE} from './actionsPanelManager';
+import {SELECT_PROPS_CONTAINER, SHOW_SELECT_PROP} from './constants';
 
 export const getArgsWrapper = (
   items: any,
@@ -51,162 +42,6 @@ export const getArgsWrapper = (
   items: Array.isArray(items) ? items : [items]
 });
 
-const getRootManager = (manager: any) => {
-  let rootManager = manager;
-  while (rootManager) {
-    if (!rootManager.parent) {
-      break;
-    }
-    rootManager = rootManager.parent;
-  }
-
-  return rootManager;
-};
-
-// 数据容器范围
-export const DATA_CONTAINER = [
-  'form',
-  'dialog',
-  'drawer',
-  'wizard',
-  'service',
-  'crud',
-  'page',
-  'app',
-  'chart',
-  'crud2'
-];
-
-const MSG_TYPES: {[key: string]: string} = {
-  info: '提示',
-  warning: '警告',
-  success: '成功',
-  error: '错误'
-};
-
-// 下拉展示可赋值属性范围
-export const SELECT_PROPS_CONTAINER = ['form'];
-
-// 是否数据容器
-export const IS_DATA_CONTAINER = `${JSON.stringify(
-  DATA_CONTAINER
-)}.includes(this.__rendererName)`;
-
-// 是否下拉展示可赋值属性
-export const SHOW_SELECT_PROP = `${JSON.stringify(
-  SELECT_PROPS_CONTAINER
-)}.includes(this.__rendererName)`;
-
-// 表单项组件
-export const FORMITEM_CMPTS = [
-  'button-group-select',
-  'button-toolbar',
-  'chained-select',
-  'chart-radios',
-  'checkbox',
-  'checkboxes',
-  'combo',
-  'input-kv',
-  'condition-builder',
-  'diff-editor',
-  'editor',
-  'formula',
-  'hidden',
-  'icon-picker',
-  'input-array',
-  'input-city',
-  'input-color',
-  'input-date',
-  'input-date-range',
-  'input-datetime-range',
-  'input-time-range',
-  'input-excel',
-  'input-file',
-  'input-formula',
-  'input-group',
-  'input-image',
-  'input-month-range',
-  'input-number',
-  'input-quarter-range',
-  'input-range',
-  'input-rating',
-  'input-repeat',
-  'input-rich-text',
-  'input-sub-form',
-  'input-table',
-  'input-tag',
-  'input-text',
-  'input-password',
-  'input-email',
-  'input-url',
-  'native-date',
-  'native-time',
-  'native-number',
-  'input-tree',
-  'input-year-range',
-  'list-select',
-  'location-picker',
-  'matrix-checkboxes',
-  'nested-select',
-  'cascader-select',
-  'picker',
-  'radios',
-  'select',
-  'multi-select',
-  'switch',
-  'tabs-transfer',
-  'tabs-transfer-picker',
-  'textarea',
-  'transfer',
-  'transfer-picker',
-  'tree-select',
-  'uuid',
-  'user-select',
-  'department-select'
-];
-
-export const SUPPORT_STATIC_FORMITEM_CMPTS = without(
-  FORMITEM_CMPTS,
-  ...[
-    'button-toolbar',
-    'condition-builder',
-    'diff-editor',
-    'editor',
-    'formula',
-    'hidden',
-    'icon-picker',
-    'input-excel',
-    'input-file',
-    'input-formula',
-    'input-image',
-    'input-repeat',
-    'input-rich-text',
-    'input-sub-form',
-    'input-table',
-    'picker',
-    'uuid'
-  ]
-);
-
-export const SUPPORT_DISABLED_CMPTS = [
-  'button-group',
-  'action',
-  'button',
-  'submit',
-  'reset',
-  'collapse',
-  'container',
-  'dropdown-button',
-  'flex',
-  'flex-item',
-  'grid',
-  'grid-2d',
-  'link',
-  'nav',
-  'wizard'
-  // 'card2'
-];
-
 // 用于变量赋值 页面变量和内存变量的树选择器中，支持展示变量类型
 const getCustomNodeTreeSelectSchema = (opts: Object) => ({
   type: 'tree-select',
@@ -291,1705 +126,6 @@ const getCustomNodeTreeSelectSchema = (opts: Object) => ({
   ...opts
 });
 
-export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
-  const variableManager = manager?.variableManager;
-  /** 变量列表 */
-  const variableOptions = variableManager?.getVariableOptions() || [];
-  const pageVariableOptions = variableManager?.getPageVariablesOptions() || [];
-
-  const modalDescDetail: (info: any, context: any, props: any) => any = (
-    info,
-    {eventKey, actionIndex},
-    props: any
-  ) => {
-    const {
-      actionTree,
-      actions: pluginActions,
-      commonActions,
-      allComponents,
-      node,
-      manager
-    } = props;
-    const store = manager.store;
-    const modals = store.modals;
-    const onEvent = node.schema?.onEvent;
-    const action = onEvent?.[eventKey].actions?.[actionIndex];
-    const actionBody =
-      action?.[action?.actionType === 'drawer' ? 'drawer' : 'dialog'];
-    let modalId = actionBody?.$$id;
-    if (actionBody?.$ref) {
-      modalId =
-        modals.find((item: any) => item.$$ref === actionBody.$ref)?.$$id || '';
-    }
-    const modal = modalId
-      ? manager.store.modals.find((item: any) => item.$$id === modalId)
-      : '';
-    if (modal) {
-      return (
-        <>
-          <div>
-            打开&nbsp;
-            <a
-              href="#"
-              onClick={(e: React.UIEvent<any>) => {
-                e.preventDefault();
-                e.stopPropagation();
-
-                const modalId = modal.$$id;
-                manager.openSubEditor({
-                  title: '编辑弹窗',
-                  value: {
-                    type: 'dialog',
-                    ...modal,
-                    definitions: modalsToDefinitions(store.modals, {}, modal)
-                  },
-                  onChange: ({definitions, ...modal}: any, diff: any) => {
-                    store.updateModal(modalId, modal, definitions);
-                  }
-                });
-              }}
-            >
-              {modal.editorSetting?.displayName || modal.title || '未命名弹窗'}
-            </a>
-            &nbsp;
-            {(modal as any).actionType === 'confirmDialog'
-              ? '确认框'
-              : modal.type === 'drawer'
-              ? '抽屉弹窗'
-              : '弹窗'}
-          </div>
-        </>
-      );
-    } else if (Array.isArray(info.__actionModals)) {
-      const modal = info.__actionModals.find((item: any) => item.isActive);
-      if (modal) {
-        // 这个时候还不能打开弹窗，schema 还没插入进去不知道 $$id，无法定位
-        return (
-          <>
-            <div>
-              打开
-              <span className="variable-left">{modal.label}</span>
-              &nbsp;
-              {modal.tip}
-            </div>
-          </>
-        );
-      }
-    }
-
-    return null;
-  };
-
-  return [
-    {
-      actionLabel: '页面',
-      actionType: 'page',
-      children: [
-        {
-          actionLabel: '跳转链接',
-          actionType: 'url',
-          description: '跳转至指定链接的页面',
-          innerArgs: ['url', 'params', 'blank'],
-          descDetail: (info: any) => {
-            return (
-              <div>
-                跳转至
-                <span className="variable-left">{info?.args?.url || '-'}</span>
-              </div>
-            );
-          },
-          schema: getArgsWrapper([
-            {
-              type: 'wrapper',
-              body: [
-                getSchemaTpl('textareaFormulaControl', {
-                  name: 'url',
-                  label: '页面地址',
-                  variables: '${variables}',
-                  mode: 'horizontal',
-                  // placeholder: 'http://', 长文本暂不支持
-                  size: 'lg',
-                  required: true,
-                  visibleOn: 'this.actionType === "url"'
-                }),
-                {
-                  type: 'combo',
-                  name: 'params',
-                  label: '页面参数',
-                  multiple: true,
-                  mode: 'horizontal',
-                  size: 'lg',
-                  formClassName: 'event-action-combo',
-                  itemClassName: 'event-action-combo-item',
-                  items: [
-                    {
-                      name: 'key',
-                      placeholder: '参数名',
-                      type: 'input-text'
-                    },
-                    getSchemaTpl('formulaControl', {
-                      variables: '${variables}',
-                      name: 'val',
-                      placeholder: '参数值',
-                      columnClassName: 'flex-1'
-                    })
-                  ]
-                },
-                {
-                  type: 'switch',
-                  name: 'blank',
-                  label: '新窗口打开',
-                  onText: '是',
-                  offText: '否',
-                  mode: 'horizontal',
-                  pipeIn: defaultValue(true)
-                }
-              ]
-            }
-          ])
-        },
-        {
-          actionLabel: '刷新页面',
-          actionType: 'refresh',
-          description: '触发浏览器刷新页面'
-        },
-        {
-          actionLabel: '回退页面',
-          actionType: 'goBack',
-          description: '浏览器回退',
-          descDetail: (info: any) => <div>返回上一页</div>
-        }
-      ]
-    },
-    {
-      actionLabel: '弹窗消息',
-      actionType: 'dialogs',
-      children: [
-        {
-          actionLabel: '打开弹窗',
-          actionType: 'openDialog',
-          description: '打开弹窗，弹窗内支持复杂的交互设计',
-          actions: [
-            {
-              actionType: 'dialog',
-              descDetail: modalDescDetail
-            },
-            {
-              actionType: 'drawer',
-              descDetail: modalDescDetail
-            },
-            {
-              actionType: 'confirmDialog',
-              descDetail: modalDescDetail
-            }
-          ],
-          schema: [
-            {
-              component: DialogActionPanel
-            }
-            // {
-            //   name: '__selectDialog',
-            //   type: 'select',
-            //   label: '选择弹窗',
-            //   source: '${__dialogActions}',
-            //   mode: 'horizontal',
-            //   size: 'lg'
-            // }
-          ]
-        },
-        {
-          actionLabel: '关闭弹窗',
-          actionType: 'closeDialog',
-          description: '关闭当前弹窗' // 或者关闭指定弹窗
-          // schema: getArgsWrapper({
-          //   type: 'wrapper',
-          //   body: [
-          //     {
-          //       type: 'radios',
-          //       label: '类型',
-          //       name: 'groupType',
-          //       mode: 'horizontal',
-          //       value: 'closeDialog',
-          //       required: true,
-          //       pipeIn: defaultValue('closeDialog'),
-          //       options: [
-          //         {
-          //           label: '弹窗',
-          //           value: 'closeDialog'
-          //         },
-          //         {
-          //           label: '抽屉',
-          //           value: 'closeDrawer'
-          //         }
-          //       ],
-          //       visibleOn: 'this.actionType === "closeDialog"'
-          //     }
-          //   ]
-          // })
-        },
-        // 暂时下掉，看后面具体设计
-        // {
-        //   actionLabel: '打开提示对话框',
-        //   actionType: 'alert',
-        //   description: '弹个提示对话框'
-        // },
-        // {
-        //   actionLabel: '打开确认对话框',
-        //   actionType: 'confirm',
-        //   description: '弹个确认对话框'
-        // },
-        {
-          actionLabel: '消息提醒',
-          actionType: 'toast',
-          description: '弹出消息提醒',
-          innerArgs: [
-            'title',
-            'msgType',
-            'msg',
-            'position',
-            'timeout',
-            'closeButton',
-            'showIcon',
-            'className'
-          ],
-          descDetail: (info: any) => {
-            return (
-              <div>
-                {MSG_TYPES[info?.args?.msgType] || ''}消息：
-                <span className="variable-left">{info?.args?.msg || '-'}</span>
-              </div>
-            );
-          },
-          schema: getArgsWrapper({
-            type: 'wrapper',
-            body: [
-              {
-                type: 'button-group-select',
-                name: 'msgType',
-                label: '消息类型',
-                value: 'info',
-                required: true,
-                mode: 'horizontal',
-                options: Object.keys(MSG_TYPES).map(key => ({
-                  label: MSG_TYPES[key],
-                  value: key,
-                  level: 'default'
-                }))
-              },
-              getSchemaTpl('textareaFormulaControl', {
-                name: 'msg',
-                label: '消息内容',
-                mode: 'horizontal',
-                variables: '${variables}',
-                size: 'lg',
-                required: true
-              }),
-              getSchemaTpl('textareaFormulaControl', {
-                name: 'title',
-                label: '标题内容',
-                variables: '${variables}',
-                mode: 'horizontal',
-                size: 'lg'
-              }),
-              getSchemaTpl('formulaControl', {
-                name: 'timeout',
-                label: '持续时间(ms)',
-                rendererSchema: {
-                  type: 'input-number'
-                },
-                valueType: 'number',
-                variables: '${variables}',
-                size: 'lg',
-                mode: 'horizontal'
-              }),
-              {
-                type: 'button-group-select',
-                name: 'position',
-                value: 'top-right',
-                mode: 'horizontal',
-                label: '显示位置',
-                options: [
-                  {
-                    label: '左上',
-                    value: 'top-left'
-                  },
-
-                  {
-                    label: '中上',
-                    value: 'top-center'
-                  },
-
-                  {
-                    label: '右上',
-                    value: 'top-right'
-                  },
-
-                  {
-                    label: '左下',
-                    value: 'bottom-left'
-                  },
-                  {
-                    label: '中下',
-                    value: 'bottom-center'
-                  },
-
-                  {
-                    label: '右下',
-                    value: 'bottom-right'
-                  }
-                ]
-              },
-              {
-                type: 'switch',
-                name: 'closeButton',
-                value: true,
-                label: '展示关闭按钮',
-                mode: 'horizontal'
-              },
-              {
-                type: 'switch',
-                name: 'showIcon',
-                value: true,
-                label: '展示图标',
-                mode: 'horizontal'
-              }
-            ]
-          })
-        }
-      ]
-    },
-    {
-      actionLabel: '服务',
-      actionType: 'service',
-      children: [
-        {
-          actionLabel: '发送请求',
-          actionType: 'ajax',
-          description: '配置并发送API请求',
-          // innerArgs: ['api', 'options'],
-          descDetail: (info: any) => {
-            let apiInfo = info?.api ?? info?.args?.api;
-            if (typeof apiInfo === 'string') {
-              apiInfo = normalizeApi(apiInfo);
-            }
-            return (
-              <div>
-                发送
-                <span className="variable-right variable-left">
-                  {apiInfo?.method || '-'}
-                </span>
-                请求：
-                <span className="variable-left">{apiInfo?.url || '-'}</span>
-              </div>
-            );
-          },
-          schema: {
-            type: 'wrapper',
-            className: 'p-none',
-            body: [
-              // getArgsWrapper(
-              //   [
-              //     getSchemaTpl('apiControl', {
-              //       name: 'api',
-              //       label: '配置请求',
-              //       mode: 'horizontal',
-              //       size: 'lg',
-              //       inputClassName: 'm-b-none',
-              //       renderLabel: true,
-              //       required: true
-              //     }),
-              //     {
-              //       name: 'options',
-              //       type: 'combo',
-              //       label: tipedLabel(
-              //         '静默请求',
-              //         '开启后，服务请求将以静默模式发送，即不会弹出成功或报错提示。'
-              //       ),
-              //       mode: 'horizontal',
-              //       items: [
-              //         {
-              //           type: 'switch',
-              //           name: 'silent',
-              //           label: false,
-              //           onText: '开启',
-              //           offText: '关闭',
-              //           mode: 'horizontal',
-              //           pipeIn: defaultValue(false)
-              //         }
-              //       ]
-              //     }
-              //   ],
-              //   false,
-              //   {
-              //     className: 'action-apiControl'
-              //   }
-              // ),
-              getSchemaTpl('apiControl', {
-                name: 'api',
-                label: '配置请求',
-                mode: 'horizontal',
-                size: 'lg',
-                inputClassName: 'm-b-none',
-                renderLabel: true,
-                required: true
-              }),
-              {
-                name: 'options',
-                type: 'combo',
-                label: tipedLabel(
-                  '静默请求',
-                  '开启后，服务请求将以静默模式发送，即不会弹出成功或报错提示。'
-                ),
-                mode: 'horizontal',
-                items: [
-                  {
-                    type: 'switch',
-                    name: 'silent',
-                    label: false,
-                    onText: '开启',
-                    offText: '关闭',
-                    mode: 'horizontal',
-                    pipeIn: defaultValue(false)
-                  }
-                ]
-              },
-              {
-                name: 'outputVar',
-                type: 'input-text',
-                label: '请求结果',
-                placeholder: '请输入存储请求结果的变量名称',
-                description:
-                  '如需执行多次发送请求，可以修改此变量名用于区分不同请求返回的结果',
-                mode: 'horizontal',
-                size: 'lg',
-                value: 'responseResult',
-                required: true
-              }
-            ]
-          },
-          outputVarDataSchema: [
-            {
-              type: 'object',
-              title: 'responseResult',
-              properties: {
-                responseData: {
-                  type: 'object',
-                  title: '响应数据'
-                },
-                responseStatus: {
-                  type: 'number',
-                  title: '状态标识'
-                },
-                responseMsg: {
-                  type: 'string',
-                  title: '提示信息'
-                }
-              }
-            }
-          ]
-        },
-        {
-          actionLabel: '下载文件',
-          actionType: 'download',
-          description: '触发下载文件',
-          // innerArgs: ['api'],
-          schema: {
-            type: 'wrapper',
-            className: 'p-none',
-            body: [
-              // getArgsWrapper(
-              //   getSchemaTpl('apiControl', {
-              //     name: 'api',
-              //     label: '配置请求',
-              //     mode: 'horizontal',
-              //     inputClassName: 'm-b-none',
-              //     size: 'lg',
-              //     renderLabel: true,
-              //     required: true
-              //   }),
-              //   false,
-              //   {
-              //     className: 'action-apiControl'
-              //   }
-              // )
-              getSchemaTpl('apiControl', {
-                name: 'api',
-                label: '配置请求',
-                mode: 'horizontal',
-                inputClassName: 'm-b-none',
-                size: 'lg',
-                renderLabel: true,
-                required: true
-              })
-            ]
-          }
-        }
-      ]
-    },
-    {
-      actionLabel: '组件',
-      actionType: 'cmpt',
-      children: [
-        {
-          actionLabel: '组件可见性',
-          actionType: 'visibility',
-          description: '控制所选的组件的显示/隐藏',
-          actions: [
-            {
-              actionType: 'show',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    显示
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    组件
-                  </div>
-                );
-              }
-            },
-            {
-              actionType: 'hidden',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    隐藏
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    组件
-                  </div>
-                );
-              }
-            },
-            {
-              actionType: 'visibility',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    组件
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    表达式已配置
-                  </div>
-                );
-              }
-            }
-          ],
-          supportComponents: '*',
-          schema: [
-            ...renderCmptSelect('目标组件', true),
-            renderCmptIdInput(),
-            {
-              type: 'radios',
-              label: '条件',
-              name: 'groupType',
-              mode: 'horizontal',
-              value: 'static',
-              required: true,
-              inputClassName: 'event-action-radio',
-              options: [
-                {
-                  label: '静态',
-                  value: 'static'
-                },
-                {
-                  label: '表达式',
-                  value: 'visibility'
-                }
-              ]
-            },
-            {
-              type: 'radios',
-              label: '显示/隐藏',
-              name: '__statusType',
-              mode: 'horizontal',
-              value: 'show',
-              required: true,
-              pipeIn: defaultValue('show'),
-              inputClassName: 'event-action-radio',
-              visibleOn: "this.groupType === 'static'",
-              options: [
-                {
-                  label: '显示',
-                  value: 'show'
-                },
-                {
-                  label: '隐藏',
-                  value: 'hidden'
-                }
-              ]
-            },
-            getSchemaTpl('expressionFormulaControl', {
-              mode: 'horizontal',
-              label: '表达式',
-              required: true,
-              size: 'lg',
-              variables: '${variables}',
-              evalMode: true,
-              name: '__actionExpression',
-              visibleOn: "this.groupType === 'visibility'"
-            })
-          ]
-        },
-        {
-          actionLabel: '组件可用性',
-          actionType: 'usability',
-          description: '控制所选的组件的启用/禁用',
-          actions: [
-            {
-              actionType: 'enabled',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    启用
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    组件
-                  </div>
-                );
-              }
-            },
-            {
-              actionType: 'disabled',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    禁用
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    组件
-                  </div>
-                );
-              }
-            },
-            {
-              actionType: 'usability',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    组件
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    表达式已配置
-                  </div>
-                );
-              }
-            }
-          ],
-          supportComponents: [
-            'form',
-            ...FORMITEM_CMPTS,
-            ...SUPPORT_DISABLED_CMPTS
-          ],
-          schema: [
-            ...renderCmptSelect('目标组件', true),
-            renderCmptIdInput(),
-            {
-              type: 'radios',
-              label: '条件',
-              name: 'groupType',
-              mode: 'horizontal',
-              inputClassName: 'event-action-radio',
-              value: 'static',
-              required: true,
-              options: [
-                {
-                  label: '静态',
-                  value: 'static'
-                },
-                {
-                  label: '表达式',
-                  value: 'usability'
-                }
-              ]
-            },
-            {
-              type: 'radios',
-              label: '启用/禁用',
-              name: '__statusType',
-              mode: 'horizontal',
-              inputClassName: 'event-action-radio',
-              value: 'enabled',
-              required: true,
-              pipeIn: defaultValue('enabled'),
-              visibleOn: "this.groupType === 'static'",
-              options: [
-                {
-                  label: '启用',
-                  value: 'enabled'
-                },
-                {
-                  label: '禁用',
-                  value: 'disabled'
-                }
-              ]
-            },
-            getSchemaTpl('expressionFormulaControl', {
-              mode: 'horizontal',
-              label: '表达式',
-              required: true,
-              size: 'lg',
-              evalMode: true,
-              name: '__actionExpression',
-              visibleOn: "this.groupType === 'usability'"
-            })
-          ]
-        },
-        {
-          actionLabel: '组件展示态',
-          actionType: 'staticStatus',
-          description: '控制所选的组件的输入态/静态',
-          actions: [
-            {
-              actionType: 'static',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    <span className="variable-right">
-                      {info?.rendererLabel || info.componentId}
-                    </span>
-                    组件切换为静态
-                  </div>
-                );
-              }
-            },
-            {
-              actionType: 'nonstatic',
-              descDetail: (info: any) => {
-                return (
-                  <div>
-                    <span className="variable-right">
-                      {info?.rendererLabel || info.componentId}
-                    </span>
-                    组件切换为输入态
-                  </div>
-                );
-              }
-            }
-          ],
-          supportComponents: ['form', ...SUPPORT_STATIC_FORMITEM_CMPTS],
-          schema: [
-            ...renderCmptSelect('选择组件', true),
-            renderCmptIdInput(),
-            {
-              type: 'radios',
-              label: '组件状态',
-              name: 'groupType',
-              mode: 'horizontal',
-              inputClassName: 'event-action-radio',
-              value: 'nonstatic',
-              required: true,
-              pipeIn: defaultValue('nonstatic'),
-              options: [
-                {
-                  label: '表单输入',
-                  value: 'nonstatic'
-                },
-                {
-                  label: '表单静态',
-                  value: 'static'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          actionLabel: '重新请求数据',
-          actionType: 'reload',
-          description:
-            '如果开启发送数据，会先发送配置数据到目标组件，然后重新请求数据。',
-          descDetail: (info: any) => {
-            return (
-              <div>
-                刷新
-                <span className="variable-left variable-right">
-                  {info?.rendererLabel || info.componentId || '-'}
-                </span>
-                组件
-              </div>
-            );
-          },
-          supportComponents: 'byComponent',
-          schema: [
-            {
-              type: 'wrapper',
-              size: 'sm',
-              body: [
-                ...renderCmptSelect(
-                  '目标组件',
-                  true,
-                  (value: string, oldVal: any, data: any, form: any) => {
-                    form.setValueByName('args.resetPage', true);
-                    form.setValueByName('__addParam', false);
-                    form.setValueByName('__containerType', 'all');
-                    form.setValueByName('__reloadParam', []);
-                  },
-                  true
-                )
-              ]
-            },
-            renderCmptIdInput(
-              (value: string, oldVal: any, data: any, form: any) => {
-                // 找到组件并设置相关的属性
-                let schema = JSONGetById(manager.store.schema, value, 'id');
-                if (schema) {
-                  let __isScopeContainer = DATA_CONTAINER.includes(schema.type);
-                  let __rendererName = schema.type;
-                  form.setValues({
-                    __isScopeContainer,
-                    __rendererName
-                  });
-                } else {
-                  form.setValues({
-                    __isScopeContainer: false,
-                    __rendererName: ''
-                  });
-                }
-              }
-            ),
-            {
-              type: 'switch',
-              name: '__resetPage',
-              label: tipedLabel(
-                '重置页码',
-                '选择“是”时，将重新请求第一页数据。'
-              ),
-              onText: '是',
-              offText: '否',
-              mode: 'horizontal',
-              pipeIn: defaultValue(true),
-              visibleOn: `this.actionType === "reload" && this.__rendererName === "crud"`
-            },
-            {
-              type: 'switch',
-              name: '__addParam',
-              label: tipedLabel(
-                '发送数据',
-                '开启“发送数据”后，所配置的数据将发送给目标组件，这些数据将与目标组件数据域进行合并或覆盖'
-              ),
-              onText: '是',
-              offText: '否',
-              mode: 'horizontal',
-              pipeIn: defaultValue(false),
-              visibleOn: `this.actionType === "reload" &&  this.__isScopeContainer`,
-              onChange: (value: string, oldVal: any, data: any, form: any) => {
-                form.setValueByName('__containerType', 'all');
-              }
-            },
-            {
-              type: 'radios',
-              name: '__containerType',
-              mode: 'horizontal',
-              label: '',
-              pipeIn: defaultValue('all'),
-              visibleOn: `this.__addParam && this.actionType === "reload" && this.__isScopeContainer`,
-              options: [
-                {
-                  label: '直接赋值',
-                  value: 'all'
-                },
-                {
-                  label: '成员赋值',
-                  value: 'appoint'
-                }
-              ],
-              onChange: (value: string, oldVal: any, data: any, form: any) => {
-                form.setValueByName('__reloadParams', []);
-                form.setValueByName('__valueInput', undefined);
-              }
-            },
-            getSchemaTpl('formulaControl', {
-              name: '__valueInput',
-              label: '',
-              variables: '${variables}',
-              size: 'lg',
-              mode: 'horizontal',
-              required: true,
-              visibleOn: `this.__addParam && this.__containerType === "all" && this.actionType === "reload" && this.__isScopeContainer`
-            }),
-            {
-              type: 'combo',
-              name: '__reloadParams',
-              label: '',
-              multiple: true,
-              removable: true,
-              addable: true,
-              strictMode: false,
-              canAccessSuperData: true,
-              size: 'lg',
-              mode: 'horizontal',
-              formClassName: 'event-action-combo',
-              itemClassName: 'event-action-combo-item',
-              items: [
-                {
-                  name: 'key',
-                  type: 'input-text',
-                  placeholder: '参数名',
-                  labelField: 'label',
-                  valueField: 'value',
-                  required: true
-                },
-                getSchemaTpl('formulaControl', {
-                  name: 'val',
-                  variables: '${variables}',
-                  placeholder: '参数值',
-                  columnClassName: 'flex-1'
-                })
-              ],
-              visibleOn: `this.__addParam && this.__containerType === "appoint" && this.actionType === "reload" && this.__isScopeContainer`
-            },
-            {
-              type: 'radios',
-              name: 'dataMergeMode',
-              mode: 'horizontal',
-              label: tipedLabel(
-                '数据处理方式',
-                '选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。'
-              ),
-              pipeIn: defaultValue('merge'),
-              visibleOn: `this.__addParam && this.actionType === "reload" && this.__isScopeContainer`,
-              options: [
-                {
-                  label: '合并',
-                  value: 'merge'
-                },
-                {
-                  label: '覆盖',
-                  value: 'override'
-                }
-              ]
-            },
-            {
-              name: 'outputVar',
-              type: 'input-text',
-              label: '刷新后数据结果',
-              placeholder: '请输入变量名称',
-              description:
-                '如果想要拿到目标组件刷新后的数据，请在此处输入变量名称',
-              mode: 'horizontal',
-              size: 'lg',
-              value: ''
-            }
-          ]
-        },
-        {
-          actionLabel: '变量赋值',
-          actionType: 'setValue',
-          description: '更新目标组件或变量的数据值',
-          innerArgs: [
-            'path',
-            'value',
-            'index',
-            '__valueInput',
-            '__comboType',
-            '__containerType'
-          ],
-          descDetail: (info: any) => {
-            return (
-              <div>
-                {/* 只要path字段存在就认为是应用变量赋值，无论是否有值 */}
-                {typeof info?.args?.path === 'string' && !info?.componentId ? (
-                  <>
-                    设置变量
-                    <span className="variable-left variable-right">
-                      {variableManager.getNameByPath(info.args.path)}
-                    </span>
-                    的数据
-                  </>
-                ) : (
-                  <>
-                    设置组件
-                    <span className="variable-left variable-right">
-                      {info?.rendererLabel || info.componentId || '-'}
-                    </span>
-                    的数据
-                  </>
-                )}
-                {/* 值为
-                <span className="variable-left variable-right"> // 因为初始化时进行了格式化，会导致args的值发生变化并同步到右侧动作表，因此关闭详情
-                  {info?.args?.value
-                    ? JSON.stringify(info?.args?.value)
-                    : info?.args?.valueInput}
-                </span> */}
-              </div>
-            );
-          },
-          supportComponents: 'byComponent',
-          schema: [
-            {
-              children: ({render, data}: any) => {
-                const path = data?.args?.path || '';
-                return render('setValueType', {
-                  name: '__actionSubType',
-                  type: 'radios',
-                  label: '动作类型',
-                  mode: 'horizontal',
-                  options: [
-                    {label: '组件变量', value: 'cmpt'},
-                    {label: '页面参数', value: 'page'},
-                    {label: '内存变量', value: 'app'}
-                  ],
-                  value: /^appVariables/.test(path) // 只需要初始化时更新value
-                    ? 'app'
-                    : /^(__page|__query)/.test(path)
-                    ? 'page'
-                    : 'cmpt',
-                  onChange: (
-                    value: string,
-                    oldVal: any,
-                    data: any,
-                    form: any
-                  ) => {
-                    form.setValueByName('__valueInput', undefined);
-                    form.setValueByName('args.value', undefined);
-                    form.deleteValueByName('args.path');
-                  }
-                });
-              }
-            },
-            // 组件变量
-            {
-              type: 'container',
-              visibleOn: '__actionSubType === "cmpt"',
-              body: [
-                {
-                  type: 'wrapper',
-                  visibleOn: 'this.componentId === "customCmptId"',
-                  className: 'p-none mb-6',
-                  body: [
-                    ...renderCmptActionSelect(
-                      '目标组件',
-                      true,
-                      (value: string, oldVal: any, data: any, form: any) => {
-                        form.setValueByName('args.__containerType', 'all');
-                        form.setValueByName('args.__comboType', 'all');
-                      },
-                      true
-                    )
-                  ]
-                },
-                {
-                  type: 'wrapper',
-                  visibleOn: 'this.componentId !== "customCmptId"',
-                  className: 'p-none mb-6',
-                  body: [
-                    ...renderCmptActionSelect(
-                      '目标组件',
-                      true,
-                      (value: string, oldVal: any, data: any, form: any) => {
-                        form.setValueByName('args.__containerType', 'all');
-                        form.setValueByName('args.__comboType', 'all');
-                      }
-                    )
-                  ]
-                },
-                renderCmptIdInput(
-                  (value: string, oldVal: any, data: any, form: any) => {
-                    // 找到root再查询
-                    const root = getRootManager(manager);
-
-                    // 找到组件并设置相关的属性
-                    let schema = JSONGetById(root.store.schema, value, 'id');
-                    if (schema) {
-                      let __isScopeContainer = DATA_CONTAINER.includes(
-                        schema.type
-                      );
-                      let __rendererName = schema.type;
-                      form.setValues({
-                        __isScopeContainer,
-                        __rendererName
-                      });
-                    } else {
-                      form.setValues({
-                        __isScopeContainer: false,
-                        __rendererName: ''
-                      });
-                    }
-                  }
-                ),
-                getArgsWrapper({
-                  type: 'wrapper',
-                  body: [
-                    {
-                      type: 'radios',
-                      name: '__containerType',
-                      mode: 'horizontal',
-                      label: '数据设置',
-                      pipeIn: defaultValue('all'),
-                      visibleOn: 'this.__isScopeContainer',
-                      options: [
-                        {
-                          label: '直接赋值',
-                          value: 'all'
-                        },
-                        {
-                          label: '成员赋值',
-                          value: 'appoint'
-                        }
-                      ],
-                      onChange: (
-                        value: string,
-                        oldVal: any,
-                        data: any,
-                        form: any
-                      ) => {
-                        form.setValueByName('value', []);
-                        form.setValueByName('__valueInput', undefined);
-                      }
-                    },
-                    {
-                      type: 'radios',
-                      name: '__comboType',
-                      inputClassName: 'event-action-radio',
-                      mode: 'horizontal',
-                      label: '数据设置',
-                      pipeIn: defaultValue('all'),
-                      visibleOn: `this.__rendererName === 'combo' || this.__rendererName === 'input-table'`,
-                      options: [
-                        {
-                          label: '全量',
-                          value: 'all'
-                        },
-                        {
-                          label: '指定序号',
-                          value: 'appoint'
-                        }
-                      ],
-                      onChange: (
-                        value: string,
-                        oldVal: any,
-                        data: any,
-                        form: any
-                      ) => {
-                        form.setValueByName('index', undefined);
-                        form.setValueByName('value', []);
-                        form.setValueByName('__valueInput', undefined);
-                      }
-                    },
-                    {
-                      type: 'input-number',
-                      required: true,
-                      name: 'index',
-                      mode: 'horizontal',
-                      label: '输入序号',
-                      size: 'lg',
-                      placeholder: '请输入待更新序号',
-                      visibleOn: `(this.__rendererName === 'input-table' || this.__rendererName === 'combo')
-                    && this.__comboType === 'appoint'`
-                    },
-                    {
-                      type: 'combo',
-                      name: 'value',
-                      label: '',
-                      multiple: true,
-                      removable: true,
-                      required: true,
-                      addable: true,
-                      strictMode: false,
-                      canAccessSuperData: true,
-                      size: 'lg',
-                      mode: 'horizontal',
-                      formClassName: 'event-action-combo',
-                      itemClassName: 'event-action-combo-item',
-                      items: [
-                        {
-                          name: 'key',
-                          type: 'input-text',
-                          placeholder: '变量名',
-                          source: '${__setValueDs}',
-                          labelField: 'label',
-                          valueField: 'value',
-                          required: true
-                        },
-                        getSchemaTpl('formulaControl', {
-                          name: 'val',
-                          variables: '${variables}',
-                          placeholder: '字段值',
-                          columnClassName: 'flex-1'
-                        })
-                      ],
-                      visibleOn: `this.__isScopeContainer && this.__containerType === 'appoint' || this.__comboType === 'appoint'`
-                    },
-                    {
-                      type: 'combo',
-                      name: 'value',
-                      label: '',
-                      multiple: true,
-                      removable: true,
-                      required: true,
-                      addable: true,
-                      strictMode: false,
-                      canAccessSuperData: true,
-                      mode: 'horizontal',
-                      size: 'lg',
-                      items: [
-                        {
-                          type: 'combo',
-                          name: 'item',
-                          label: false,
-                          renderLabel: false,
-                          multiple: true,
-                          removable: true,
-                          required: true,
-                          addable: true,
-                          strictMode: false,
-                          canAccessSuperData: true,
-                          className: 'm-l',
-                          size: 'lg',
-                          mode: 'horizontal',
-                          formClassName: 'event-action-combo',
-                          itemClassName: 'event-action-combo-item',
-                          items: [
-                            {
-                              name: 'key',
-                              type: 'input-text',
-                              source: '${__setValueDs}',
-                              labelField: 'label',
-                              valueField: 'value',
-                              required: true,
-                              visibleOn: `this.__rendererName`
-                            },
-                            getSchemaTpl('formulaControl', {
-                              name: 'val',
-                              variables: '${variables}',
-                              columnClassName: 'flex-1'
-                            })
-                          ]
-                        }
-                      ],
-                      visibleOn: `(this.__rendererName === 'combo' || this.__rendererName === 'input-table')
-                    && this.__comboType === 'all'`
-                    },
-                    getSchemaTpl('formulaControl', {
-                      name: '__valueInput',
-                      label: '',
-                      variables: '${variables}',
-                      size: 'lg',
-                      mode: 'horizontal',
-                      visibleOn: `(this.__isScopeContainer || ${SHOW_SELECT_PROP}) && this.__containerType === 'all'`,
-                      required: true
-                    }),
-                    getSchemaTpl('formulaControl', {
-                      name: '__valueInput',
-                      label: '数据设置',
-                      variables: '${variables}',
-                      size: 'lg',
-                      mode: 'horizontal',
-                      visibleOn: `this.__rendererName && !this.__isScopeContainer && this.__rendererName !== 'combo' && this.__rendererName !== 'input-table'`,
-                      required: true
-                    })
-                  ]
-                })
-              ]
-            },
-            // 页面参数
-            {
-              type: 'container',
-              visibleOn: '__actionSubType === "page"',
-              body: [
-                getArgsWrapper([
-                  {
-                    type: 'wrapper',
-                    body: [
-                      getCustomNodeTreeSelectSchema({
-                        label: '页面参数',
-                        rootLabel: '页面参数',
-                        options: pageVariableOptions,
-                        horizontal: {
-                          leftFixed: true
-                        }
-                      }),
-                      getSchemaTpl('formulaControl', {
-                        name: 'value',
-                        label: '数据设置',
-                        variables: '${variables}',
-                        size: 'lg',
-                        mode: 'horizontal',
-                        required: true,
-                        placeholder: '请输入变量值',
-                        horizontal: {
-                          leftFixed: true
-                        }
-                      })
-                    ]
-                  }
-                ])
-              ]
-            },
-            // 内存变量
-            {
-              type: 'container',
-              visibleOn: '__actionSubType === "app"',
-              body: [
-                getArgsWrapper([
-                  {
-                    type: 'wrapper',
-                    body: [
-                      getCustomNodeTreeSelectSchema({
-                        options: variableOptions,
-                        horizontal: {
-                          leftFixed: true
-                        }
-                      }),
-                      getSchemaTpl('formulaControl', {
-                        name: 'value',
-                        label: '数据设置',
-                        variables: '${variables}',
-                        size: 'lg',
-                        mode: 'horizontal',
-                        required: true,
-                        placeholder: '请输入变量值',
-                        horizontal: {
-                          leftFixed: true
-                        }
-                      })
-                    ]
-                  }
-                ])
-              ]
-            }
-          ]
-        },
-        {
-          actionLabel: '提交表单',
-          actionType: 'submit',
-          description: '触发表单提交',
-          descDetail: (info: any) => {
-            return (
-              <div>
-                提交
-                <span className="variable-left variable-right">
-                  {info?.rendererLabel || info.componentId || '-'}
-                </span>
-                的数据
-              </div>
-            );
-          },
-          supportComponents: 'form',
-          schema: [
-            ...renderCmptSelect('目标组件', true),
-            renderCmptIdInput(),
-            {
-              name: 'outputVar',
-              type: 'input-text',
-              label: '提交结果',
-              placeholder: '请输入存储提交结果的变量名称',
-              description:
-                '如需执行多次表单提交，可以修改此变量名用于区分不同的提交结果',
-              mode: 'horizontal',
-              size: 'lg',
-              value: 'submitResult',
-              required: true
-            }
-          ],
-          outputVarDataSchema: [
-            {
-              type: 'object',
-              title: 'submitResult',
-              properties: {
-                error: {
-                  type: 'string',
-                  title: '错误信息'
-                },
-                errors: {
-                  type: 'object',
-                  title: '错误详情'
-                },
-                payload: {
-                  type: 'object',
-                  title: '提交的表单数据'
-                },
-                responseData: {
-                  type: 'object',
-                  title: '提交请求的响应数据'
-                }
-              }
-            }
-          ]
-        },
-        {
-          actionLabel: '清空表单',
-          actionType: 'clear',
-          description: '清空表单数据',
-          descDetail: (info: any) => {
-            return (
-              <div>
-                清空
-                <span className="variable-left variable-right">
-                  {info?.rendererLabel || info.componentId || '-'}
-                </span>
-                的数据
-              </div>
-            );
-          },
-          supportComponents: 'form',
-          schema: [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
-        },
-        {
-          actionLabel: '重置表单',
-          actionType: 'reset',
-          description: '重置表单数据',
-          descDetail: (info: any) => {
-            return (
-              <div>
-                重置
-                <span className="variable-left variable-right">
-                  {info?.rendererLabel || info.componentId || '-'}
-                </span>
-                的数据
-              </div>
-            );
-          },
-          supportComponents: 'form',
-          schema: [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
-        },
-        {
-          actionLabel: '校验表单',
-          actionType: 'validate',
-          description: '校验表单数据',
-          descDetail: (info: any) => {
-            return (
-              <div>
-                校验
-                <span className="variable-left variable-right">
-                  {info?.rendererLabel || info.componentId || '-'}
-                </span>
-                的数据
-              </div>
-            );
-          },
-          supportComponents: 'form',
-          schema: [
-            ...renderCmptSelect('目标组件', true),
-            renderCmptIdInput(),
-            {
-              name: 'outputVar',
-              type: 'input-text',
-              label: '校验结果',
-              placeholder: '请输入存储校验结果的变量名称',
-              description:
-                '如需执行多次表单校验，可以修改此变量名用于区分不同的校验结果',
-              mode: 'horizontal',
-              size: 'lg',
-              value: 'validateResult',
-              required: true
-            }
-          ],
-          outputVarDataSchema: [
-            {
-              type: 'object',
-              title: 'validateResult',
-              properties: {
-                error: {
-                  type: 'string',
-                  title: '错误信息'
-                },
-                errors: {
-                  type: 'object',
-                  title: '错误详情'
-                },
-                payload: {
-                  type: 'object',
-                  title: '提交的表单数据'
-                }
-              }
-            }
-          ]
-        },
-        {
-          actionLabel: '校验表单项',
-          actionType: 'validateFormItem',
-          description: '校验单个表单项数据',
-          descDetail: (info: any) => {
-            return (
-              <div>
-                校验
-                <span className="variable-left variable-right">
-                  {info?.rendererLabel || info.componentId || '-'}
-                </span>
-                的数据
-              </div>
-            );
-          },
-          supportComponents: [...FORMITEM_CMPTS],
-          schema: [
-            ...renderCmptSelect('目标组件', true),
-            renderCmptIdInput(),
-            {
-              name: 'outputVar',
-              type: 'input-text',
-              label: '校验结果',
-              placeholder: '请输入存储校验结果的变量名称',
-              description:
-                '如需执行多次表单校验，可以修改此变量名用于区分不同的校验结果',
-              mode: 'horizontal',
-              size: 'lg',
-              value: 'validateFormItemResult',
-              required: true
-            }
-          ],
-          outputVarDataSchema: [
-            {
-              type: 'object',
-              title: 'validateFormItemResult',
-              properties: {
-                error: {
-                  type: 'string',
-                  title: '错误信息'
-                },
-                value: {
-                  type: 'object',
-                  title: '校验的表单项的值'
-                }
-              }
-            }
-          ]
-        },
-        {
-          actionLabel: '组件特性动作',
-          actionType: 'component',
-          description: '触发所选组件的特性动作',
-          supportComponents: '*',
-          schema: renderCmptActionSelect('目标组件', true)
-        }
-      ]
-    },
-    {
-      actionLabel: '其他',
-      actionType: 'others',
-      children: [
-        {
-          actionLabel: '复制内容',
-          actionType: 'copy',
-          description: '复制文本内容至粘贴板',
-          innerArgs: ['content', 'copyFormat'],
-          descDetail: (info: any) => {
-            return (
-              <div>
-                复制内容：
-                <span className="variable-left">
-                  {info?.args?.content || '-'}
-                </span>
-              </div>
-            );
-          },
-          schema: getArgsWrapper({
-            type: 'wrapper',
-            body: [
-              getSchemaTpl('textareaFormulaControl', {
-                name: 'content',
-                label: '内容模板',
-                variables: '${variables}',
-                mode: 'horizontal',
-                size: 'lg',
-                visibleOn: 'this.actionType === "copy"',
-                required: true
-              }),
-              {
-                type: 'select',
-                name: 'copyFormat',
-                mode: 'horizontal',
-                value: 'text/plain',
-                size: 'lg',
-                options: [
-                  {
-                    label: '纯文本',
-                    value: 'text/plain'
-                  },
-                  {
-                    label: '富文本',
-                    value: 'text/html'
-                  }
-                ],
-                label: '复制格式'
-              }
-            ]
-          })
-        },
-        {
-          actionLabel: '自定义JS',
-          actionType: 'custom',
-          description: '通过JavaScript自定义动作逻辑',
-          schema: {
-            type: 'js-editor',
-            allowFullscreen: true,
-            required: true,
-            name: 'script',
-            label: '自定义JS',
-            mode: 'horizontal',
-            options: {
-              automaticLayout: true,
-              lineNumbers: 'off',
-              glyphMargin: false,
-              tabSize: 2,
-              fontSize: '12px',
-              wordWrap: 'on',
-              lineDecorationsWidth: 0,
-              lineNumbersMinChars: 0,
-              selectOnLineNumbers: true,
-              scrollBeyondLastLine: false,
-              folding: true
-            },
-            className: 'ae-event-control-action-js-editor',
-            value: `/* 自定义JS使用说明：
-  * 1.动作执行函数doAction，可以执行所有类型的动作
-  * 2.通过上下文对象context可以获取当前组件实例，例如context.props可以获取该组件相关属性
-  * 3.事件对象event，在doAction之后执行event.stopPropagation();可以阻止后续动作执行
-*/
-const myMsg = '我是自定义JS';
-doAction({
-  actionType: 'toast',
-  args: {
-    msg: myMsg
-  }
-});
-`
-          }
-        }
-        // {
-        //   actionLabel: '广播',
-        //   actionType: 'broadcast',
-        //   description: '发送广播事件',
-        //   schema: {
-        //     type: 'wrapper',
-        //     className: 'p-none',
-        //     body: [
-        //       {
-        //         type: 'input-text',
-        //         name: 'eventName',
-        //         label: '广播标识',
-        //         mode: 'horizontal',
-        //         required: true,
-        //         description: '广播事件标识派发出去后，其他组件可以进行监听并作出响应'
-        //       },
-        //       {
-        //         type: 'input-text',
-        //         label: '广播名称',
-        //         name: 'eventLabel',
-        //         mode: 'horizontal',
-        //         required: true
-        //       },
-        //       {
-        //         type: 'textarea',
-        //         label: '描述',
-        //         name: 'description',
-        //         mode: 'horizontal',
-        //         required: true
-        //       }
-        //     ]
-        //   }
-        // }
-      ]
-    }
-  ];
-};
-
 // 渲染组件选择配置项
 export const renderCmptSelect = (
   componentLabel: string,
@@ -2121,30 +257,67 @@ export const renderCmptIdInput = (
   };
 };
 
+export const getActionCommonProps = (actionType: string, info?: any) => {
+  if (!actionType) {
+    console.warn('请传入actionType');
+  }
+  return COMMON_ACTION_SCHEMA_MAP[actionType];
+};
+
+export const buildLinkActionDesc = (manager: EditorManager, info: any) => {
+  const desc = info?.rendererLabel || info.componentId || '-';
+
+  return (
+    <span className="desc-tag variable-left variable-right">
+      <TooltipWrapper
+        rootClose
+        placement="top"
+        tooltip={`${desc}，点击锚定到该组件`}
+        tooltipClassName="ae-event-item-header-tip"
+      >
+        <a
+          href="#"
+          className="component-action-tag"
+          onClick={(e: React.UIEvent<any>) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (/^u:[A-Za-z0-9]{12}$/.test(desc)) {
+              toast.info('该组件可能在弹窗内，暂无法锚定到该组件');
+              return;
+            }
+
+            const schema = JSONGetById(
+              manager.store.schema,
+              info.componentId,
+              'id'
+            );
+            if (!schema) {
+              toast.info('温馨提示：未找到该组件');
+              return;
+            }
+            manager.store.setActiveId(schema.$$id);
+          }}
+        >
+          {desc}
+        </a>
+      </TooltipWrapper>
+    </span>
+  );
+};
+
 // 动作配置项schema map
 export const COMMON_ACTION_SCHEMA_MAP: {
   [propName: string]: RendererPluginAction;
 } = {
   setValue: {
     innerArgs: ['value'],
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           设置
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
+          {buildLinkActionDesc(props.manager, info)}
           的数据
-          {/* 设置
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
-          的值为
-          <span className="variable-left variable-right">
-            {info?.args?.value
-              ? JSON.stringify(info?.args?.value)
-              : info?.args?.valueInput}
-          </span> */}
         </div>
       );
     },
@@ -2316,106 +489,53 @@ export const COMMON_ACTION_SCHEMA_MAP: {
     })
   },
   reload: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           刷新
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
+          {buildLinkActionDesc(props.manager, info)}
           组件
         </div>
       );
     }
   },
   clear: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           清空
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
+          {buildLinkActionDesc(props.manager, info)}
           的数据
         </div>
       );
     }
   },
   reset: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           重置
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
+          {buildLinkActionDesc(props.manager, info)}
           的数据
         </div>
       );
     }
   },
   submit: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           提交
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
+          {buildLinkActionDesc(props.manager, info)}
           {info?.__rendererName === 'wizard' ? '全部数据' : '数据'}
         </div>
       );
     }
   },
-  validate: {
-    descDetail: (info: any) => {
-      return (
-        <div>
-          校验
-          <span className="variable-left variable-right">
-            {info?.rendererLabel}
-          </span>
-          的数据
-        </div>
-      );
-    }
-  },
-  prev: {
-    descDetail: (info: any) => {
-      return (
-        <div>
-          <span className="variable-right">{info?.rendererLabel}</span>
-          {info?.__rendererName === 'carousel' ? '滚动至上一张' : null}
-          {info?.__rendererName === 'wizard' ? '返回前一步' : null}
-        </div>
-      );
-    }
-  },
-  next: {
-    descDetail: (info: any) => {
-      return (
-        <div>
-          <span className="variable-right">{info?.rendererLabel}</span>
-          {info?.__rendererName === 'carousel' ? '滚动至下一张' : null}
-          {info?.__rendererName === 'wizard' ? '提交当前步骤数据' : null}
-        </div>
-      );
-    }
-  },
-  expand: {
-    descDetail: (info: any) => {
-      return (
-        <div>
-          <span className="variable-right">{info?.rendererLabel}</span>
-          展开
-        </div>
-      );
-    }
-  },
   collapse: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           <span className="variable-right">{info?.rendererLabel}</span>
           收起
         </div>
@@ -2423,9 +543,9 @@ export const COMMON_ACTION_SCHEMA_MAP: {
     }
   },
   selectAll: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           <span className="variable-right">{info?.rendererLabel}</span>
           选中所有选项
         </div>
@@ -2433,60 +553,17 @@ export const COMMON_ACTION_SCHEMA_MAP: {
     }
   },
   focus: {
-    descDetail: (info: any) => {
+    descDetail: (info: any, context: any, props: any) => {
       return (
-        <div>
+        <div className="action-desc">
           <span className="variable-right">{info?.rendererLabel}</span>
           获取焦点
         </div>
       );
     }
-  },
-  refresh: {
-    descDetail: (info: any) => <div>刷新页面</div>
-  },
-  alert: {
-    descDetail: (info: any) => <div>打开提示对话框</div>
-  },
-  confirm: {
-    descDetail: (info: any) => <div>打开确认对话框</div>
-  },
-  preview: {
-    descDetail: (info: any) => <div>预览图片</div>
-  },
-  zoom: {
-    descDetail: (info: any) => <div>调整图片比例</div>
   }
 };
 
-// 获取动作树中指定的动作
-export const findActionNode = (
-  actions: RendererPluginAction[],
-  actionType: string
-) => findTree(actions, node => node.actionType === actionType);
-
-// 获取包含指定子动作的动作
-export const findSubActionNode = (
-  actions: RendererPluginAction[],
-  actionType: string
-) =>
-  findTree(actions, node =>
-    node.actions?.find(
-      (item: SubRendererPluginAction) => item.actionType === actionType
-    )
-  );
-
-// 获取真实的动作类型
-export const getActionType = (
-  action: ActionConfig,
-  hasSubActionNode: RendererPluginAction | null
-) =>
-  action.groupType === 'component'
-    ? 'component'
-    : hasSubActionNode
-    ? hasSubActionNode.actionType
-    : action.actionType;
-
 // 获取事件Label文案
 export const getEventLabel = (events: RendererPluginEvent[], name: string) =>
   events.find(item => item.eventName === name)?.eventLabel;
@@ -2500,72 +577,6 @@ export const getEventStrongDesc = (
   name: string
 ) => events.find(item => item.eventName === name)?.strongDesc;
 
-// 判断插件动作中是否存在指定动作
-export const hasActionType = (
-  actionType: string,
-  actions?: RendererPluginAction[]
-) => {
-  if (!Array.isArray(actions)) {
-    return false;
-  }
-  return !!actions?.find(item =>
-    [item.actionType, 'component'].includes(actionType)
-  );
-};
-
-// 获取动作配置，主要是为了获取config和desc，schema强制捆绑在动作树节点（动作配置可能在插件动作中 > 树节点 or 子动作）
-export const getPropOfAcion = (
-  action: ActionConfig,
-  propName: string,
-  actionTree: RendererPluginAction[],
-  pluginActions: PluginActions,
-  commonActions?: {[propName: string]: RendererPluginAction},
-  allComponents?: ComponentInfo[]
-): any => {
-  let prop: any = null;
-  if (action.componentId) {
-    // 优先从组件特性动作中找
-    const node = findTree(
-      allComponents ?? [],
-      item => item.value === action.componentId
-    );
-    prop =
-      node &&
-      pluginActions[node.type]?.find(
-        (item: RendererPluginAction) => item.actionType === action.actionType
-      )?.[propName as keyof RendererPluginAction];
-  }
-
-  if (!prop) {
-    prop = findActionNode(actionTree, action.actionType)?.[
-      propName as keyof RendererPluginAction
-    ];
-  }
-
-  if (!prop) {
-    const commonActionConfig = {
-      ...COMMON_ACTION_SCHEMA_MAP,
-      ...commonActions
-    };
-    const hasSubActionNode = findSubActionNode(actionTree, action.actionType);
-
-    if (propName === 'actionLabel') {
-      prop = hasSubActionNode?.actionLabel;
-    } else {
-      prop =
-        hasSubActionNode?.actions?.find(
-          (item: SubRendererPluginAction) =>
-            item.actionType === action.actionType
-        )?.[propName as keyof SubRendererPluginAction] ??
-        commonActionConfig[action.actionType]?.[
-          propName as keyof RendererPluginAction
-        ];
-    }
-  }
-
-  return prop;
-};
-
 export const getOldActionSchema = (
   manager: EditorManager,
   context: BaseEventContext
@@ -2926,31 +937,6 @@ export const getOldActionSchema = (
   };
 };
 
-/**
- * 对象转Combo组件对象数组
- * @param obj
- * @returns
- */
-const objectToComboArray = (obj: PlainObject) =>
-  Object.entries(obj).map(([key, val]) => ({
-    key,
-    val
-  }));
-
-/**
- * Combo组件对象数组转对象
- * @param arr
- * @returns
- */
-const comboArrayToObject = (arr: any[]) => {
-  let obj: PlainObject = {};
-  arr?.forEach(item => {
-    obj[item.key] = item.val;
-  });
-
-  return obj;
-};
-
 /**
  * 获取事件动作面板所需属性配置
  */
@@ -2958,7 +944,6 @@ export const getEventControlConfig = (
   manager: EditorManager,
   context: BaseEventContext
 ) => {
-  const isSubEditor = manager.store.isSubEditor;
   // 通用动作配置
   const commonActions =
     manager?.config.actionOptions?.customActionGetter?.(manager);
@@ -2969,36 +954,6 @@ export const getEventControlConfig = (
   const globalEvents =
     manager?.config.actionOptions?.globalEventGetter?.(manager);
   const allComponents = manager?.store?.getComponentTreeSource();
-  const checkComponent = (node: any, action: RendererPluginAction) => {
-    const actionType = action?.actionType;
-    const actions = manager?.pluginActions[node.type];
-    const haveChild = !!node.children?.length;
-    let isSupport = false;
-    if (typeof action.supportComponents === 'string') {
-      isSupport =
-        action.supportComponents === '*' ||
-        action.supportComponents === node.type;
-      // 内置逻辑
-      if (action.supportComponents === 'byComponent' && actionType) {
-        isSupport = hasActionType(actionType, actions);
-        node.scoped = isSupport;
-      }
-    } else if (Array.isArray(action.supportComponents)) {
-      isSupport = action.supportComponents.includes(node.type);
-    }
-
-    node.isScopeContainer = DATA_CONTAINER.includes(node.type);
-    if (actionType === 'component' && !actions?.length) {
-      node.disabled = true;
-    }
-    if (isSupport) {
-      return true;
-    } else if (haveChild) {
-      return true;
-    }
-    return false;
-  };
-
   return {
     showOldEntry:
       !!(
@@ -3014,466 +969,15 @@ export const getEventControlConfig = (
     addBroadcast: manager?.addBroadcast.bind(manager),
     removeBroadcast: manager?.removeBroadcast.bind(manager),
     allComponents: allComponents,
-    getContextSchemas: async (id?: string, withoutSuper?: boolean) => {
-      const dataSchema = await manager.getContextSchemas(
-        id ?? context!.id,
-        withoutSuper
-      );
-      // 存在指定id时，只需要当前层上下文
-      if (id) {
-        return dataSchema;
-      }
-      return manager.dataSchema;
-    },
-    getComponents: (action: RendererPluginAction) => {
-      if (!action) {
-        return [];
-      }
-
-      let components = manager?.store?.getComponentTreeSource();
-      let finalCmpts: any[] = [];
-      if (isSubEditor) {
-        let editorData = manager.store.getSuperEditorData;
-        while (components) {
-          if (editorData?.__curCmptTreeWrap) {
-            components = [
-              {
-                ...editorData.__curCmptTreeWrap,
-                children: components
-              }
-            ];
-          }
-          finalCmpts = [...finalCmpts, ...components];
-          components = editorData?.__superCmptTreeSource;
-          editorData = editorData?.__super;
-        }
-      } else {
-        finalCmpts = components;
-      }
-      const result = filterTree(
-        finalCmpts,
-        node => checkComponent(node, action),
-        1,
-        true
-      );
-      result.unshift({
-        label: '输入组件id',
-        value: 'customCmptId'
-      });
-      return result;
-    },
-    actionConfigInitFormatter: async (action: ActionConfig) => {
-      let config = {...action};
-      config.args = {...action.args};
-      if (['link', 'url'].includes(action.actionType) && action.args?.params) {
-        config.args = {
-          ...config.args,
-          params: objectToComboArray(action.args?.params)
-        };
-      }
-
-      if (['setValue'].includes(action.actionType) && action.args?.value) {
-        !config.args && (config.args = {});
-        if (Array.isArray(action.args?.value)) {
-          config.args.value = action.args?.value.reduce(
-            (arr: any, valueItem: any, index: number) => {
-              if (!arr[index]) {
-                arr[index] = {};
-              }
-              arr[index].item = objectToComboArray(valueItem);
-              return arr;
-            },
-            []
-          );
-          // 目前只有给combo赋值会是数组，所以认为是全量的赋值方式
-          config.args['__comboType'] = 'all';
-        } else if (typeof action.args?.value === 'object') {
-          config.args.value = objectToComboArray(action.args?.value);
-          config.args['__containerType'] = 'appoint';
-          // 如果有index，认为是给指定序号的combo赋值，所以认为是指定序号的赋值方式
-          if (action.args.index !== undefined) {
-            config.args['__comboType'] = 'appoint';
-          }
-        } else if (
-          action.actionType === 'setValue' &&
-          typeof action.args?.path === 'string' &&
-          typeof action.args?.value === 'string'
-        ) {
-          /** 应用变量赋值 */
-          config.args['__containerType'] = 'all';
-        } else if (
-          action.actionType === 'setValue' &&
-          typeof action.args?.value === 'string'
-        ) {
-          config.args['__containerType'] = 'all';
-          config.args['__valueInput'] = config.args['value'];
-          delete config.args?.value;
-        }
-      }
-
-      if (
-        ['show', 'hidden', 'enabled', 'disabled'].includes(action.actionType)
-      ) {
-        // 兼容老逻辑，初始化actionType
-        config.__statusType = action.actionType;
-        config.__actionType = 'static';
-      }
-
-      if (['usability', 'visibility'].includes(action.actionType)) {
-        // 初始化条件参数
-        config.__actionExpression = action.args?.value;
-      }
-
-      if (['ajax', 'download'].includes(action.actionType)) {
-        config.api = action.api ?? action?.args?.api;
-        config.options = action.options ?? action?.args?.options;
-        if (typeof action?.api === 'string') {
-          config.api = normalizeApi(action?.api);
-        }
-        delete config.args;
-      }
-
-      // 获取动作专有配置参数
-      const innerArgs: any = getPropOfAcion(
-        action,
-        'innerArgs',
-        actionTree,
-        manager.pluginActions,
-        commonActions
-      );
-
-      // 处理刷新组件动作的追加参数
-      if (config.actionType === 'reload') {
-        config.__resetPage = config.args?.resetPage;
-        config.__addParam = !!config.data;
-
-        if (
-          (config.data && typeof config.data === 'object') ||
-          (config.args &&
-            Object.keys(config.args).length &&
-            config.data === undefined)
-        ) {
-          config.__addParam = true;
-          config.__containerType = 'appoint';
-          config.dataMergeMode = config.dataMergeMode || 'merge';
-        }
-
-        if (config.__addParam && config.data) {
-          if (typeof config.data === 'string') {
-            config.__containerType = 'all';
-            config.__valueInput = config.data;
-          } else {
-            config.__containerType = 'appoint';
-            config.__reloadParams = objectToComboArray(config.data);
-          }
-        } else if (
-          config.args &&
-          Object.keys(config.args).length &&
-          config.data === undefined
-        ) {
-          config.__reloadParams = objectToComboArray(config.args);
-        }
-      }
-
-      // 如果不在可以选择的组件范围，设置一下自定义输入组件数据
-      if (
-        [
-          'setValue',
-          'static',
-          'nonstatic',
-          'show',
-          'visibility',
-          'hidden',
-          'enabled',
-          'disabled',
-          'usability',
-          'reload',
-          'submit',
-          'clear',
-          'reset',
-          'validate'
-        ].includes(action.actionType)
-      ) {
-        const node = findTree(
-          allComponents ?? [],
-          item => item.value === config.componentId
-        );
-        if (!node) {
-          config.__cmptId = config.componentId;
-          config.componentId = 'customCmptId';
-        }
-
-        if (['setValue'].includes(action.actionType)) {
-          const root = getRootManager(manager);
-          let schema = JSONGetById(
-            root.store.schema,
-            config.__cmptId || action.componentId,
-            'id'
-          );
-          if (schema) {
-            let __isScopeContainer = DATA_CONTAINER.includes(schema.type);
-            config.__isScopeContainer = __isScopeContainer;
-            config.__rendererName = schema.type;
-          }
-        }
-      }
-
-      if (config.actionType !== 'broadcast') {
-        delete config.data;
-      }
-
-      // 处理下 addItem 的初始化
-      if (action.actionType === 'addItem') {
-        if (Array.isArray(action.args?.item)) {
-          const comboArray = (action.args?.item || []).map((raw: any) =>
-            objectToComboArray(raw)
-          );
-          config.args = {
-            ...config.args,
-            value: comboArray.map(combo => ({item: combo}))
-          };
-        } else {
-          config.args = {
-            ...config.args,
-            item: objectToComboArray(action.args?.item)
-          };
-        }
-      }
-
-      // 还原args为可视化配置结构(args + addOnArgs)
-      if (config.args) {
-        if (innerArgs) {
-          let tmpArgs = {};
-          config.addOnArgs = [];
-          Object.keys(config.args).forEach(key => {
-            // 筛选出附加配置参数
-            if (!innerArgs.includes(key)) {
-              config.addOnArgs = [
-                ...config.addOnArgs,
-                {
-                  key: key,
-                  val: config.args?.[key]
-                }
-              ];
-            } else {
-              tmpArgs = {
-                ...tmpArgs,
-                [key]: config.args?.[key]
-              };
-            }
-          });
-          config.args = tmpArgs;
-        }
-      }
-
-      // 获取左侧命中的动作节点
-      const hasSubActionNode = findSubActionNode(actionTree, action.actionType);
-
-      return {
-        ...config,
-        actionType: getActionType(action, hasSubActionNode),
-        args: config.args
-      };
-    },
-    actionConfigSubmitFormatter: (
-      config: ActionConfig,
-      type?: string,
-      actionData?: ActionData,
-      shcema?: Schema
-    ) => {
-      let action: ActionConfig = {...config, groupType: undefined};
-      action.__title = findActionNode(
-        actionTree,
-        config.actionType
-      )?.actionLabel;
-
-      // 修正动作名称
-      if (config.actionType === 'component') {
-        action.actionType = config.groupType;
-        // 标记一下组件特性动作
-        action.groupType = config.actionType;
-      }
-      const hasSubActionNode = findSubActionNode(actionTree, config.groupType);
-      if (hasSubActionNode) {
-        // 修正动作
-        action.actionType = config.groupType;
-      }
-
-      // 合并附加的动作参数
-      if (config.addOnArgs) {
-        config.addOnArgs.forEach((args: any) => {
-          action.args = action.args ?? {};
-          action.args = {
-            ...action.args,
-            [args.key]: args.val
-          };
-        });
-        delete action.addOnArgs;
-      }
-
-      // 不加回来可能数据会丢失
-      ['drawer', 'dialog', 'args', 'preventDefault'].forEach(key => {
-        action[key] = action[key] ?? actionData?.[key];
-      });
-
-      // 刷新组件时，处理是否追加事件变量
-      if (config.actionType === 'reload') {
-        action.data = undefined;
-        action.dataMergeMode = undefined;
-
-        action.args =
-          action.__rendererName === 'crud'
-            ? {
-                ...action.args,
-                resetPage: config.__resetPage ?? true
-              }
-            : undefined;
-
-        action.data = undefined;
-        if (config.__addParam) {
-          action.dataMergeMode = config.dataMergeMode || 'merge';
-          action.data =
-            config.__containerType === 'all'
-              ? config.__valueInput
-              : comboArrayToObject(config.__reloadParams || []);
-        }
-      }
-
-      // 转换下格式
-      if (['link', 'url'].includes(action.actionType)) {
-        const params = config.args?.params;
-        if (params && params.length) {
-          action.args = {
-            ...action.args,
-            params: comboArrayToObject(params)
-          };
-        }
-      }
-
-      if (action.actionType === 'toast') {
-        // 配置一个toast组件默认class
-        action.args = {
-          ...action.args,
-          className: 'theme-toast-action-scope'
-        };
-      }
-
-      // 转换下格式
-      if (action.actionType === 'setValue') {
-        if (config.args?.hasOwnProperty('path')) {
-          /** 应用变量赋值 */
-          action.args = {
-            path: config.args.path,
-            value: config.args?.value ?? ''
-          };
-
-          action.hasOwnProperty('componentId') && delete action.componentId;
-          return action;
-        } else {
-          action?.args?.hasOwnProperty('path') && delete action.args.path;
-
-          if (config.args?.__valueInput !== undefined) {
-            action.args = {
-              value: config.args?.__valueInput
-            };
-          } else if (Array.isArray(config.args?.value)) {
-            action.args = action.args ?? {};
-            if (
-              (action.__rendererName === 'combo' ||
-                action.__rendererName === 'input-table') &&
-              action.args?.index === undefined
-            ) {
-              // combo、input-table特殊处理
-              let tempArr: any = [];
-              config.args?.value.forEach((valueItem: any, index: number) => {
-                valueItem.item.forEach((item: any) => {
-                  if (!tempArr[index]) {
-                    tempArr[index] = {};
-                  }
-                  tempArr[index][item.key] = item.val;
-                });
-              });
-              action.args = {
-                ...action.args,
-                value: tempArr
-              };
-            } else {
-              action.args = {
-                ...action.args,
-                value: comboArrayToObject(config.args?.value!)
-              };
-            }
-          }
-        }
-      }
-
-      if (
-        [
-          'setValue',
-          'static',
-          'nonstatic',
-          'show',
-          'visibility',
-          'hidden',
-          'enabled',
-          'disabled',
-          'usability',
-          'reload',
-          'submit',
-          'clear',
-          'reset',
-          'validate'
-        ].includes(action.actionType)
-      ) {
-        // 处理一下自行输入组件id的转换
-        if (action.componentId === 'customCmptId') {
-          action.componentId = action.__cmptId;
-        }
-      }
-
-      if (
-        action.actionType === 'addItem' &&
-        action.__rendererName === 'combo'
-      ) {
-        action.args = {
-          ...action.args,
-          item: comboArrayToObject(config.args?.item!)
-        };
-      }
-
-      if (
-        action.actionType === 'addItem' &&
-        action.__rendererName === 'input-table'
-      ) {
-        const comboArray = (config.args?.value! || []).map(
-          (combo: any) => combo.item || {}
-        );
-        action.args = {
-          ...action.args,
-          item: comboArray.map((raw: any) => comboArrayToObject(raw))
-        };
-        delete action.args?.value;
-      }
-
-      // 转换下格式
-      if (['visibility', 'usability'].includes(config.actionType)) {
-        action.args =
-          action.actionType !== 'static'
-            ? {
-                value: action.__actionExpression
-              }
-            : undefined;
-        action.actionType === 'static' &&
-          (action.actionType = config.__statusType);
-        delete action.__actionExpression;
-        delete action.__statusType;
-      }
-
-      delete action.config;
-      delete action.__keywords;
-      delete action.__resultActionTree;
-      return action;
-    }
+    getContextSchemas: getContextSchemasHoc(manager, context),
+    getComponents: getComponentsHoc(manager),
+    actionConfigInitFormatter: actionConfigInitFormatterHoc(
+      manager,
+      actionTree,
+      commonActions,
+      allComponents
+    ),
+    actionConfigSubmitFormatter: actionConfigSubmitFormatterHoc(actionTree)
   };
 };
 
@@ -3495,3 +999,20 @@ export const updateCommonUseActions = (action: Option) => {
   );
   persistSet('common-use-actions', commonUseActions);
 };
+
+export const getActionsByRendererName = (
+  pluginActions: any,
+  rendererName: string
+): RendererPluginAction[] => {
+  let actions = (pluginActions[rendererName] || []).slice();
+  // 表单项类型组件，添加校验动作
+  if (getRendererByName(rendererName)?.isFormItem) {
+    actions.push({
+      actionLabel: '校验',
+      description: '对单个表单项进行校验',
+      actionType: 'validateFormItem'
+    });
+  }
+
+  return actions;
+};
diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx
index 72f51c4a9..bcb597843 100644
--- a/packages/amis-editor/src/renderer/event-control/index.tsx
+++ b/packages/amis-editor/src/renderer/event-control/index.tsx
@@ -5,32 +5,41 @@ import Sortable from 'sortablejs';
 import {
   DataSchema,
   FormItem,
-  Button,
   Icon,
   TooltipWrapper,
-  render as amisRender
+  render as amisRender,
+  Tooltip,
+  PopOverContainer,
+  Tree,
+  Button
 } from 'amis';
 import cloneDeep from 'lodash/cloneDeep';
+import groupBy from 'lodash/groupBy';
 import {
   FormControlProps,
+  JSONTraverse,
+  JSONValueMap,
   Schema,
   autobind,
   findTree,
-  getRendererByName
+  getRendererByName,
+  guid
 } from 'amis-core';
 import ActionDialog from './action-config-dialog';
+import {
+  getEventDesc,
+  getEventStrongDesc,
+  getEventLabel,
+  updateCommonUseActions,
+  getActionsByRendererName
+} from './helper';
 import {
   findActionNode,
   findSubActionNode,
   getActionType,
-  getEventDesc,
-  getEventStrongDesc,
-  getEventLabel,
-  getPropOfAcion,
-  SELECT_PROPS_CONTAINER,
-  updateCommonUseActions,
-  FORMITEM_CMPTS
-} from './helper';
+  getPropOfAcion
+} from './eventControlConfigHelper';
+import {SELECT_PROPS_CONTAINER} from './constants';
 import {
   ActionConfig,
   ActionEventConfig,
@@ -130,6 +139,7 @@ interface EventControlState {
   actionData: ActionData | undefined;
   type: 'update' | 'add';
   appLocaleState?: number;
+  actionRelations: any;
 }
 
 const dialogObjMap = {
@@ -169,6 +179,7 @@ export class EventControl extends React.Component<
       eventPanelActive[event.eventName] = true;
     });
 
+    const actionRelations = this.getActionRelations();
     globalEvents?.forEach(event => {
       eventPanelActive[event.name] = true;
     });
@@ -181,7 +192,8 @@ export class EventControl extends React.Component<
       showEventDialog: false,
       actionData: undefined,
       type: 'add',
-      appLocaleState: 0
+      appLocaleState: 0,
+      actionRelations: actionRelations ?? []
     };
   }
 
@@ -231,8 +243,11 @@ export class EventControl extends React.Component<
       //   eventPanelActive[event.eventName] = true;
       // });
 
+      const actionRelations = this.getActionRelations();
+
       this.setState({
-        events: pluginEvents
+        events: pluginEvents,
+        actionRelations: actionRelations
       });
     }
   }
@@ -404,7 +419,7 @@ export class EventControl extends React.Component<
     if (config.actionType) {
       onEventConfig[event] = {
         ...onEventConfig[event],
-        actions: (onEventConfig[event].actions || []).concat(
+        actions: (onEventConfig[event]?.actions || []).concat(
           // 临时处理，后面干掉这么多交互属性
           Object.defineProperties(config, {
             __cmptTreeSource: {
@@ -634,7 +649,7 @@ export class EventControl extends React.Component<
       item => item.name === data.actionData!.eventKey
     );
     // 收集当前事件动作出参
-    let actions = onEvent[data.actionData!.eventKey].actions;
+    let actions = onEvent[data.actionData!.eventKey]?.actions;
 
     // 编辑的时候只能拿到当前动作前面动作的事件变量以及当前动作事件
     if (data.type === 'update') {
@@ -705,17 +720,6 @@ export class EventControl extends React.Component<
           allComponents
         );
 
-        // const schema: any = {
-        //   type: 'object',
-        //   $id: 'outputVar',
-        //   properties: {
-        //     [action.outputVar!]: {
-        //       ...actionSchema[0],
-        //       title: `${action.outputVar}(${actionLabel})`
-        //     }
-        //   }
-        // };
-
         jsonSchema = {
           ...jsonSchema,
           properties: {
@@ -734,12 +738,6 @@ export class EventControl extends React.Component<
             }
           }
         };
-
-        // manager.dataSchema.addScope(
-        //   schema,
-        //   `action-output-${action.actionType}_${index}`
-        // );
-        // manager.dataSchema.current.group = '动作出参';
       });
 
     if (manager.dataSchema.getScope('event-variable')) {
@@ -760,70 +758,6 @@ export class EventControl extends React.Component<
     );
   }
 
-  // buildActionDataSchema(
-  //   activeData: Pick<
-  //     EventControlState,
-  //     'showAcionDialog' | 'type' | 'actionData'
-  //   >,
-  //   manager: EditorManager
-  // ) {
-  //   const {actionTree, pluginActions, commonActions, allComponents} =
-  //     this.props;
-  //   const {onEvent} = this.state;
-  //   // 收集当前事件已有ajax动作的请求返回结果作为事件变量
-  //   let oldActions = onEvent[activeData.actionData!.eventKey].actions;
-
-  //   // 编辑的时候只能拿到当前动作前面动作的事件变量
-  //   if (activeData.type === 'update') {
-  //     oldActions = oldActions.slice(0, activeData.actionData!.actionIndex);
-  //   }
-
-  //   oldActions
-  //     ?.filter(item => item.outputVar)
-  //     ?.forEach((action: ActionConfig, index: number) => {
-  //       if (
-  //         manager.dataSchema.getScope(
-  //           `action-output-${action.actionType}_ ${index}`
-  //         )
-  //       ) {
-  //         return;
-  //       }
-
-  //       const actionLabel = getPropOfAcion(
-  //         action,
-  //         'actionLabel',
-  //         actionTree,
-  //         pluginActions,
-  //         commonActions,
-  //         allComponents
-  //       );
-  //       const actionSchema = getPropOfAcion(
-  //         action,
-  //         'outputVarDataSchema',
-  //         actionTree,
-  //         pluginActions,
-  //         commonActions,
-  //         allComponents
-  //       );
-
-  //       const schema: any = {
-  //         type: 'object',
-  //         properties: {
-  //           [`event.data.${action.outputVar}`]: {
-  //             ...actionSchema[0],
-  //             title: `${action.outputVar}(${actionLabel})`
-  //           }
-  //         }
-  //       };
-
-  //       manager.dataSchema.addScope(
-  //         schema,
-  //         `action-output-${action.actionType}_${index}`
-  //       );
-  //       manager.dataSchema.current.group = '动作出参';
-  //     });
-  // }
-
   async buildContextSchema(data: any) {
     const {manager, node: currentNode} = this.props;
     let variables = [];
@@ -1049,15 +983,6 @@ export class EventControl extends React.Component<
     if (manager.dataSchema.getScope('event-variable')) {
       manager.dataSchema.removeScope('event-variable');
     }
-
-    // // 删除动作出参
-    // Object.keys(manager.dataSchema.idMap)
-    //   .filter(key => /^action-output/.test(key))
-    //   .map(key => {
-    //     if (manager.dataSchema.getScope(key)) {
-    //       manager.dataSchema.removeScope(key);
-    //     }
-    //   });
   }
 
   renderActionType(action: any, actionIndex: number, eventKey: string) {
@@ -1084,6 +1009,70 @@ export class EventControl extends React.Component<
     );
   }
 
+  getActionRelations() {
+    const {actions: pluginActions, data, manager} = this.props;
+    const actions = getActionsByRendererName(pluginActions, data?.type);
+    const schema = manager.store.schema;
+    let prevs: any[] = [];
+
+    JSONValueMap(schema, (value: any, key: string, host: any) => {
+      if (key === 'onEvent') {
+        const hostName =
+          host.title ?? host.label ?? host.name ?? host.type ?? host.id;
+        const hostId = host.$$id;
+
+        Object.keys(value)?.forEach(eventKey => {
+          if (eventKey !== '$$id') {
+            value[eventKey]?.actions?.forEach((ac: any) => {
+              const matchAction = actions?.find(
+                item => item.actionType === ac.actionType
+              );
+              if (matchAction && ac.componentId === data.id) {
+                // 如果存在不同事件调用同组件同动作，则不记录
+                const isHas = prevs?.find(
+                  item =>
+                    item.hostId === hostId && item.actionType === ac.actionType
+                );
+                if (!isHas) {
+                  prevs.push({
+                    actionType: matchAction.actionType,
+                    actionLabel: matchAction.actionLabel,
+                    hostName,
+                    hostId
+                  });
+                }
+              }
+            });
+          }
+        });
+      }
+      return value;
+    });
+
+    const prevsGroup = groupBy(prevs, item => item.actionLabel);
+    let actionRelations: any = [];
+    Object.keys(prevsGroup)?.forEach(key => {
+      actionRelations.push({
+        label: key,
+        value: key,
+        icon: 'fa fa-bolt',
+        children: prevsGroup[key]?.map(item => ({
+          label: item.hostName,
+          value: item.hostId,
+          icon: ''
+        }))
+      });
+    });
+
+    return actionRelations;
+  }
+
+  @autobind
+  handleRelationComponentActive(componentId: string) {
+    const {manager} = this.props;
+    manager.store.setActiveId(componentId);
+  }
+
   render() {
     const {
       actionTree,
@@ -1149,15 +1138,48 @@ export class EventControl extends React.Component<
       ];
     }
     const events = [...itemEvents, ...commonEvents];
+
     return (
       <div className="ae-event-control">
         <header
           className={cx({
             'ae-event-control-header': true,
-            'ae-event-control-header-oldentry': showOldEntry,
+            'ae-event-control-header-m':
+              this.props.data.type === 'button' && showOldEntry,
             'no-bd-btm': !eventKeys.length
           })}
         >
+          {this.state.actionRelations?.length ? (
+            <PopOverContainer
+              popOverContainer={() => document.body}
+              popOverRender={({onClose}) => (
+                <div className="ae-action-relation-panel">
+                  <Tree
+                    options={this.state.actionRelations}
+                    className="variables-select-panel-tree"
+                    onChange={this.handleRelationComponentActive}
+                    onlyChildren={true}
+                    value=""
+                  />
+                </div>
+              )}
+            >
+              {({onClick, ref, isOpened}) => {
+                return (
+                  <TooltipWrapper
+                    tooltipClassName="ae-event-item-header-tip"
+                    trigger="hover"
+                    placement="top"
+                    tooltip="可查看哪些组件会调用当前组件的哪些动作"
+                  >
+                    <Button className="block w-full mb-2" onClick={onClick}>
+                      查看调用关系
+                    </Button>
+                  </TooltipWrapper>
+                );
+              }}
+            </PopOverContainer>
+          ) : null}
           {render(
             'dropdown',
             {
@@ -1205,7 +1227,13 @@ export class EventControl extends React.Component<
         <ul
           className={cx({
             'ae-event-control-content': true,
-            'ae-event-control-content-oldentry': showOldEntry
+            'ae-event-control-content-m':
+              (this.props.data.type === 'button' && showOldEntry) ||
+              this.state.actionRelations?.length,
+            'ae-event-control-content-l':
+              this.props.data.type === 'button' &&
+              showOldEntry &&
+              !!this.state.actionRelations?.length
           })}
           ref={this.dragRef}
         >
@@ -1225,7 +1253,7 @@ export class EventControl extends React.Component<
                     })}
                   >
                     <TooltipWrapper
-                      tooltipClassName="event-item-header-tip"
+                      tooltipClassName="ae-event-item-header-tip"
                       trigger="hover"
                       placement="top"
                       tooltip={{
@@ -1323,6 +1351,18 @@ export class EventControl extends React.Component<
                                       eventKey
                                     )}
                                   </div>
+                                  {action.description && (
+                                    <TooltipWrapper
+                                      trigger="hover"
+                                      placement="top"
+                                      tooltip={action.description}
+                                    >
+                                      <Icon
+                                        icon="far fa-question-circle"
+                                        className="flex justify-center items-center icon ml-0.5"
+                                      />
+                                    </TooltipWrapper>
+                                  )}
                                 </div>
                                 <div className="action-control-header-right">
                                   <div
diff --git a/packages/amis-editor/src/renderer/style-control/SingleThemeCssCode.tsx b/packages/amis-editor/src/renderer/style-control/SingleThemeCssCode.tsx
new file mode 100644
index 000000000..6b830fb60
--- /dev/null
+++ b/packages/amis-editor/src/renderer/style-control/SingleThemeCssCode.tsx
@@ -0,0 +1,3297 @@
+/**
+ * 单类名输入框 + 自定义样式源码编辑器
+ */
+import React, {useEffect, useRef, useState} from 'react';
+import {Editor, Overlay, PopOver} from 'amis-ui';
+import {FormControlProps, FormItem} from 'amis-core';
+// @ts-ignore
+import {parse as cssParse} from 'amis-postcss';
+import {PlainObject} from './types';
+import isObject from 'lodash/isObject';
+import debounce from 'lodash/debounce';
+import isEmpty from 'lodash/isEmpty';
+import {Icon} from '../../icons/index';
+
+const conf: any = {
+  ws: '[ \t\n\r\f]*',
+  identifier:
+    '-?-?([a-zA-Z]|(\\\\(([0-9a-fA-F]{1,6}\\s?)|[^[0-9a-fA-F])))([\\w\\-]|(\\\\(([0-9a-fA-F]{1,6}\\s?)|[^[0-9a-fA-F])))*',
+  tokenizer: {
+    root: [{include: '@selector'}],
+    selector: [{include: '@selectorbody'}],
+    selectorbody: [
+      [
+        '[*_]?@identifier@ws:(?=(\\s|\\d|[^{;}]*[;}]))',
+        'attribute.name',
+        '@rulevalue'
+      ]
+    ],
+    rulevalue: [
+      {include: '@strings'},
+      {include: '@term'},
+      ['!important', 'keyword'],
+      [';', 'delimiter', '@pop'],
+      ['(?=})', {token: '', next: '@pop'}]
+    ],
+    term: [
+      [
+        '(url-prefix)(\\()',
+        [
+          'attribute.value',
+          {token: 'delimiter.parenthesis', next: '@urldeclaration'}
+        ]
+      ],
+      [
+        '(url)(\\()',
+        [
+          'attribute.value',
+          {token: 'delimiter.parenthesis', next: '@urldeclaration'}
+        ]
+      ],
+      {include: '@numbers'},
+      {include: '@name'},
+      {include: '@strings'},
+      ['([<>=\\+\\-\\*\\/\\^\\|\\~,])', 'delimiter'],
+      [',', 'delimiter']
+    ],
+    warndebug: [
+      ['[@](warn|debug)', {token: 'keyword', next: '@declarationbody'}]
+    ],
+    urldeclaration: [
+      {include: '@strings'},
+      ['[^)\r\n]+', 'string'],
+      ['\\)', {token: 'delimiter.parenthesis', next: '@pop'}]
+    ],
+    parenthizedterm: [
+      {include: '@term'},
+      ['\\)', {token: 'delimiter.parenthesis', next: '@pop'}]
+    ],
+    declarationbody: [
+      {include: '@term'},
+      [';', 'delimiter', '@pop'],
+      ['(?=})', {token: '', next: '@pop'}] // missing semicolon
+    ],
+    name: [['@identifier', 'attribute.value']],
+    numbers: [
+      [
+        '-?(\\d*\\.)?\\d+([eE][\\-+]?\\d+)?',
+        {token: 'attribute.value.number', next: '@units'}
+      ],
+      ['#[0-9a-fA-F_]+(?!\\w)', 'attribute.value.hex']
+    ],
+    units: [
+      [
+        '(em|ex|ch|rem|fr|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
+        'attribute.value.unit',
+        '@pop'
+      ]
+    ],
+    strings: [
+      ['~?"', {token: 'string', next: '@stringenddoublequote'}],
+      ["~?'", {token: 'string', next: '@stringendquote'}]
+    ],
+    stringenddoublequote: [
+      ['\\\\.', 'string'],
+      ['"', {token: 'string', next: '@pop'}],
+      [/[^\\"]+/, 'string'],
+      ['.', 'string']
+    ],
+    stringendquote: [
+      ['\\\\.', 'string'],
+      ["'", {token: 'string', next: '@pop'}],
+      [/[^\\']+/, 'string'],
+      ['.', 'string']
+    ]
+  }
+};
+
+const keywords: PlainObject = {
+  'additive-symbols': {},
+  'align-content': {
+    values: [
+      'center',
+      'flex-end',
+      'flex-start',
+      'space-around',
+      'space-between',
+      'stretch',
+      'start',
+      'end',
+      'normal',
+      'baseline',
+      'first baseline',
+      'last baseline',
+      'space-around',
+      'space-between',
+      'space-evenly',
+      'stretch',
+      'safe',
+      'unsafe'
+    ]
+  },
+  'align-items': {
+    values: [
+      'baseline',
+      'center',
+      'flex-end',
+      'flex-start',
+      'stretch',
+      'normal',
+      'start',
+      'end',
+      'self-start',
+      'self-end',
+      'first baseline',
+      'last baseline',
+      'stretch',
+      'safe',
+      'unsafe'
+    ]
+  },
+  'justify-items': {
+    values: [
+      'auto',
+      'normal',
+      'end',
+      'start',
+      'flex-end',
+      'flex-start',
+      'self-end',
+      'self-start',
+      'center',
+      'left',
+      'right',
+      'baseline',
+      'first baseline',
+      'last baseline',
+      'stretch',
+      'safe',
+      'unsafe',
+      'legacy'
+    ]
+  },
+  'justify-self': {
+    values: [
+      'auto',
+      'normal',
+      'end',
+      'start',
+      'flex-end',
+      'flex-start',
+      'self-end',
+      'self-start',
+      'center',
+      'left',
+      'right',
+      'baseline',
+      'first baseline',
+      'last baseline',
+      'stretch',
+      'save',
+      'unsave'
+    ]
+  },
+  'align-self': {
+    values: [
+      'auto',
+      'normal',
+      'self-end',
+      'self-start',
+      'baseline',
+      'center',
+      'flex-end',
+      'flex-start',
+      'stretch',
+      'baseline',
+      'first baseline',
+      'last baseline',
+      'safe',
+      'unsafe'
+    ]
+  },
+  'all': {
+    values: []
+  },
+  'alt': {
+    values: []
+  },
+  'animation': {
+    values: [
+      'alternate',
+      'alternate-reverse',
+      'backwards',
+      'both',
+      'forwards',
+      'infinite',
+      'none',
+      'normal',
+      'reverse'
+    ]
+  },
+  'animation-delay': {},
+  'animation-direction': {
+    values: ['alternate', 'alternate-reverse', 'normal', 'reverse']
+  },
+  'animation-duration': {},
+  'animation-fill-mode': {
+    values: ['backwards', 'both', 'forwards', 'none']
+  },
+  'animation-iteration-count': {
+    values: ['infinite']
+  },
+  'animation-name': {
+    values: ['none']
+  },
+  'animation-play-state': {
+    values: ['paused', 'running']
+  },
+  'animation-timing-function': {},
+  'backface-visibility': {
+    values: ['hidden', 'visible']
+  },
+  'background': {
+    values: ['fixed', 'local', 'none', 'scroll']
+  },
+  'background-attachment': {
+    values: ['fixed', 'local', 'scroll']
+  },
+  'background-blend-mode': {
+    values: [
+      'normal',
+      'multiply',
+      'screen',
+      'overlay',
+      'darken',
+      'lighten',
+      'color-dodge',
+      'color-burn',
+      'hard-light',
+      'soft-light',
+      'difference',
+      'exclusion',
+      'hue',
+      'saturation',
+      'color',
+      'luminosity'
+    ]
+  },
+  'background-clip': {},
+  'background-color': {},
+  'background-image': {
+    values: ['none']
+  },
+  'background-origin': {},
+  'background-position': {},
+  'background-position-x': {
+    values: ['center', 'left', 'right']
+  },
+  'background-position-y': {
+    values: ['bottom', 'center', 'top']
+  },
+  'background-repeat': {
+    values: []
+  },
+  'background-size': {
+    values: ['auto', 'contain', 'cover']
+  },
+  'behavior': {},
+  'block-size': {
+    values: ['auto']
+  },
+  'border': {},
+  'border-block-end': {},
+  'border-block-start': {},
+  'border-block-end-color': {},
+  'border-block-start-color': {},
+  'border-block-end-style': {},
+  'border-block-start-style': {},
+  'border-block-end-width': {},
+  'border-block-start-width': {},
+  'border-bottom': {},
+  'border-bottom-color': {},
+  'border-bottom-left-radius': {},
+  'border-bottom-right-radius': {},
+  'border-bottom-style': {},
+  'border-bottom-width': {},
+  'border-collapse': {
+    values: ['collapse', 'separate']
+  },
+  'border-color': {
+    values: []
+  },
+  'border-image': {
+    values: [
+      'auto',
+      'fill',
+      'none',
+      'repeat',
+      'round',
+      'space',
+      'stretch',
+      'url()'
+    ]
+  },
+  'border-image-outset': {},
+  'border-image-repeat': {
+    values: ['repeat', 'round', 'space', 'stretch']
+  },
+  'border-image-slice': {
+    values: ['fill']
+  },
+  'border-image-source': {
+    values: ['none']
+  },
+  'border-image-width': {
+    values: ['auto']
+  },
+  'border-inline-end': {},
+  'border-inline-start': {},
+  'border-inline-end-color': {},
+  'border-inline-start-color': {},
+  'border-inline-end-style': {},
+  'border-inline-start-style': {},
+  'border-inline-end-width': {},
+  'border-inline-start-width': {},
+  'border-left': {},
+  'border-left-color': {},
+  'border-left-style': {},
+  'border-left-width': {},
+  'border-radius': {},
+  'border-right': {},
+  'border-right-color': {},
+  'border-right-style': {},
+  'border-right-width': {},
+  'border-spacing': {},
+  'border-style': {
+    values: []
+  },
+  'border-top': {},
+  'border-top-color': {},
+  'border-top-left-radius': {},
+  'border-top-right-radius': {},
+  'border-top-style': {},
+  'border-top-width': {},
+  'border-width': {
+    values: []
+  },
+  'bottom': {
+    values: ['auto']
+  },
+  'box-decoration-break': {
+    values: ['clone', 'slice']
+  },
+  'box-shadow': {
+    values: ['inset', 'none']
+  },
+  'box-sizing': {
+    values: ['border-box', 'content-box']
+  },
+  'break-after': {
+    values: [
+      'always',
+      'auto',
+      'avoid',
+      'avoid-column',
+      'avoid-page',
+      'column',
+      'left',
+      'page',
+      'right'
+    ]
+  },
+  'break-before': {
+    values: [
+      'always',
+      'auto',
+      'avoid',
+      'avoid-column',
+      'avoid-page',
+      'column',
+      'left',
+      'page',
+      'right'
+    ]
+  },
+  'break-inside': {
+    values: ['auto', 'avoid', 'avoid-column', 'avoid-page']
+  },
+  'caption-side': {
+    values: ['bottom', 'top']
+  },
+  'caret-color': {
+    values: ['auto']
+  },
+  'clear': {
+    values: ['both', 'left', 'none', 'right']
+  },
+  'clip': {
+    values: ['auto', 'rect()']
+  },
+  'clip-path': {
+    values: ['none', 'url()']
+  },
+  'clip-rule': {
+    values: ['evenodd', 'nonzero']
+  },
+  'color': {},
+  'color-interpolation-filters': {
+    values: ['auto', 'linearRGB', 'sRGB']
+  },
+  'column-count': {
+    values: ['auto']
+  },
+  'column-fill': {
+    values: ['auto', 'balance']
+  },
+  'column-gap': {
+    values: ['normal']
+  },
+  'column-rule': {},
+  'column-rule-color': {},
+  'column-rule-style': {},
+  'column-rule-width': {},
+  'columns': {
+    values: ['auto']
+  },
+  'column-span': {
+    values: ['all', 'none']
+  },
+  'column-width': {
+    values: ['auto']
+  },
+  'contain': {
+    values: ['none', 'strict', 'content', 'size', 'layout', 'style', 'paint']
+  },
+  'content': {
+    values: ['attr()', 'counter(name)', 'icon', 'none', 'normal', 'url()']
+  },
+  'counter-increment': {
+    values: ['none']
+  },
+  'counter-reset': {
+    values: ['none']
+  },
+  'cursor': {
+    values: [
+      'alias',
+      'all-scroll',
+      'auto',
+      'cell',
+      'col-resize',
+      'context-menu',
+      'copy',
+      'crosshair',
+      'default',
+      'e-resize',
+      'ew-resize',
+      'grab',
+      'grabbing',
+      'help',
+      'move',
+      '-moz-grab',
+      '-moz-grabbing',
+      '-moz-zoom-in',
+      '-moz-zoom-out',
+      'ne-resize',
+      'nesw-resize',
+      'no-drop',
+      'none',
+      'not-allowed',
+      'n-resize',
+      'ns-resize',
+      'nw-resize',
+      'nwse-resize',
+      'pointer',
+      'progress',
+      'row-resize',
+      'se-resize',
+      's-resize',
+      'sw-resize',
+      'text',
+      'vertical-text',
+      'wait',
+      '-webkit-grab',
+      '-webkit-grabbing',
+      '-webkit-zoom-in',
+      '-webkit-zoom-out',
+      'w-resize',
+      'zoom-in',
+      'zoom-out'
+    ]
+  },
+  'direction': {
+    values: ['ltr', 'rtl']
+  },
+  'display': {
+    values: [
+      'block',
+      'contents',
+      'flex',
+      'flexbox',
+      'flow-root',
+      'grid',
+      'inline',
+      'inline-block',
+      'inline-flex',
+      'inline-flexbox',
+      'inline-table',
+      'list-item',
+      '-moz-box',
+      '-moz-deck',
+      '-moz-grid',
+      '-moz-grid-group',
+      '-moz-grid-line',
+      '-moz-groupbox',
+      '-moz-inline-box',
+      '-moz-inline-grid',
+      '-moz-inline-stack',
+      '-moz-marker',
+      '-moz-popup',
+      '-moz-stack',
+      '-ms-flexbox',
+      '-ms-grid',
+      '-ms-inline-flexbox',
+      '-ms-inline-grid',
+      'none',
+      'ruby',
+      'ruby-base',
+      'ruby-base-container',
+      'ruby-text',
+      'ruby-text-container',
+      'run-in',
+      'table',
+      'table-caption',
+      'table-cell',
+      'table-column',
+      'table-column-group',
+      'table-footer-group',
+      'table-header-group',
+      'table-row',
+      'table-row-group',
+      '-webkit-box',
+      '-webkit-flex',
+      '-webkit-inline-box',
+      '-webkit-inline-flex'
+    ]
+  },
+  'empty-cells': {
+    values: ['hide', '-moz-show-background', 'show']
+  },
+  'enable-background': {
+    values: ['accumulate', 'new']
+  },
+  'fallback': {},
+  'fill': {
+    values: ['url()', 'none']
+  },
+  'fill-opacity': {},
+  'fill-rule': {
+    values: ['evenodd', 'nonzero']
+  },
+  'filter': {
+    values: [
+      'none',
+      'blur()',
+      'brightness()',
+      'contrast()',
+      'drop-shadow()',
+      'grayscale()',
+      'hue-rotate()',
+      'invert()',
+      'opacity()',
+      'saturate()',
+      'sepia()',
+      'url()'
+    ]
+  },
+  'flex': {
+    values: ['auto', 'content', 'none']
+  },
+  'flex-basis': {
+    values: ['auto', 'content']
+  },
+  'flex-direction': {
+    values: ['column', 'column-reverse', 'row', 'row-reverse']
+  },
+  'flex-flow': {
+    values: [
+      'column',
+      'column-reverse',
+      'nowrap',
+      'row',
+      'row-reverse',
+      'wrap',
+      'wrap-reverse'
+    ]
+  },
+  'flex-grow': {},
+  'flex-shrink': {},
+  'flex-wrap': {
+    values: ['nowrap', 'wrap', 'wrap-reverse']
+  },
+  'float': {
+    values: ['inline-end', 'inline-start', 'left', 'none', 'right']
+  },
+  'flood-color': {},
+  'flood-opacity': {},
+  'font': {
+    values: [
+      '100',
+      '200',
+      '300',
+      '400',
+      '500',
+      '600',
+      '700',
+      '800',
+      '900',
+      'bold',
+      'bolder',
+      'caption',
+      'icon',
+      'italic',
+      'large',
+      'larger',
+      'lighter',
+      'medium',
+      'menu',
+      'message-box',
+      'normal',
+      'oblique',
+      'small',
+      'small-caps',
+      'small-caption',
+      'smaller',
+      'status-bar',
+      'x-large',
+      'x-small',
+      'xx-large',
+      'xx-small'
+    ]
+  },
+  'font-family': {
+    values: [
+      "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
+      'Arial, Helvetica, sans-serif',
+      "Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
+      "'Courier New', Courier, monospace",
+      'cursive',
+      'fantasy',
+      "'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif",
+      "Georgia, 'Times New Roman', Times, serif",
+      "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif",
+      "Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif",
+      "'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif",
+      'monospace',
+      'sans-serif',
+      "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+      'serif',
+      "'Times New Roman', Times, serif",
+      "'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif",
+      'Verdana, Geneva, Tahoma, sans-serif'
+    ]
+  },
+  'font-feature-settings': {
+    values: [
+      '"aalt"',
+      '"abvf"',
+      '"abvm"',
+      '"abvs"',
+      '"afrc"',
+      '"akhn"',
+      '"blwf"',
+      '"blwm"',
+      '"blws"',
+      '"calt"',
+      '"case"',
+      '"ccmp"',
+      '"cfar"',
+      '"cjct"',
+      '"clig"',
+      '"cpct"',
+      '"cpsp"',
+      '"cswh"',
+      '"curs"',
+      '"c2pc"',
+      '"c2sc"',
+      '"dist"',
+      '"dlig"',
+      '"dnom"',
+      '"dtls"',
+      '"expt"',
+      '"falt"',
+      '"fin2"',
+      '"fin3"',
+      '"fina"',
+      '"flac"',
+      '"frac"',
+      '"fwid"',
+      '"half"',
+      '"haln"',
+      '"halt"',
+      '"hist"',
+      '"hkna"',
+      '"hlig"',
+      '"hngl"',
+      '"hojo"',
+      '"hwid"',
+      '"init"',
+      '"isol"',
+      '"ital"',
+      '"jalt"',
+      '"jp78"',
+      '"jp83"',
+      '"jp90"',
+      '"jp04"',
+      '"kern"',
+      '"lfbd"',
+      '"liga"',
+      '"ljmo"',
+      '"lnum"',
+      '"locl"',
+      '"ltra"',
+      '"ltrm"',
+      '"mark"',
+      '"med2"',
+      '"medi"',
+      '"mgrk"',
+      '"mkmk"',
+      '"nalt"',
+      '"nlck"',
+      '"nukt"',
+      '"numr"',
+      '"onum"',
+      '"opbd"',
+      '"ordn"',
+      '"ornm"',
+      '"palt"',
+      '"pcap"',
+      '"pkna"',
+      '"pnum"',
+      '"pref"',
+      '"pres"',
+      '"pstf"',
+      '"psts"',
+      '"pwid"',
+      '"qwid"',
+      '"rand"',
+      '"rclt"',
+      '"rlig"',
+      '"rkrf"',
+      '"rphf"',
+      '"rtbd"',
+      '"rtla"',
+      '"rtlm"',
+      '"ruby"',
+      '"salt"',
+      '"sinf"',
+      '"size"',
+      '"smcp"',
+      '"smpl"',
+      '"ssty"',
+      '"stch"',
+      '"subs"',
+      '"sups"',
+      '"swsh"',
+      '"titl"',
+      '"tjmo"',
+      '"tnam"',
+      '"tnum"',
+      '"trad"',
+      '"twid"',
+      '"unic"',
+      '"valt"',
+      '"vatu"',
+      '"vert"',
+      '"vhal"',
+      '"vjmo"',
+      '"vkna"',
+      '"vkrn"',
+      '"vpal"',
+      '"vrt2"',
+      '"zero"',
+      'normal',
+      'off',
+      'on'
+    ]
+  },
+  'font-kerning': {
+    values: ['auto', 'none', 'normal']
+  },
+  'font-language-override': {
+    values: ['normal']
+  },
+  'font-size': {
+    values: [
+      'large',
+      'larger',
+      'medium',
+      'small',
+      'smaller',
+      'x-large',
+      'x-small',
+      'xx-large',
+      'xx-small'
+    ]
+  },
+  'font-size-adjust': {
+    values: ['none']
+  },
+  'font-stretch': {
+    values: [
+      'condensed',
+      'expanded',
+      'extra-condensed',
+      'extra-expanded',
+      'narrower',
+      'normal',
+      'semi-condensed',
+      'semi-expanded',
+      'ultra-condensed',
+      'ultra-expanded',
+      'wider'
+    ]
+  },
+  'font-style': {
+    values: ['italic', 'normal', 'oblique']
+  },
+  'font-synthesis': {
+    values: ['none', 'style', 'weight']
+  },
+  'font-variant': {
+    values: ['normal', 'small-caps']
+  },
+  'font-variant-alternates': {
+    values: [
+      'annotation()',
+      'character-variant()',
+      'historical-forms',
+      'normal',
+      'ornaments()',
+      'styleset()',
+      'stylistic()',
+      'swash()'
+    ]
+  },
+  'font-variant-caps': {
+    values: [
+      'all-petite-caps',
+      'all-small-caps',
+      'normal',
+      'petite-caps',
+      'small-caps',
+      'titling-caps',
+      'unicase'
+    ]
+  },
+  'font-variant-east-asian': {
+    values: [
+      'full-width',
+      'jis04',
+      'jis78',
+      'jis83',
+      'jis90',
+      'normal',
+      'proportional-width',
+      'ruby',
+      'simplified',
+      'traditional'
+    ]
+  },
+  'font-variant-ligatures': {
+    values: [
+      'additional-ligatures',
+      'common-ligatures',
+      'contextual',
+      'discretionary-ligatures',
+      'historical-ligatures',
+      'no-additional-ligatures',
+      'no-common-ligatures',
+      'no-contextual',
+      'no-discretionary-ligatures',
+      'no-historical-ligatures',
+      'none',
+      'normal'
+    ]
+  },
+  'font-variant-numeric': {
+    values: [
+      'diagonal-fractions',
+      'lining-nums',
+      'normal',
+      'oldstyle-nums',
+      'ordinal',
+      'proportional-nums',
+      'slashed-zero',
+      'stacked-fractions',
+      'tabular-nums'
+    ]
+  },
+  'font-variant-position': {
+    values: ['normal', 'sub', 'super']
+  },
+  'font-weight': {
+    values: [
+      '100',
+      '200',
+      '300',
+      '400',
+      '500',
+      '600',
+      '700',
+      '800',
+      '900',
+      'bold',
+      'bolder',
+      'lighter',
+      'normal'
+    ]
+  },
+  'glyph-orientation-horizontal': {},
+  'glyph-orientation-vertical': {
+    values: ['auto']
+  },
+  'grid-area': {
+    values: ['auto', 'span']
+  },
+  'grid': {},
+  'grid-auto-columns': {
+    values: ['min-content', 'max-content', 'auto', 'minmax()']
+  },
+  'grid-auto-flow': {
+    values: ['row', 'column', 'dense']
+  },
+  'grid-auto-rows': {
+    values: ['min-content', 'max-content', 'auto', 'minmax()']
+  },
+  'grid-column': {
+    values: ['auto', 'span']
+  },
+  'grid-column-end': {
+    values: ['auto', 'span']
+  },
+  'grid-column-gap': {},
+  'grid-column-start': {
+    values: ['auto', 'span']
+  },
+  'grid-gap': {},
+  'grid-row': {
+    values: ['auto', 'span']
+  },
+  'grid-row-end': {
+    values: ['auto', 'span']
+  },
+  'grid-row-gap': {},
+  'grid-row-start': {
+    values: ['auto', 'span']
+  },
+  'grid-template': {
+    values: [
+      'none',
+      'min-content',
+      'max-content',
+      'auto',
+      'subgrid',
+      'minmax()',
+      'repeat()'
+    ]
+  },
+  'grid-template-areas': {
+    values: ['none']
+  },
+  'grid-template-columns': {
+    values: [
+      'none',
+      'min-content',
+      'max-content',
+      'auto',
+      'subgrid',
+      'minmax()',
+      'repeat()'
+    ]
+  },
+  'grid-template-rows': {
+    values: [
+      'none',
+      'min-content',
+      'max-content',
+      'auto',
+      'subgrid',
+      'minmax()',
+      'repeat()'
+    ]
+  },
+  'height': {
+    values: ['auto', 'fit-content', 'max-content', 'min-content']
+  },
+  'hyphens': {
+    values: ['auto', 'manual', 'none']
+  },
+  'image-orientation': {
+    values: ['flip', 'from-image']
+  },
+  'image-rendering': {
+    values: [
+      'auto',
+      'crisp-edges',
+      '-moz-crisp-edges',
+      'optimizeQuality',
+      'optimizeSpeed',
+      'pixelated'
+    ]
+  },
+  'ime-mode': {
+    values: ['active', 'auto', 'disabled', 'inactive', 'normal']
+  },
+  'inline-size': {
+    values: ['auto']
+  },
+  'isolation': {
+    values: ['auto', 'isolate']
+  },
+  'justify-content': {
+    values: [
+      'center',
+      'start',
+      'end',
+      'left',
+      'right',
+      'safe',
+      'unsafe',
+      'stretch',
+      'space-evenly',
+      'flex-end',
+      'flex-start',
+      'space-around',
+      'space-between',
+      'baseline',
+      'first baseline',
+      'last baseline'
+    ]
+  },
+  'kerning': {
+    values: ['auto']
+  },
+  'left': {
+    values: ['auto']
+  },
+  'letter-spacing': {
+    values: ['normal']
+  },
+  'lighting-color': {},
+  'line-break': {
+    values: ['auto', 'loose', 'normal', 'strict', 'anywhere']
+  },
+  'line-height': {
+    values: ['normal']
+  },
+  'list-style': {
+    values: [
+      'armenian',
+      'circle',
+      'decimal',
+      'decimal-leading-zero',
+      'disc',
+      'georgian',
+      'inside',
+      'lower-alpha',
+      'lower-greek',
+      'lower-latin',
+      'lower-roman',
+      'none',
+      'outside',
+      'square',
+      'symbols()',
+      'upper-alpha',
+      'upper-latin',
+      'upper-roman',
+      'url()'
+    ]
+  },
+  'list-style-image': {
+    values: ['none']
+  },
+  'list-style-position': {
+    values: ['inside', 'outside']
+  },
+  'list-style-type': {
+    values: [
+      'armenian',
+      'circle',
+      'decimal',
+      'decimal-leading-zero',
+      'disc',
+      'georgian',
+      'lower-alpha',
+      'lower-greek',
+      'lower-latin',
+      'lower-roman',
+      'none',
+      'square',
+      'symbols()',
+      'upper-alpha',
+      'upper-latin',
+      'upper-roman'
+    ]
+  },
+  'margin': {
+    values: ['auto']
+  },
+  'margin-block-end': {
+    values: ['auto']
+  },
+  'margin-block-start': {
+    values: ['auto']
+  },
+  'margin-bottom': {
+    values: ['auto']
+  },
+  'margin-inline-end': {
+    values: ['auto']
+  },
+  'margin-inline-start': {
+    values: ['auto']
+  },
+  'margin-left': {
+    values: ['auto']
+  },
+  'margin-right': {
+    values: ['auto']
+  },
+  'margin-top': {
+    values: ['auto']
+  },
+  'marker': {
+    values: ['none', 'url()']
+  },
+  'marker-end': {
+    values: ['none', 'url()']
+  },
+  'marker-mid': {
+    values: ['none', 'url()']
+  },
+  'marker-start': {
+    values: ['none', 'url()']
+  },
+  'mask-image': {
+    values: ['none', 'url()']
+  },
+  'mask-mode': {
+    values: ['alpha', 'auto', 'luminance']
+  },
+  'mask-origin': {},
+  'mask-position': {},
+  'mask-repeat': {},
+  'mask-size': {
+    values: ['auto', 'contain', 'cover']
+  },
+  'mask-type': {
+    values: ['alpha', 'luminance']
+  },
+  'max-block-size': {
+    values: ['none']
+  },
+  'max-height': {
+    values: ['none', 'fit-content', 'max-content', 'min-content']
+  },
+  'max-inline-size': {
+    values: ['none']
+  },
+  'max-width': {
+    values: ['none', 'fit-content', 'max-content', 'min-content']
+  },
+  'min-block-size': {},
+  'min-height': {
+    values: ['auto', 'fit-content', 'max-content', 'min-content']
+  },
+  'min-inline-size': {},
+  'min-width': {
+    values: ['auto', 'fit-content', 'max-content', 'min-content']
+  },
+  'mix-blend-mode': {
+    values: [
+      'normal',
+      'multiply',
+      'screen',
+      'overlay',
+      'darken',
+      'lighten',
+      'color-dodge',
+      'color-burn',
+      'hard-light',
+      'soft-light',
+      'difference',
+      'exclusion',
+      'hue',
+      'saturation',
+      'color',
+      'luminosity'
+    ]
+  },
+  'motion': {
+    values: ['none', 'path()', 'auto', 'reverse']
+  },
+  'motion-offset': {},
+  'motion-path': {
+    values: ['none', 'path()']
+  },
+  'motion-rotation': {
+    values: ['auto', 'reverse']
+  },
+  '-moz-animation': {
+    values: [
+      'alternate',
+      'alternate-reverse',
+      'backwards',
+      'both',
+      'forwards',
+      'infinite',
+      'none',
+      'normal',
+      'reverse'
+    ]
+  },
+  '-moz-animation-delay': {},
+  '-moz-animation-direction': {
+    values: ['alternate', 'alternate-reverse', 'normal', 'reverse']
+  },
+  '-moz-animation-duration': {},
+  '-moz-animation-iteration-count': {
+    values: ['infinite']
+  },
+  '-moz-animation-name': {
+    values: ['none']
+  },
+  '-moz-animation-play-state': {
+    values: ['paused', 'running']
+  },
+  '-moz-animation-timing-function': {},
+  '-moz-appearance': {
+    values: [
+      'button',
+      'button-arrow-down',
+      'button-arrow-next',
+      'button-arrow-previous',
+      'button-arrow-up',
+      'button-bevel',
+      'checkbox',
+      'checkbox-container',
+      'checkbox-label',
+      'dialog',
+      'groupbox',
+      'listbox',
+      'menuarrow',
+      'menuimage',
+      'menuitem',
+      'menuitemtext',
+      'menulist',
+      'menulist-button',
+      'menulist-text',
+      'menulist-textfield',
+      'menupopup',
+      'menuradio',
+      'menuseparator',
+      '-moz-mac-unified-toolbar',
+      '-moz-win-borderless-glass',
+      '-moz-win-browsertabbar-toolbox',
+      '-moz-win-communications-toolbox',
+      '-moz-win-glass',
+      '-moz-win-media-toolbox',
+      'none',
+      'progressbar',
+      'progresschunk',
+      'radio',
+      'radio-container',
+      'radio-label',
+      'radiomenuitem',
+      'resizer',
+      'resizerpanel',
+      'scrollbarbutton-down',
+      'scrollbarbutton-left',
+      'scrollbarbutton-right',
+      'scrollbarbutton-up',
+      'scrollbar-small',
+      'scrollbartrack-horizontal',
+      'scrollbartrack-vertical',
+      'separator',
+      'spinner',
+      'spinner-downbutton',
+      'spinner-textfield',
+      'spinner-upbutton',
+      'statusbar',
+      'statusbarpanel',
+      'tab',
+      'tabpanels',
+      'tab-scroll-arrow-back',
+      'tab-scroll-arrow-forward',
+      'textfield',
+      'textfield-multiline',
+      'toolbar',
+      'toolbox',
+      'tooltip',
+      'treeheadercell',
+      'treeheadersortarrow',
+      'treeitem',
+      'treetwistyopen',
+      'treeview',
+      'treewisty',
+      'window'
+    ]
+  },
+  '-moz-backface-visibility': {
+    values: ['hidden', 'visible']
+  },
+  '-moz-background-clip': {
+    values: ['padding']
+  },
+  '-moz-background-inline-policy': {
+    values: ['bounding-box', 'continuous', 'each-box']
+  },
+  '-moz-background-origin': {},
+  '-moz-border-bottom-colors': {},
+  '-moz-border-image': {
+    values: [
+      'auto',
+      'fill',
+      'none',
+      'repeat',
+      'round',
+      'space',
+      'stretch',
+      'url()'
+    ]
+  },
+  '-moz-border-left-colors': {},
+  '-moz-border-right-colors': {},
+  '-moz-border-top-colors': {},
+  '-moz-box-align': {
+    values: ['baseline', 'center', 'end', 'start', 'stretch']
+  },
+  '-moz-box-direction': {
+    values: ['normal', 'reverse']
+  },
+  '-moz-box-flex': {},
+  '-moz-box-flexgroup': {},
+  '-moz-box-ordinal-group': {},
+  '-moz-box-orient': {
+    values: ['block-axis', 'horizontal', 'inline-axis', 'vertical']
+  },
+  '-moz-box-pack': {
+    values: ['center', 'end', 'justify', 'start']
+  },
+  '-moz-box-sizing': {
+    values: ['border-box', 'content-box', 'padding-box']
+  },
+  '-moz-column-count': {
+    values: ['auto']
+  },
+  '-moz-column-gap': {
+    values: ['normal']
+  },
+  '-moz-column-rule': {},
+  '-moz-column-rule-color': {},
+  '-moz-column-rule-style': {},
+  '-moz-column-rule-width': {},
+  '-moz-columns': {
+    values: ['auto']
+  },
+  '-moz-column-width': {
+    values: ['auto']
+  },
+  '-moz-font-feature-settings': {
+    values: [
+      '"c2cs"',
+      '"dlig"',
+      '"kern"',
+      '"liga"',
+      '"lnum"',
+      '"onum"',
+      '"smcp"',
+      '"swsh"',
+      '"tnum"',
+      'normal',
+      'off',
+      'on'
+    ]
+  },
+  '-moz-hyphens': {
+    values: ['auto', 'manual', 'none']
+  },
+  '-moz-perspective': {
+    values: ['none']
+  },
+  '-moz-perspective-origin': {},
+  '-moz-text-align-last': {
+    values: ['auto', 'center', 'justify', 'left', 'right']
+  },
+  '-moz-text-decoration-color': {},
+  '-moz-text-decoration-line': {
+    values: ['line-through', 'none', 'overline', 'underline']
+  },
+  '-moz-text-decoration-style': {
+    values: ['dashed', 'dotted', 'double', 'none', 'solid', 'wavy']
+  },
+  '-moz-text-size-adjust': {
+    values: ['auto', 'none']
+  },
+  '-moz-transform': {
+    values: [
+      'matrix()',
+      'matrix3d()',
+      'none',
+      'perspective',
+      'rotate()',
+      'rotate3d()',
+      "rotateX('angle')",
+      "rotateY('angle')",
+      "rotateZ('angle')",
+      'scale()',
+      'scale3d()',
+      'scaleX()',
+      'scaleY()',
+      'scaleZ()',
+      'skew()',
+      'skewX()',
+      'skewY()',
+      'translate()',
+      'translate3d()',
+      'translateX()',
+      'translateY()',
+      'translateZ()'
+    ]
+  },
+  '-moz-transform-origin': {},
+  '-moz-transition': {
+    values: ['all', 'none']
+  },
+  '-moz-transition-delay': {},
+  '-moz-transition-duration': {},
+  '-moz-transition-property': {
+    values: ['all', 'none']
+  },
+  '-moz-transition-timing-function': {},
+  '-moz-user-focus': {
+    values: ['ignore', 'normal']
+  },
+  '-moz-user-select': {
+    values: [
+      'all',
+      'element',
+      'elements',
+      '-moz-all',
+      '-moz-none',
+      'none',
+      'text',
+      'toggle'
+    ]
+  },
+  '-ms-accelerator': {
+    values: ['false', 'true']
+  },
+  '-ms-behavior': {},
+  '-ms-block-progression': {
+    values: ['bt', 'lr', 'rl', 'tb']
+  },
+  '-ms-content-zoom-chaining': {
+    values: ['chained', 'none']
+  },
+  '-ms-content-zooming': {
+    values: ['none', 'zoom']
+  },
+  '-ms-content-zoom-limit': {},
+  '-ms-content-zoom-limit-max': {},
+  '-ms-content-zoom-limit-min': {},
+  '-ms-content-zoom-snap': {
+    values: [
+      'mandatory',
+      'none',
+      'proximity',
+      'snapInterval(100%, 100%)',
+      'snapList()'
+    ]
+  },
+  '-ms-content-zoom-snap-points': {
+    values: ['snapInterval(100%, 100%)', 'snapList()']
+  },
+  '-ms-content-zoom-snap-type': {
+    values: ['mandatory', 'none', 'proximity']
+  },
+  '-ms-filter': {},
+  '-ms-flex': {
+    values: ['auto', 'none']
+  },
+  '-ms-flex-align': {
+    values: ['baseline', 'center', 'end', 'start', 'stretch']
+  },
+  '-ms-flex-direction': {
+    values: ['column', 'column-reverse', 'row', 'row-reverse']
+  },
+  '-ms-flex-flow': {
+    values: [
+      'column',
+      'column-reverse',
+      'nowrap',
+      'row',
+      'wrap',
+      'wrap-reverse'
+    ]
+  },
+  '-ms-flex-item-align': {
+    values: ['auto', 'baseline', 'center', 'end', 'start', 'stretch']
+  },
+  '-ms-flex-line-pack': {
+    values: ['center', 'distribute', 'end', 'justify', 'start', 'stretch']
+  },
+  '-ms-flex-order': {},
+  '-ms-flex-pack': {
+    values: ['center', 'distribute', 'end', 'justify', 'start']
+  },
+  '-ms-flex-wrap': {
+    values: ['nowrap', 'wrap', 'wrap-reverse']
+  },
+  '-ms-flow-from': {
+    values: ['none']
+  },
+  '-ms-flow-into': {
+    values: ['none']
+  },
+  '-ms-grid-column': {
+    values: ['auto', 'end', 'start']
+  },
+  '-ms-grid-column-align': {
+    values: ['center', 'end', 'start', 'stretch']
+  },
+  '-ms-grid-columns': {},
+  '-ms-grid-column-span': {},
+  '-ms-grid-layer': {},
+  '-ms-grid-row': {
+    values: ['auto', 'end', 'start']
+  },
+  '-ms-grid-row-align': {
+    values: ['center', 'end', 'start', 'stretch']
+  },
+  '-ms-grid-rows': {},
+  '-ms-grid-row-span': {},
+  '-ms-high-contrast-adjust': {
+    values: ['auto', 'none']
+  },
+  '-ms-hyphenate-limit-chars': {
+    values: ['auto']
+  },
+  '-ms-hyphenate-limit-lines': {
+    values: ['no-limit']
+  },
+  '-ms-hyphenate-limit-zone': {},
+  '-ms-hyphens': {
+    values: ['auto', 'manual', 'none']
+  },
+  '-ms-ime-mode': {
+    values: ['active', 'auto', 'disabled', 'inactive', 'normal']
+  },
+  '-ms-interpolation-mode': {
+    values: ['bicubic', 'nearest-neighbor']
+  },
+  '-ms-layout-grid': {
+    values: ['char', 'line', 'mode', 'type']
+  },
+  '-ms-layout-grid-char': {
+    values: ['auto', 'none']
+  },
+  '-ms-layout-grid-line': {
+    values: ['auto', 'none']
+  },
+  '-ms-layout-grid-mode': {
+    values: ['both', 'char', 'line', 'none']
+  },
+  '-ms-layout-grid-type': {
+    values: ['fixed', 'loose', 'strict']
+  },
+  '-ms-line-break': {
+    values: ['auto', 'keep-all', 'newspaper', 'normal', 'strict']
+  },
+  '-ms-overflow-style': {
+    values: ['auto', '-ms-autohiding-scrollbar', 'none', 'scrollbar']
+  },
+  '-ms-perspective': {
+    values: ['none']
+  },
+  '-ms-perspective-origin': {},
+  '-ms-perspective-origin-x': {},
+  '-ms-perspective-origin-y': {},
+  '-ms-progress-appearance': {
+    values: ['bar', 'ring']
+  },
+  '-ms-scrollbar-3dlight-color': {},
+  '-ms-scrollbar-arrow-color': {},
+  '-ms-scrollbar-base-color': {},
+  '-ms-scrollbar-darkshadow-color': {},
+  '-ms-scrollbar-face-color': {},
+  '-ms-scrollbar-highlight-color': {},
+  '-ms-scrollbar-shadow-color': {},
+  '-ms-scrollbar-track-color': {},
+  '-ms-scroll-chaining': {
+    values: ['chained', 'none']
+  },
+  '-ms-scroll-limit': {
+    values: ['auto']
+  },
+  '-ms-scroll-limit-x-max': {
+    values: ['auto']
+  },
+  '-ms-scroll-limit-x-min': {},
+  '-ms-scroll-limit-y-max': {
+    values: ['auto']
+  },
+  '-ms-scroll-limit-y-min': {},
+  '-ms-scroll-rails': {
+    values: ['none', 'railed']
+  },
+  '-ms-scroll-snap-points-x': {
+    values: ['snapInterval(100%, 100%)', 'snapList()']
+  },
+  '-ms-scroll-snap-points-y': {
+    values: ['snapInterval(100%, 100%)', 'snapList()']
+  },
+  '-ms-scroll-snap-type': {
+    values: ['none', 'mandatory', 'proximity']
+  },
+  '-ms-scroll-snap-x': {
+    values: [
+      'mandatory',
+      'none',
+      'proximity',
+      'snapInterval(100%, 100%)',
+      'snapList()'
+    ]
+  },
+  '-ms-scroll-snap-y': {
+    values: [
+      'mandatory',
+      'none',
+      'proximity',
+      'snapInterval(100%, 100%)',
+      'snapList()'
+    ]
+  },
+  '-ms-scroll-translation': {
+    values: ['none', 'vertical-to-horizontal']
+  },
+  '-ms-text-align-last': {
+    values: ['auto', 'center', 'justify', 'left', 'right']
+  },
+  '-ms-text-autospace': {
+    values: [
+      'ideograph-alpha',
+      'ideograph-numeric',
+      'ideograph-parenthesis',
+      'ideograph-space',
+      'none',
+      'punctuation'
+    ]
+  },
+  '-ms-text-combine-horizontal': {
+    values: ['all', 'digits', 'none']
+  },
+  '-ms-text-justify': {
+    values: [
+      'auto',
+      'distribute',
+      'inter-cluster',
+      'inter-ideograph',
+      'inter-word',
+      'kashida'
+    ]
+  },
+  '-ms-text-kashida-space': {},
+  '-ms-text-overflow': {
+    values: ['clip', 'ellipsis']
+  },
+  '-ms-text-size-adjust': {
+    values: ['auto', 'none']
+  },
+  '-ms-text-underline-position': {
+    values: ['alphabetic', 'auto', 'over', 'under']
+  },
+  '-ms-touch-action': {
+    values: [
+      'auto',
+      'double-tap-zoom',
+      'manipulation',
+      'none',
+      'pan-x',
+      'pan-y',
+      'pinch-zoom'
+    ]
+  },
+  '-ms-touch-select': {
+    values: ['grippers', 'none']
+  },
+  '-ms-transform': {
+    values: [
+      'matrix()',
+      'matrix3d()',
+      'none',
+      'rotate()',
+      'rotate3d()',
+      "rotateX('angle')",
+      "rotateY('angle')",
+      "rotateZ('angle')",
+      'scale()',
+      'scale3d()',
+      'scaleX()',
+      'scaleY()',
+      'scaleZ()',
+      'skew()',
+      'skewX()',
+      'skewY()',
+      'translate()',
+      'translate3d()',
+      'translateX()',
+      'translateY()',
+      'translateZ()'
+    ]
+  },
+  '-ms-transform-origin': {},
+  '-ms-transform-origin-x': {},
+  '-ms-transform-origin-y': {},
+  '-ms-transform-origin-z': {},
+  '-ms-user-select': {
+    values: ['element', 'none', 'text']
+  },
+  '-ms-word-break': {
+    values: ['break-all', 'keep-all', 'normal']
+  },
+  '-ms-word-wrap': {
+    values: ['break-word', 'normal']
+  },
+  '-ms-wrap-flow': {
+    values: ['auto', 'both', 'clear', 'end', 'maximum', 'minimum', 'start']
+  },
+  '-ms-wrap-margin': {},
+  '-ms-wrap-through': {
+    values: ['none', 'wrap']
+  },
+  '-ms-writing-mode': {
+    values: [
+      'bt-lr',
+      'bt-rl',
+      'lr-bt',
+      'lr-tb',
+      'rl-bt',
+      'rl-tb',
+      'tb-lr',
+      'tb-rl'
+    ]
+  },
+  '-ms-zoom': {
+    values: ['normal']
+  },
+  '-ms-zoom-animation': {
+    values: ['default', 'none']
+  },
+  'nav-down': {
+    values: ['auto', 'current', 'root']
+  },
+  'nav-index': {
+    values: ['auto']
+  },
+  'nav-left': {
+    values: ['auto', 'current', 'root']
+  },
+  'nav-right': {
+    values: ['auto', 'current', 'root']
+  },
+  'nav-up': {
+    values: ['auto', 'current', 'root']
+  },
+  'negative': {},
+  '-o-animation': {
+    values: [
+      'alternate',
+      'alternate-reverse',
+      'backwards',
+      'both',
+      'forwards',
+      'infinite',
+      'none',
+      'normal',
+      'reverse'
+    ]
+  },
+  '-o-animation-delay': {},
+  '-o-animation-direction': {
+    values: ['alternate', 'alternate-reverse', 'normal', 'reverse']
+  },
+  '-o-animation-duration': {},
+  '-o-animation-fill-mode': {
+    values: ['backwards', 'both', 'forwards', 'none']
+  },
+  '-o-animation-iteration-count': {
+    values: ['infinite']
+  },
+  '-o-animation-name': {
+    values: ['none']
+  },
+  '-o-animation-play-state': {
+    values: ['paused', 'running']
+  },
+  '-o-animation-timing-function': {},
+  'object-fit': {
+    values: ['contain', 'cover', 'fill', 'none', 'scale-down']
+  },
+  'object-position': {},
+  '-o-border-image': {
+    values: ['auto', 'fill', 'none', 'repeat', 'round', 'space', 'stretch']
+  },
+  '-o-object-fit': {
+    values: ['contain', 'cover', 'fill', 'none', 'scale-down']
+  },
+  '-o-object-position': {},
+  'opacity': {},
+  'order': {},
+  'orphans': {},
+  '-o-table-baseline': {},
+  '-o-tab-size': {},
+  '-o-text-overflow': {
+    values: ['clip', 'ellipsis']
+  },
+  '-o-transform': {
+    values: [
+      'matrix()',
+      'matrix3d()',
+      'none',
+      'rotate()',
+      'rotate3d()',
+      "rotateX('angle')",
+      "rotateY('angle')",
+      "rotateZ('angle')",
+      'scale()',
+      'scale3d()',
+      'scaleX()',
+      'scaleY()',
+      'scaleZ()',
+      'skew()',
+      'skewX()',
+      'skewY()',
+      'translate()',
+      'translate3d()',
+      'translateX()',
+      'translateY()',
+      'translateZ()'
+    ]
+  },
+  '-o-transform-origin': {},
+  '-o-transition': {
+    values: ['all', 'none']
+  },
+  '-o-transition-delay': {},
+  '-o-transition-duration': {},
+  '-o-transition-property': {
+    values: ['all', 'none']
+  },
+  '-o-transition-timing-function': {},
+  'offset-block-end': {
+    values: ['auto']
+  },
+  'offset-block-start': {
+    values: ['auto']
+  },
+  'offset-inline-end': {
+    values: ['auto']
+  },
+  'offset-inline-start': {
+    values: ['auto']
+  },
+  'outline': {
+    values: ['auto', 'invert']
+  },
+  'outline-color': {
+    values: ['invert']
+  },
+  'outline-offset': {},
+  'outline-style': {
+    values: ['auto']
+  },
+  'outline-width': {},
+  'overflow': {
+    values: ['auto', 'hidden', '-moz-hidden-unscrollable', 'scroll', 'visible']
+  },
+  'overflow-wrap': {
+    values: ['break-word', 'normal']
+  },
+  'overflow-x': {
+    values: ['auto', 'hidden', 'scroll', 'visible']
+  },
+  'overflow-y': {
+    values: ['auto', 'hidden', 'scroll', 'visible']
+  },
+  'pad': {},
+  'padding': {
+    values: []
+  },
+  'padding-bottom': {},
+  'padding-block-end': {},
+  'padding-block-start': {},
+  'padding-inline-end': {},
+  'padding-inline-start': {},
+  'padding-left': {},
+  'padding-right': {},
+  'padding-top': {},
+  'page-break-after': {
+    values: ['always', 'auto', 'avoid', 'left', 'right']
+  },
+  'page-break-before': {
+    values: ['always', 'auto', 'avoid', 'left', 'right']
+  },
+  'page-break-inside': {
+    values: ['auto', 'avoid']
+  },
+  'paint-order': {
+    values: ['fill', 'markers', 'normal', 'stroke']
+  },
+  'perspective': {
+    values: ['none']
+  },
+  'perspective-origin': {},
+  'pointer-events': {
+    values: [
+      'all',
+      'fill',
+      'none',
+      'painted',
+      'stroke',
+      'visible',
+      'visibleFill',
+      'visiblePainted',
+      'visibleStroke'
+    ]
+  },
+  'position': {
+    values: [
+      'absolute',
+      'fixed',
+      '-ms-page',
+      'relative',
+      'static',
+      'sticky',
+      '-webkit-sticky'
+    ]
+  },
+  'prefix': {},
+  'quotes': {
+    values: ['none']
+  },
+  'range': {
+    values: ['auto', 'infinite']
+  },
+  'resize': {
+    values: ['both', 'horizontal', 'none', 'vertical']
+  },
+  'right': {
+    values: ['auto']
+  },
+  'ruby-align': {
+    values: [
+      'auto',
+      'center',
+      'distribute-letter',
+      'distribute-space',
+      'left',
+      'line-edge',
+      'right',
+      'start',
+      'space-between',
+      'space-around'
+    ]
+  },
+  'ruby-overhang': {
+    values: ['auto', 'end', 'none', 'start']
+  },
+  'ruby-position': {
+    values: ['after', 'before', 'inline', 'right']
+  },
+  'ruby-span': {
+    values: ['attr(x)', 'none']
+  },
+  'scrollbar-3dlight-color': {},
+  'scrollbar-arrow-color': {},
+  'scrollbar-base-color': {},
+  'scrollbar-darkshadow-color': {},
+  'scrollbar-face-color': {},
+  'scrollbar-highlight-color': {},
+  'scrollbar-shadow-color': {},
+  'scrollbar-track-color': {},
+  'scroll-behavior': {
+    values: ['auto', 'smooth']
+  },
+  'scroll-snap-coordinate': {
+    values: ['none']
+  },
+  'scroll-snap-destination': {},
+  'scroll-snap-points-x': {
+    values: ['none', 'repeat()']
+  },
+  'scroll-snap-points-y': {
+    values: ['none', 'repeat()']
+  },
+  'scroll-snap-type': {
+    values: ['none', 'mandatory', 'proximity']
+  },
+  'shape-image-threshold': {},
+  'shape-margin': {},
+  'shape-outside': {
+    values: ['margin-box', 'none']
+  },
+  'shape-rendering': {
+    values: ['auto', 'crispEdges', 'geometricPrecision', 'optimizeSpeed']
+  },
+  'size': {},
+  'src': {
+    values: ['url()', 'format()', 'local()']
+  },
+  'stop-color': {},
+  'stop-opacity': {},
+  'stroke': {
+    values: ['url()', 'none']
+  },
+  'stroke-dasharray': {
+    values: ['none']
+  },
+  'stroke-dashoffset': {},
+  'stroke-linecap': {
+    values: ['butt', 'round', 'square']
+  },
+  'stroke-linejoin': {
+    values: ['bevel', 'miter', 'round']
+  },
+  'stroke-miterlimit': {},
+  'stroke-opacity': {},
+  'stroke-width': {},
+  'suffix': {},
+  'system': {
+    values: [
+      'additive',
+      'alphabetic',
+      'cyclic',
+      'extends',
+      'fixed',
+      'numeric',
+      'symbolic'
+    ]
+  },
+  'symbols': {},
+  'table-layout': {
+    values: ['auto', 'fixed']
+  },
+  'tab-size': {},
+  'text-align': {
+    values: ['center', 'end', 'justify', 'left', 'right', 'start']
+  },
+  'text-align-last': {
+    values: ['auto', 'center', 'justify', 'left', 'right']
+  },
+  'text-anchor': {
+    values: ['end', 'middle', 'start']
+  },
+  'text-decoration': {
+    values: [
+      'dashed',
+      'dotted',
+      'double',
+      'line-through',
+      'none',
+      'overline',
+      'solid',
+      'underline',
+      'wavy'
+    ]
+  },
+  'text-decoration-color': {},
+  'text-decoration-line': {
+    values: ['line-through', 'none', 'overline', 'underline']
+  },
+  'text-decoration-style': {
+    values: ['dashed', 'dotted', 'double', 'none', 'solid', 'wavy']
+  },
+  'text-indent': {
+    values: []
+  },
+  'text-justify': {
+    values: [
+      'auto',
+      'distribute',
+      'distribute-all-lines',
+      'inter-cluster',
+      'inter-ideograph',
+      'inter-word',
+      'kashida',
+      'newspaper'
+    ]
+  },
+  'text-orientation': {
+    values: ['sideways', 'sideways-right', 'upright']
+  },
+  'text-overflow': {
+    values: ['clip', 'ellipsis']
+  },
+  'text-rendering': {
+    values: [
+      'auto',
+      'geometricPrecision',
+      'optimizeLegibility',
+      'optimizeSpeed'
+    ]
+  },
+  'text-shadow': {
+    values: ['none']
+  },
+  'text-transform': {
+    values: ['capitalize', 'lowercase', 'none', 'uppercase']
+  },
+  'text-underline-position': {
+    values: ['above', 'auto', 'below']
+  },
+  'top': {
+    values: ['auto']
+  },
+  'touch-action': {
+    values: [
+      'auto',
+      'cross-slide-x',
+      'cross-slide-y',
+      'double-tap-zoom',
+      'manipulation',
+      'none',
+      'pan-x',
+      'pan-y',
+      'pinch-zoom'
+    ]
+  },
+  'transform': {
+    values: [
+      'matrix()',
+      'matrix3d()',
+      'none',
+      'perspective()',
+      'rotate()',
+      'rotate3d()',
+      "rotateX('angle')",
+      "rotateY('angle')",
+      "rotateZ('angle')",
+      'scale()',
+      'scale3d()',
+      'scaleX()',
+      'scaleY()',
+      'scaleZ()',
+      'skew()',
+      'skewX()',
+      'skewY()',
+      'translate()',
+      'translate3d()',
+      'translateX()',
+      'translateY()',
+      'translateZ()'
+    ]
+  },
+  'transform-origin': {},
+  'transform-style': {
+    values: ['flat', 'preserve-3d']
+  },
+  'transition': {
+    values: ['all', 'none']
+  },
+  'transition-delay': {},
+  'transition-duration': {},
+  'transition-property': {
+    values: ['all', 'none']
+  },
+  'transition-timing-function': {},
+  'unicode-bidi': {
+    values: [
+      'bidi-override',
+      'embed',
+      'isolate',
+      'isolate-override',
+      'normal',
+      'plaintext'
+    ]
+  },
+  'unicode-range': {
+    values: [
+      'U+26',
+      'U+20-24F, U+2B0-2FF, U+370-4FF, U+1E00-1EFF, U+2000-20CF, U+2100-23FF, U+2500-26FF, U+E000-F8FF, U+FB00-FB4F',
+      'U+20-17F, U+2B0-2FF, U+2000-206F, U+20A0-20CF, U+2100-21FF, U+2600-26FF',
+      'U+20-2FF, U+370-4FF, U+1E00-20CF, U+2100-23FF, U+2500-26FF, U+FB00-FB4F, U+FFF0-FFFD',
+      'U+20-4FF, U+530-58F, U+10D0-10FF, U+1E00-23FF, U+2440-245F, U+2500-26FF, U+FB00-FB4F, U+FE20-FE2F, U+FFF0-FFFD',
+      'U+00-7F',
+      'U+80-FF',
+      'U+100-17F',
+      'U+180-24F',
+      'U+1E00-1EFF',
+      'U+250-2AF',
+      'U+370-3FF',
+      'U+1F00-1FFF',
+      'U+400-4FF',
+      'U+500-52F',
+      'U+00-52F, U+1E00-1FFF, U+2200-22FF',
+      'U+530-58F',
+      'U+590-5FF',
+      'U+600-6FF',
+      'U+750-77F',
+      'U+8A0-8FF',
+      'U+700-74F',
+      'U+900-97F',
+      'U+980-9FF',
+      'U+A00-A7F',
+      'U+A80-AFF',
+      'U+B00-B7F',
+      'U+B80-BFF',
+      'U+C00-C7F',
+      'U+C80-CFF',
+      'U+D00-D7F',
+      'U+D80-DFF',
+      'U+118A0-118FF',
+      'U+E00-E7F',
+      'U+1A20-1AAF',
+      'U+AA80-AADF',
+      'U+E80-EFF',
+      'U+F00-FFF',
+      'U+1000-109F',
+      'U+10A0-10FF',
+      'U+1200-137F',
+      'U+1380-139F',
+      'U+2D80-2DDF',
+      'U+AB00-AB2F',
+      'U+1780-17FF',
+      'U+1800-18AF',
+      'U+1B80-1BBF',
+      'U+1CC0-1CCF',
+      'U+4E00-9FD5',
+      'U+3400-4DB5',
+      'U+2F00-2FDF',
+      'U+2E80-2EFF',
+      'U+1100-11FF',
+      'U+AC00-D7AF',
+      'U+3040-309F',
+      'U+30A0-30FF',
+      'U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F',
+      'U+A4D0-A4FF',
+      'U+A000-A48F',
+      'U+A490-A4CF',
+      'U+2000-206F',
+      'U+3000-303F',
+      'U+2070-209F',
+      'U+20A0-20CF',
+      'U+2100-214F',
+      'U+2150-218F',
+      'U+2190-21FF',
+      'U+2200-22FF',
+      'U+2300-23FF',
+      'U+E000-F8FF',
+      'U+FB00-FB4F',
+      'U+FB50-FDFF',
+      'U+1F600-1F64F',
+      'U+2600-26FF',
+      'U+1F300-1F5FF',
+      'U+1F900-1F9FF',
+      'U+1F680-1F6FF'
+    ]
+  },
+  'user-select': {
+    values: ['all', 'auto', 'contain', 'none', 'text']
+  },
+  'vertical-align': {
+    values: [
+      'auto',
+      'baseline',
+      'bottom',
+      'middle',
+      'sub',
+      'super',
+      'text-bottom',
+      'text-top',
+      'top',
+      '-webkit-baseline-middle'
+    ]
+  },
+  'visibility': {
+    values: ['collapse', 'hidden', 'visible']
+  },
+  '-webkit-animation': {
+    values: [
+      'alternate',
+      'alternate-reverse',
+      'backwards',
+      'both',
+      'forwards',
+      'infinite',
+      'none',
+      'normal',
+      'reverse'
+    ]
+  },
+  '-webkit-animation-delay': {},
+  '-webkit-animation-direction': {
+    values: ['alternate', 'alternate-reverse', 'normal', 'reverse']
+  },
+  '-webkit-animation-duration': {},
+  '-webkit-animation-fill-mode': {
+    values: ['backwards', 'both', 'forwards', 'none']
+  },
+  '-webkit-animation-iteration-count': {
+    values: ['infinite']
+  },
+  '-webkit-animation-name': {
+    values: ['none']
+  },
+  '-webkit-animation-play-state': {
+    values: ['paused', 'running']
+  },
+  '-webkit-animation-timing-function': {},
+  '-webkit-appearance': {
+    values: [
+      'button',
+      'button-bevel',
+      'caps-lock-indicator',
+      'caret',
+      'checkbox',
+      'default-button',
+      'listbox',
+      'listitem',
+      'media-fullscreen-button',
+      'media-mute-button',
+      'media-play-button',
+      'media-seek-back-button',
+      'media-seek-forward-button',
+      'media-slider',
+      'media-sliderthumb',
+      'menulist',
+      'menulist-button',
+      'menulist-text',
+      'menulist-textfield',
+      'none',
+      'push-button',
+      'radio',
+      'scrollbarbutton-down',
+      'scrollbarbutton-left',
+      'scrollbarbutton-right',
+      'scrollbarbutton-up',
+      'scrollbargripper-horizontal',
+      'scrollbargripper-vertical',
+      'scrollbarthumb-horizontal',
+      'scrollbarthumb-vertical',
+      'scrollbartrack-horizontal',
+      'scrollbartrack-vertical',
+      'searchfield',
+      'searchfield-cancel-button',
+      'searchfield-decoration',
+      'searchfield-results-button',
+      'searchfield-results-decoration',
+      'slider-horizontal',
+      'sliderthumb-horizontal',
+      'sliderthumb-vertical',
+      'slider-vertical',
+      'square-button',
+      'textarea',
+      'textfield'
+    ]
+  },
+  '-webkit-backdrop-filter': {
+    values: [
+      'none',
+      'blur()',
+      'brightness()',
+      'contrast()',
+      'drop-shadow()',
+      'grayscale()',
+      'hue-rotate()',
+      'invert()',
+      'opacity()',
+      'saturate()',
+      'sepia()',
+      'url()'
+    ]
+  },
+  '-webkit-backface-visibility': {
+    values: ['hidden', 'visible']
+  },
+  '-webkit-background-clip': {},
+  '-webkit-background-composite': {
+    values: ['border', 'padding']
+  },
+  '-webkit-background-origin': {},
+  '-webkit-border-image': {
+    values: [
+      'auto',
+      'fill',
+      'none',
+      'repeat',
+      'round',
+      'space',
+      'stretch',
+      'url()'
+    ]
+  },
+  '-webkit-box-align': {
+    values: ['baseline', 'center', 'end', 'start', 'stretch']
+  },
+  '-webkit-box-direction': {
+    values: ['normal', 'reverse']
+  },
+  '-webkit-box-flex': {},
+  '-webkit-box-flex-group': {},
+  '-webkit-box-ordinal-group': {},
+  '-webkit-box-orient': {
+    values: ['block-axis', 'horizontal', 'inline-axis', 'vertical']
+  },
+  '-webkit-box-pack': {
+    values: ['center', 'end', 'justify', 'start']
+  },
+  '-webkit-box-reflect': {
+    values: ['above', 'below', 'left', 'right']
+  },
+  '-webkit-box-sizing': {
+    values: ['border-box', 'content-box']
+  },
+  '-webkit-break-after': {
+    values: [
+      'always',
+      'auto',
+      'avoid',
+      'avoid-column',
+      'avoid-page',
+      'avoid-region',
+      'column',
+      'left',
+      'page',
+      'region',
+      'right'
+    ]
+  },
+  '-webkit-break-before': {
+    values: [
+      'always',
+      'auto',
+      'avoid',
+      'avoid-column',
+      'avoid-page',
+      'avoid-region',
+      'column',
+      'left',
+      'page',
+      'region',
+      'right'
+    ]
+  },
+  '-webkit-break-inside': {
+    values: ['auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region']
+  },
+  '-webkit-column-break-after': {
+    values: [
+      'always',
+      'auto',
+      'avoid',
+      'avoid-column',
+      'avoid-page',
+      'avoid-region',
+      'column',
+      'left',
+      'page',
+      'region',
+      'right'
+    ]
+  },
+  '-webkit-column-break-before': {
+    values: [
+      'always',
+      'auto',
+      'avoid',
+      'avoid-column',
+      'avoid-page',
+      'avoid-region',
+      'column',
+      'left',
+      'page',
+      'region',
+      'right'
+    ]
+  },
+  '-webkit-column-break-inside': {
+    values: ['auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region']
+  },
+  '-webkit-column-count': {
+    values: ['auto']
+  },
+  '-webkit-column-gap': {
+    values: ['normal']
+  },
+  '-webkit-column-rule': {},
+  '-webkit-column-rule-color': {},
+  '-webkit-column-rule-style': {},
+  '-webkit-column-rule-width': {},
+  '-webkit-columns': {
+    values: ['auto']
+  },
+  '-webkit-column-span': {
+    values: ['all', 'none']
+  },
+  '-webkit-column-width': {
+    values: ['auto']
+  },
+  '-webkit-filter': {
+    values: [
+      'none',
+      'blur()',
+      'brightness()',
+      'contrast()',
+      'drop-shadow()',
+      'grayscale()',
+      'hue-rotate()',
+      'invert()',
+      'opacity()',
+      'saturate()',
+      'sepia()',
+      'url()'
+    ]
+  },
+  '-webkit-flow-from': {
+    values: ['none']
+  },
+  '-webkit-flow-into': {
+    values: ['none']
+  },
+  '-webkit-font-feature-settings': {
+    values: [
+      '"c2cs"',
+      '"dlig"',
+      '"kern"',
+      '"liga"',
+      '"lnum"',
+      '"onum"',
+      '"smcp"',
+      '"swsh"',
+      '"tnum"',
+      'normal',
+      'off',
+      'on'
+    ]
+  },
+  '-webkit-hyphens': {
+    values: ['auto', 'manual', 'none']
+  },
+  '-webkit-line-break': {
+    values: ['after-white-space', 'normal']
+  },
+  '-webkit-margin-bottom-collapse': {
+    values: ['collapse', 'discard', 'separate']
+  },
+  '-webkit-margin-collapse': {
+    values: ['collapse', 'discard', 'separate']
+  },
+  '-webkit-margin-start': {
+    values: ['auto']
+  },
+  '-webkit-margin-top-collapse': {
+    values: ['collapse', 'discard', 'separate']
+  },
+  '-webkit-mask-clip': {},
+  '-webkit-mask-image': {
+    values: ['none', 'url()']
+  },
+  '-webkit-mask-origin': {},
+  '-webkit-mask-repeat': {},
+  '-webkit-mask-size': {
+    values: ['auto', 'contain', 'cover']
+  },
+  '-webkit-nbsp-mode': {
+    values: ['normal', 'space']
+  },
+  '-webkit-overflow-scrolling': {
+    values: ['auto', 'touch']
+  },
+  '-webkit-padding-start': {},
+  '-webkit-perspective': {
+    values: ['none']
+  },
+  '-webkit-perspective-origin': {},
+  '-webkit-region-fragment': {
+    values: ['auto', 'break']
+  },
+  '-webkit-tap-highlight-color': {},
+  '-webkit-text-fill-color': {},
+  '-webkit-text-size-adjust': {
+    values: ['auto', 'none']
+  },
+  '-webkit-text-stroke': {},
+  '-webkit-text-stroke-color': {},
+  '-webkit-text-stroke-width': {},
+  '-webkit-touch-callout': {
+    values: ['none']
+  },
+  '-webkit-transform': {
+    values: [
+      'matrix()',
+      'matrix3d()',
+      'none',
+      'perspective()',
+      'rotate()',
+      'rotate3d()',
+      "rotateX('angle')",
+      "rotateY('angle')",
+      "rotateZ('angle')",
+      'scale()',
+      'scale3d()',
+      'scaleX()',
+      'scaleY()',
+      'scaleZ()',
+      'skew()',
+      'skewX()',
+      'skewY()',
+      'translate()',
+      'translate3d()',
+      'translateX()',
+      'translateY()',
+      'translateZ()'
+    ]
+  },
+  '-webkit-transform-origin': {},
+  '-webkit-transform-origin-x': {},
+  '-webkit-transform-origin-y': {},
+  '-webkit-transform-origin-z': {},
+  '-webkit-transform-style': {
+    values: ['flat']
+  },
+  '-webkit-transition': {
+    values: ['all', 'none']
+  },
+  '-webkit-transition-delay': {},
+  '-webkit-transition-duration': {},
+  '-webkit-transition-property': {
+    values: ['all', 'none']
+  },
+  '-webkit-transition-timing-function': {},
+  '-webkit-user-drag': {
+    values: ['auto', 'element', 'none']
+  },
+  '-webkit-user-modify': {
+    values: ['read-only', 'read-write', 'read-write-plaintext-only']
+  },
+  '-webkit-user-select': {
+    values: ['auto', 'none', 'text']
+  },
+  'widows': {},
+  'width': {
+    values: ['auto', 'fit-content', 'max-content', 'min-content']
+  },
+  'will-change': {
+    values: ['auto', 'contents', 'scroll-position']
+  },
+  'word-break': {
+    values: ['break-all', 'keep-all', 'normal']
+  },
+  'word-spacing': {
+    values: ['normal']
+  },
+  'word-wrap': {
+    values: ['break-word', 'normal']
+  },
+  'writing-mode': {
+    values: [
+      'horizontal-tb',
+      'sideways-lr',
+      'sideways-rl',
+      'vertical-lr',
+      'vertical-rl'
+    ]
+  },
+  'z-index': {
+    values: ['auto']
+  },
+  'zoom': {
+    values: ['normal']
+  },
+  '-ms-ime-align': {
+    values: ['auto', 'after']
+  },
+  '-moz-binding': {},
+  '-moz-context-properties': {},
+  '-moz-float-edge': {
+    values: ['border-box', 'content-box', 'margin-box', 'padding-box']
+  },
+  '-moz-force-broken-image-icon': {
+    values: ['0', '1']
+  },
+  '-moz-image-region': {},
+  '-moz-orient': {
+    values: ['inline', 'block', 'horizontal', 'vertical']
+  },
+  '-moz-outline-radius': {},
+  '-moz-outline-radius-bottomleft': {},
+  '-moz-outline-radius-bottomright': {},
+  '-moz-outline-radius-topleft': {},
+  '-moz-outline-radius-topright': {},
+  '-moz-stack-sizing': {
+    values: ['ignore', 'stretch-to-fit']
+  },
+  '-moz-text-blink': {
+    values: ['none', 'blink']
+  },
+  '-moz-user-input': {
+    values: ['auto', 'none', 'enabled', 'disabled']
+  },
+  '-moz-user-modify': {
+    values: ['read-only', 'read-write', 'write-only']
+  },
+  '-moz-window-dragging': {
+    values: ['drag', 'no-drag']
+  },
+  '-moz-window-shadow': {
+    values: ['default', 'menu', 'tooltip', 'sheet', 'none']
+  },
+  '-webkit-border-before': {},
+  '-webkit-border-before-color': {},
+  '-webkit-border-before-style': {},
+  '-webkit-border-before-width': {},
+  '-webkit-line-clamp': {},
+  '-webkit-mask': {},
+  '-webkit-mask-attachment': {},
+  '-webkit-mask-composite': {},
+  '-webkit-mask-position': {},
+  '-webkit-mask-position-x': {},
+  '-webkit-mask-position-y': {},
+  '-webkit-mask-repeat-x': {
+    values: ['repeat', 'no-repeat', 'space', 'round']
+  },
+  '-webkit-mask-repeat-y': {
+    values: ['repeat', 'no-repeat', 'space', 'round']
+  },
+  'accent-color': {},
+  'align-tracks': {},
+  'animation-composition': {},
+  'animation-timeline': {},
+  'appearance': {},
+  'aspect-ratio': {},
+  'azimuth': {},
+  'backdrop-filter': {},
+  'border-block': {},
+  'border-block-color': {},
+  'border-block-style': {},
+  'border-block-width': {},
+  'border-end-end-radius': {},
+  'border-end-start-radius': {},
+  'border-inline': {},
+  'border-inline-color': {},
+  'border-inline-style': {},
+  'border-inline-width': {},
+  'border-start-end-radius': {},
+  'border-start-start-radius': {},
+  'box-align': {
+    values: ['start', 'center', 'end', 'baseline', 'stretch']
+  },
+  'box-direction': {
+    values: ['normal', 'reverse', 'inherit']
+  },
+  'box-flex': {},
+  'box-flex-group': {},
+  'box-lines': {
+    values: ['single', 'multiple']
+  },
+  'box-ordinal-group': {},
+  'box-orient': {
+    values: ['horizontal', 'vertical', 'inline-axis', 'block-axis', 'inherit']
+  },
+  'box-pack': {
+    values: ['start', 'center', 'end', 'justify']
+  },
+  'caret': {},
+  'caret-shape': {
+    values: ['auto', 'bar', 'block', 'underscore']
+  },
+  'print-color-adjust': {
+    values: ['economy', 'exact']
+  },
+  'color-scheme': {},
+  'contain-intrinsic-size': {},
+  'contain-intrinsic-block-size': {},
+  'contain-intrinsic-height': {},
+  'contain-intrinsic-inline-size': {},
+  'contain-intrinsic-width': {},
+  'content-visibility': {
+    values: ['visible', 'auto', 'hidden']
+  },
+  'counter-set': {},
+  'font-optical-sizing': {
+    values: ['auto', 'none']
+  },
+  'font-variation-settings': {},
+  'font-smooth': {},
+  'forced-color-adjust': {
+    values: ['auto', 'none']
+  },
+  'gap': {},
+  'hanging-punctuation': {},
+  'hyphenate-character': {},
+  'image-resolution': {},
+  'initial-letter': {},
+  'initial-letter-align': {},
+  'input-security': {
+    values: ['auto', 'none']
+  },
+  'inset': {},
+  'inset-block': {},
+  'inset-block-end': {},
+  'inset-block-start': {},
+  'inset-inline': {},
+  'inset-inline-end': {},
+  'inset-inline-start': {},
+  'justify-tracks': {},
+  'line-clamp': {},
+  'line-height-step': {},
+  'margin-block': {},
+  'margin-inline': {},
+  'margin-trim': {
+    values: ['none', 'in-flow', 'all']
+  },
+  'mask': {},
+  'mask-border': {},
+  'mask-border-mode': {
+    values: ['luminance', 'alpha']
+  },
+  'mask-border-outset': {},
+  'mask-border-repeat': {},
+  'mask-border-slice': {},
+  'mask-border-source': {},
+  'mask-border-width': {},
+  'mask-clip': {},
+  'mask-composite': {},
+  'masonry-auto-flow': {},
+  'math-depth': {},
+  'math-shift': {
+    values: ['normal', 'compact']
+  },
+  'math-style': {
+    values: ['normal', 'compact']
+  },
+  'max-lines': {},
+  'offset': {},
+  'offset-anchor': {},
+  'offset-distance': {},
+  'offset-path': {},
+  'offset-position': {},
+  'offset-rotate': {},
+  'overflow-anchor': {
+    values: ['auto', 'none']
+  },
+  'overflow-block': {
+    values: ['visible', 'hidden', 'clip', 'scroll', 'auto']
+  },
+  'overflow-clip-box': {
+    values: ['padding-box', 'content-box']
+  },
+  'overflow-clip-margin': {},
+  'overflow-inline': {
+    values: ['visible', 'hidden', 'clip', 'scroll', 'auto']
+  },
+  'overscroll-behavior': {},
+  'overscroll-behavior-block': {
+    values: ['contain', 'none', 'auto']
+  },
+  'overscroll-behavior-inline': {
+    values: ['contain', 'none', 'auto']
+  },
+  'overscroll-behavior-x': {
+    values: ['contain', 'none', 'auto']
+  },
+  'overscroll-behavior-y': {
+    values: ['contain', 'none', 'auto']
+  },
+  'padding-block': {},
+  'padding-inline': {},
+  'place-content': {},
+  'place-items': {},
+  'place-self': {},
+  'rotate': {},
+  'row-gap': {},
+  'ruby-merge': {
+    values: ['separate', 'collapse', 'auto']
+  },
+  'scale': {},
+  'scrollbar-color': {},
+  'scrollbar-gutter': {},
+  'scrollbar-width': {
+    values: ['auto', 'thin', 'none']
+  },
+  'scroll-margin': {},
+  'scroll-margin-block': {},
+  'scroll-margin-block-start': {},
+  'scroll-margin-block-end': {},
+  'scroll-margin-bottom': {},
+  'scroll-margin-inline': {},
+  'scroll-margin-inline-start': {},
+  'scroll-margin-inline-end': {},
+  'scroll-margin-left': {},
+  'scroll-margin-right': {},
+  'scroll-margin-top': {},
+  'scroll-padding': {},
+  'scroll-padding-block': {},
+  'scroll-padding-block-start': {},
+  'scroll-padding-block-end': {},
+  'scroll-padding-bottom': {},
+  'scroll-padding-inline': {},
+  'scroll-padding-inline-start': {},
+  'scroll-padding-inline-end': {},
+  'scroll-padding-left': {},
+  'scroll-padding-right': {},
+  'scroll-padding-top': {},
+  'scroll-snap-align': {},
+  'scroll-snap-stop': {
+    values: ['normal', 'always']
+  },
+  'scroll-snap-type-x': {
+    values: ['none', 'mandatory', 'proximity']
+  },
+  'scroll-snap-type-y': {
+    values: ['none', 'mandatory', 'proximity']
+  },
+  'scroll-timeline': {},
+  'scroll-timeline-axis': {
+    values: ['block', 'inline', 'vertical', 'horizontal']
+  },
+  'scroll-timeline-name': {},
+  'text-combine-upright': {},
+  'text-decoration-skip': {},
+  'text-decoration-skip-ink': {
+    values: ['auto', 'all', 'none']
+  },
+  'text-decoration-thickness': {},
+  'text-emphasis': {},
+  'text-emphasis-color': {},
+  'text-emphasis-position': {},
+  'text-emphasis-style': {},
+  'text-size-adjust': {},
+  'text-underline-offset': {},
+  'transform-box': {
+    values: ['content-box', 'border-box', 'fill-box', 'stroke-box', 'view-box']
+  },
+  'translate': {},
+  'white-space': {
+    values: ['normal', 'pre', 'nowrap', 'pre-wrap', 'pre-line', 'break-spaces']
+  },
+  'speak-as': {},
+  'ascent-override': {},
+  'descent-override': {},
+  'font-display': {},
+  'line-gap-override': {},
+  'size-adjust': {},
+  'bleed': {},
+  'marks': {},
+  'syntax': {},
+  'inherits': {
+    values: ['true', 'false']
+  },
+  'initial-value': {},
+  'max-zoom': {},
+  'min-zoom': {},
+  'orientation': {
+    values: ['auto', 'portrait', 'landscape']
+  },
+  'user-zoom': {
+    values: ['zoom', 'fixed']
+  },
+  'viewport-fit': {
+    values: ['auto', 'contain', 'cover']
+  }
+};
+
+const validate = (editor: any, monaco: any) => {
+  const model = editor.getModel();
+  const markers = [];
+  const lineLen = model.getLineCount();
+  for (let i = 1; i < lineLen + 1; i++) {
+    const range = {
+      startLineNumber: i,
+      startColumn: 1,
+      endLineNumber: i,
+      endColumn: model.getLineLength(i) + 1
+    };
+    const content: string = model.getValueInRange(range);
+    if (content !== '') {
+      // 检测是否有冒号
+      if (!content.includes(':')) {
+        markers.push({
+          message: '应为冒号',
+          severity: monaco.MarkerSeverity.Error,
+          startLineNumber: range.startLineNumber,
+          startColumn: range.endColumn,
+          endLineNumber: range.endLineNumber,
+          endColumn: range.endColumn + 1
+        });
+      }
+      // 检测是否有属性
+      else if (/^(.*):\s?;?$/.test(content)) {
+        markers.push({
+          message: '应为属性',
+          severity: monaco.MarkerSeverity.Error,
+          startLineNumber: range.startLineNumber,
+          startColumn: range.endColumn,
+          endLineNumber: range.endLineNumber,
+          endColumn: range.endColumn + 1
+        });
+      }
+      // 检测是否以分号结尾
+      else if (!content.endsWith(';')) {
+        markers.push({
+          message: '缺少分号',
+          severity: monaco.MarkerSeverity.Error,
+          startLineNumber: range.startLineNumber,
+          startColumn: range.endColumn,
+          endLineNumber: range.endLineNumber,
+          endColumn: range.endColumn + 1
+        });
+      }
+    }
+  }
+  monaco.editor.setModelMarkers(model, 'owner', markers);
+};
+
+const editorFactory = (
+  containerElement: HTMLElement,
+  monaco: any,
+  options: any
+) => {
+  if (!monaco.languages.getEncodedLanguageId('amisTheme')) {
+    // 注册语言
+    monaco.languages.register({id: 'amisTheme'});
+    // 设置高亮
+    monaco.languages.setMonarchTokensProvider('amisTheme', conf);
+    // 设置提示
+    monaco.languages.registerCompletionItemProvider('amisTheme', {
+      provideCompletionItems: (model: any, position: any) => {
+        const {lineNumber, column} = position;
+        // 获取输入前的字符
+        const textBeforePointer = model.getValueInRange({
+          startLineNumber: lineNumber,
+          startColumn: 0,
+          endLineNumber: lineNumber,
+          endColumn: column
+        });
+        // 如果已经配置了key和value就不给建议了
+        if (/(.*):(.*);/.test(textBeforePointer)) {
+          return {suggestions: []};
+        }
+        const token = /(.*):/.exec(textBeforePointer) || [];
+        const valueTip = keywords[token[1]];
+        let suggestions;
+
+        // 判断是需要提示key还是value
+        if (!isEmpty(valueTip)) {
+          suggestions = [
+            ...valueTip.values.map((k: string) => ({
+              label: k,
+              kind: monaco.languages.CompletionItemKind.Enum,
+              insertText: k + ';'
+            }))
+          ];
+        } else {
+          suggestions = [
+            ...Object.keys(keywords).map(k => ({
+              label: k,
+              kind: monaco.languages.CompletionItemKind.Keyword,
+              insertText: k + ': '
+            }))
+          ];
+        }
+
+        return {
+          suggestions: suggestions
+        };
+      },
+      triggerCharacters: [' ']
+    });
+  }
+
+  const editor = monaco.editor.create(containerElement, {
+    ...options,
+    'language': 'amisTheme',
+    'autoIndent': true,
+    'formatOnType': true,
+    'formatOnPaste': true,
+    'selectOnLineNumbers': true,
+    'scrollBeyondLastLine': false,
+    'folding': true,
+    'minimap': {
+      enabled: false
+    },
+    'scrollbar': {
+      alwaysConsumeMouseWheel: false
+    },
+    'bracketPairColorization.enabled': true,
+    'automaticLayout': true,
+    'lineNumbers': 'off',
+    'glyphMargin': false,
+    'wordWrap': 'on',
+    'lineDecorationsWidth': 0,
+    'lineNumbersMinChars': 0
+  });
+
+  editor.onDidChangeModelContent(() => {
+    validate(editor, monaco);
+    options.onChange && options.onChange(editor.getValue());
+  });
+
+  return editor;
+};
+
+interface ISingleThemeCssCode extends FormControlProps {
+  selector: {
+    label: string;
+    selector: string;
+    isRoot?: boolean;
+  };
+}
+
+const SingleThemeCssCode = (props: ISingleThemeCssCode) => {
+  const {data, onChange, selector: _selector} = props;
+  const {label, selector, isRoot} = _selector;
+  const {wrapperCustomStyle} = data;
+  const ref = useRef<HTMLDivElement>(null);
+  const [showPanel, setShowPanel] = useState(false);
+  const [value, setValue] = useState('');
+  const finalSelector = isRoot ? 'root' : selector;
+
+  useEffect(() => {
+    setValue(getCssAndSetValue(wrapperCustomStyle?.[finalSelector], '', 0));
+  }, []);
+
+  // 前面加上空格
+  const getSpaceByDep = (dep: number) => {
+    let spaces = '';
+    for (let i = 0; i < dep; i++) {
+      spaces += '  ';
+    }
+    return spaces;
+  };
+
+  const getCssAndSetValue = (data: any, str: string, dep: number) => {
+    if (isEmpty(data)) {
+      return '';
+    }
+    for (let key in data) {
+      if (data.hasOwnProperty(key)) {
+        if (isObject(data[key])) {
+          str += getSpaceByDep(dep) + `${key} {\n`;
+          str += getCssAndSetValue(data[key], '', dep + 1);
+          str += getSpaceByDep(dep) + `}\n`;
+          if (dep === 0) {
+            str += '\n';
+          }
+        } else {
+          str += getSpaceByDep(dep) + `${key}: ${data[key]};\n`;
+        }
+      }
+    }
+    return str;
+  };
+
+  // 递归获取自定义样式
+  const getStyle = (style: any): PlainObject => {
+    const newStyle: PlainObject = {};
+    if (isEmpty(style)) {
+      return newStyle;
+    }
+    style.nodes.forEach((node: any) => {
+      const {prop, value, selector} = node;
+      if (value) {
+        newStyle[prop] = value;
+        if (node.important) {
+          newStyle[prop] += ' !important';
+        }
+      }
+      if (node.nodes) {
+        newStyle[selector] = getStyle(node);
+      }
+    });
+    return newStyle;
+  };
+
+  const editorChange = debounce((value: string) => {
+    try {
+      const style = cssParse(value);
+      const newStyle: PlainObject = getStyle(style);
+      onChange && onChange(newStyle);
+    } catch (error) {}
+  });
+
+  const handleChange = (value: string) => {
+    editorChange(value);
+    setValue(value);
+  };
+
+  const StyleEditor = (
+    <>
+      <div className="ae-SingleThemeCssCode-header">
+        <div className="ae-SingleThemeCssCode-title mtk14">
+          {selector + ' {'}
+        </div>
+      </div>
+      <div className="ae-SingleThemeCssCode-content">
+        <Editor
+          className="ae-SingleThemeCssCode-custom-editor"
+          value={value}
+          editorFactory={editorFactory}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="ae-SingleThemeCssCode-footer mtk14">{'}'}</div>
+    </>
+  );
+
+  return (
+    <>
+      <div className="ae-SingleThemeCssCode-label">{label}</div>
+      <div ref={ref} className="ae-SingleThemeCssCode">
+        <a
+          className="ae-SingleThemeCssCode-button ae-SingleThemeCssCode-icon"
+          onClick={() => setShowPanel(true)}
+        >
+          <Icon icon="expand-alt" className="icon" />
+        </a>
+        {StyleEditor}
+      </div>
+      <Overlay
+        container={document.body}
+        placement="left"
+        target={ref.current as any}
+        show={showPanel}
+        rootClose={false}
+      >
+        <PopOver overlay onHide={() => setShowPanel(false)}>
+          <div className="ae-SingleThemeCssCode-panel">
+            <div className="ae-SingleThemeCssCode-panel-title">编辑样式</div>
+            <div className="ae-SingleThemeCssCode-panel-close">
+              <a
+                onClick={() => setShowPanel(false)}
+                className="ae-SingleThemeCssCode-icon"
+              >
+                <Icon icon="close" className="icon" />
+              </a>
+            </div>
+            <div className="ae-SingleThemeCssCode-panel-content">
+              {StyleEditor}
+            </div>
+          </div>
+        </PopOver>
+      </Overlay>
+    </>
+  );
+};
+
+@FormItem({
+  type: 'ae-single-theme-cssCode',
+  strictMode: false
+})
+export class SingleThemeCssCodeRenderer extends React.Component<ISingleThemeCssCode> {
+  render() {
+    return <SingleThemeCssCode {...this.props} />;
+  }
+}
diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx
index 3af88f4cd..60965cf05 100644
--- a/packages/amis-editor/src/tpl/common.tsx
+++ b/packages/amis-editor/src/tpl/common.tsx
@@ -1836,3 +1836,18 @@ setSchemaTpl(
     };
   }
 );
+
+setSchemaTpl('closable', {
+  type: 'ae-StatusControl',
+  label: tipedLabel('可关闭选项卡', '选项卡内优先级更高'),
+  mode: 'normal',
+  name: 'closable',
+  expressionName: 'closableOn'
+});
+
+setSchemaTpl('inputForbid', {
+  type: 'switch',
+  label: '禁止输入',
+  name: 'inputForbid',
+  inputClassName: 'is-inline'
+});
diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx
index b99e6a918..d85c4ad96 100644
--- a/packages/amis-editor/src/tpl/style.tsx
+++ b/packages/amis-editor/src/tpl/style.tsx
@@ -900,6 +900,38 @@ setSchemaTpl('theme:cssCode', () => {
   };
 });
 
+// single css类名
+setSchemaTpl(
+  'theme:singleCssCode',
+  (options: {
+    selectors: {
+      label: string;
+      selector: string;
+      isRoot?: boolean;
+    }[];
+  }) => {
+    const {selectors} = options;
+    return {
+      title: '自定义样式',
+      name: 'wrapperCustomStyle',
+      body: selectors?.map(
+        (item: {label: string; selector: string; isRoot?: boolean}) => {
+          const {isRoot, selector} = item;
+          const _selector = isRoot ? 'root' : selector;
+          const name = `wrapperCustomStyle[${_selector}]`;
+          return {
+            mode: 'default',
+            name,
+            type: 'ae-single-theme-cssCode',
+            label: false,
+            selector: item
+          };
+        }
+      )
+    };
+  }
+);
+
 // form label
 setSchemaTpl('theme:form-label', () => {
   return {
@@ -1175,6 +1207,14 @@ setSchemaTpl(
           {
             label: '点击',
             value: 'active'
+          },
+          {
+            label: '选中',
+            value: 'focused'
+          },
+          {
+            label: '禁用',
+            value: 'disabled'
           }
         ].filter(item => state.includes(item.value))
       },
@@ -1183,7 +1223,9 @@ setSchemaTpl(
         'default'
       ),
       ...styleStateFunc(`\${__editorState${classId} == 'hover'}`, 'hover'),
-      ...styleStateFunc(`\${__editorState${classId} == 'active'}`, 'active')
+      ...styleStateFunc(`\${__editorState${classId} == 'active'}`, 'active'),
+      ...styleStateFunc(`\${__editorState${classId} == 'focused'}`, 'focused'),
+      ...styleStateFunc(`\${__editorState${classId} == 'disabled'}`, 'disabled')
     ].filter(Boolean);
 
     return {
@@ -1255,6 +1297,7 @@ setSchemaTpl(
       ...extra,
       {
         title: '自定义样式',
+        key: 'theme-css-code',
         collapsed: curCollapsed,
         body: [
           {
diff --git a/packages/amis-editor/src/util.ts b/packages/amis-editor/src/util.ts
index 83a25d5e4..f57ca4f59 100644
--- a/packages/amis-editor/src/util.ts
+++ b/packages/amis-editor/src/util.ts
@@ -373,6 +373,29 @@ export const TREE_BASE_EVENTS = (schema: any) => {
         ];
       }
     },
+    {
+      eventName: 'itemClick',
+      eventLabel: '节点点击',
+      description: '点击节点触发',
+      dataSchema: (manager: EditorManager) => {
+        const {value} = resolveOptionEventDataSchame(manager);
+
+        return [
+          {
+            type: 'object',
+            properties: {
+              data: {
+                type: 'object',
+                title: '数据',
+                properties: {
+                  value
+                }
+              }
+            }
+          }
+        ];
+      }
+    },
     ...OPTION_EDIT_EVENTS,
     {
       eventName: 'deferLoadFinished',
diff --git a/packages/amis-theme-editor-helper/package.json b/packages/amis-theme-editor-helper/package.json
index 2ea655b57..c04050a05 100644
--- a/packages/amis-theme-editor-helper/package.json
+++ b/packages/amis-theme-editor-helper/package.json
@@ -7,7 +7,7 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "test": "echo \"Warnings: no test specified\"",
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
     "clean-dist": "rimraf lib/** esm/**",
     "i18n:update": "npx i18n update --config=./i18nConfig.js",
     "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US",
@@ -34,6 +34,7 @@
     "amis-ui": "*"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "@rollup/plugin-url": "^7.0.0",
     "@svgr/rollup": "^6.4.0",
     "@types/async": "^2.0.45",
diff --git a/packages/amis-ui/package.json b/packages/amis-ui/package.json
index 310d5df82..88678fe8a 100644
--- a/packages/amis-ui/package.json
+++ b/packages/amis-ui/package.json
@@ -6,8 +6,8 @@
   "version": "6.9.0",
   "description": "",
   "scripts": {
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
-    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
+    "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "dev": "rollup -c -w",
     "test": "jest",
     "gen-doc": "ts-node ./scripts/genDoc.ts",
@@ -77,6 +77,7 @@
     "uncontrollable": "7.2.1"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^14.1.0",
diff --git a/packages/amis-ui/scss/components/_collapse-group.scss b/packages/amis-ui/scss/components/_collapse-group.scss
index cde6be9ec..84857db24 100644
--- a/packages/amis-ui/scss/components/_collapse-group.scss
+++ b/packages/amis-ui/scss/components/_collapse-group.scss
@@ -60,6 +60,17 @@
     }
   }
 
+  &.icon-position-right {
+    .#{$ns}Collapse-header {
+      &.noTitle {
+        text-align: right;
+        .#{$ns}Collapse-arrow-wrap {
+          float: none;
+        }
+      }
+    }
+  }
+
   &.is-mobile {
     &.icon-position-right {
       .#{$ns}Collapse-header {
diff --git a/packages/amis-ui/scss/components/_collapse.scss b/packages/amis-ui/scss/components/_collapse.scss
index 3bb2464ff..b04ec3772 100644
--- a/packages/amis-ui/scss/components/_collapse.scss
+++ b/packages/amis-ui/scss/components/_collapse.scss
@@ -45,6 +45,15 @@
       color: var(--collapse-default-header-hover-color);
     }
 
+    &.noTitle {
+      padding: 0;
+      background-color: unset;
+      &:hover {
+        background: unset;
+        color: inherit;
+      }
+    }
+
     &.is-mobile {
       background: none;
       border-radius: 0 !important;
diff --git a/packages/amis-ui/scss/components/_debug.scss b/packages/amis-ui/scss/components/_debug.scss
index 14dab782a..f51e1f83f 100644
--- a/packages/amis-ui/scss/components/_debug.scss
+++ b/packages/amis-ui/scss/components/_debug.scss
@@ -19,6 +19,20 @@
     color: #009fff;
   }
 
+  &-inspectIcon {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 3px;
+
+    cursor: pointer;
+    margin-right: 8px;
+
+    &.is-active {
+      fill: #009fff;
+    }
+  }
+
   &-header {
     padding: var(--Drawer-header-padding);
     background: var(--Drawer-header-bg);
@@ -30,27 +44,31 @@
     pointer-events: none;
     position: absolute;
     outline: 1px dashed #1c76c4;
+    z-index: 2000;
   }
 
   &-activeBox {
     pointer-events: none;
     position: absolute;
-    outline: 1px #1c76c4;
+    outline: 1px #1c76c4 solid;
+    z-index: 2000;
   }
 
   &-tab {
-    overflow: hidden;
     border-bottom: 1px solid #3d3d3d;
+    height: 30px;
+    flex-shrink: 0;
   }
 
   &-tab > button {
     color: inherit;
     background: inherit;
-    float: left;
+    display: inline-block;
     border: none;
     outline: none;
     cursor: pointer;
-    padding: var(--gap-sm) var(--gap-md);
+    line-height: 29px;
+    padding: 0 var(--gap-md);
     transition: 0.3s;
     border-bottom: 1px solid transparent;
   }
@@ -92,6 +110,7 @@
     pointer-events: all;
     display: none;
     height: 100%;
+    flex-direction: column;
   }
 
   &-resize {
@@ -110,7 +129,7 @@
     position: absolute;
     font-size: 18px;
     right: 40px;
-    top: var(--gap-sm);
+    top: 2px;
     cursor: pointer;
   }
 
@@ -118,7 +137,7 @@
     position: absolute;
     font-size: 18px;
     right: var(--gap-sm);
-    top: var(--gap-sm);
+    top: 2px;
     cursor: pointer;
   }
 
@@ -132,7 +151,7 @@
       display: none;
     }
     .AMISDebug-content {
-      display: block;
+      display: flex;
     }
   }
 
@@ -174,6 +193,8 @@
   &-inspect {
     height: 100%;
     overflow: auto;
+    flex: 1;
+    min-height: 0;
 
     // 火狐浏览器
     scrollbar-width: thin;
@@ -204,4 +225,35 @@
   &-logLine {
     overflow-x: hidden;
   }
+
+  &-footer {
+    height: 30px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #2c2c2c;
+
+    > svg {
+      width: 11px;
+      flex-shrink: 0;
+    }
+
+    > input {
+      flex-grow: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
+      color: #cccccc;
+      padding: 0;
+      outline: none;
+      height: 100%;
+    }
+  }
+
+  &-value {
+    color: rgb(253, 151, 31);
+    padding: 0;
+    margin: 0;
+  }
 }
diff --git a/packages/amis-ui/scss/components/_page.scss b/packages/amis-ui/scss/components/_page.scss
index bfb3776e4..f8db8ca29 100644
--- a/packages/amis-ui/scss/components/_page.scss
+++ b/packages/amis-ui/scss/components/_page.scss
@@ -144,6 +144,21 @@
     }
   }
 
+  // 右侧侧边栏时，调整侧边栏相关的样式
+  .#{$ns}Page--rightAside {
+    flex-direction: row-reverse;
+
+    > .#{$ns}Page-aside {
+      border-left: var(--borderWidth) solid var(--borderColor);
+      border-right: unset;
+
+      > .#{$ns}Page-asideResizor {
+        left: px2rem(-6px);
+        right: unset;
+      }
+    }
+  }
+
   .#{$ns}Page--asideSticky {
     > .#{$ns}Page-aside {
       position: sticky;
diff --git a/packages/amis-ui/scss/components/_popoverable.scss b/packages/amis-ui/scss/components/_popoverable.scss
index 2ada69226..d7361c794 100644
--- a/packages/amis-ui/scss/components/_popoverable.scss
+++ b/packages/amis-ui/scss/components/_popoverable.scss
@@ -15,6 +15,26 @@
 .#{$ns}Field--popOverAble {
   outline: none;
   position: relative;
+
+  &--flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$ns}Field-popOverWrap {
+    &-ellipsis {
+      width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: bottom;
+      display: inline-block;
+    }
+
+    &-noWrap {
+      white-space: nowrap;
+    }
+  }
 }
 
 .#{$ns}PopOverAble-popover {
diff --git a/packages/amis-ui/scss/components/_steps.scss b/packages/amis-ui/scss/components/_steps.scss
index 555c4ca6e..de4a77d90 100644
--- a/packages/amis-ui/scss/components/_steps.scss
+++ b/packages/amis-ui/scss/components/_steps.scss
@@ -12,6 +12,11 @@
     height: auto;
     line-height: px2rem(22px);
     &-container {
+      &.#{$ns}StepsItem-vertical {
+        display: flex;
+        flex-direction: column;
+      }
+
       position: relative;
       &Icon {
         vertical-align: top;
@@ -36,7 +41,7 @@
         }
       }
       &Wrapper {
-        display: inline-block;
+        display: inline-flex;
         position: relative;
         .#{$ns}StepsItem-body {
           .#{$ns}StepsItem-title {
diff --git a/packages/amis-ui/scss/components/_tabs.scss b/packages/amis-ui/scss/components/_tabs.scss
index 882f35207..dbf485079 100644
--- a/packages/amis-ui/scss/components/_tabs.scss
+++ b/packages/amis-ui/scss/components/_tabs.scss
@@ -1152,7 +1152,7 @@
             &:not(.is-disabled):hover {
               > a {
                 font-size: var(--Tabs--simple-hover-fontSize);
-                color: var(--Tabs--simple-hover-color) !important;
+                color: var(--Tabs--simple-hover-color);
                 font-weight: var(--Tabs--simple-hover-fontWeight);
                 line-height: var(--Tabs--simple-hover-lineHeight);
               }
@@ -1160,7 +1160,7 @@
             &.is-disabled {
               > a {
                 font-size: var(--Tabs--simple-disabled-fontSize);
-                color: var(--Tabs--simple-disabled-color) !important;
+                color: var(--Tabs--simple-disabled-color);
                 font-weight: var(--Tabs--simple-disabled-fontWeight);
                 line-height: var(--Tabs--simple-disabled-lineHeight);
               }
@@ -1168,7 +1168,7 @@
             &.is-active {
               > a {
                 font-size: var(--Tabs--simple-active-fontSize);
-                color: var(--Tabs--simple-active-color) !important;
+                color: var(--Tabs--simple-active-color);
                 font-weight: var(--Tabs--simple-active-fontWeight);
                 line-height: var(--Tabs--simple-active-lineHeight);
               }
@@ -1317,7 +1317,7 @@
               var(--Tabs--strong-hover-left-border-width);
             > a {
               font-size: var(--Tabs--strong-hover-fontSize);
-              color: var(--Tabs--strong-hover-color) !important;
+              color: var(--Tabs--strong-hover-color);
               font-weight: var(--Tabs--strong-hover-fontWeight);
               line-height: var(--Tabs--strong-hover-lineHeight);
             }
@@ -1339,7 +1339,7 @@
               var(--Tabs--strong-disabled-left-border-width);
             > a {
               font-size: var(--Tabs--strong-disabled-fontSize);
-              color: var(--Tabs--strong-disabled-color) !important;
+              color: var(--Tabs--strong-disabled-color);
               font-weight: var(--Tabs--strong-disabled-fontWeight);
               line-height: var(--Tabs--strong-disabled-lineHeight);
             }
@@ -1360,7 +1360,7 @@
               var(--Tabs--strong-active-left-border-width);
             > a {
               font-size: var(--Tabs--strong-active-fontSize);
-              color: var(--Tabs--strong-active-color) !important;
+              color: var(--Tabs--strong-active-color);
               font-weight: var(--Tabs--strong-active-fontWeight);
               line-height: var(--Tabs--strong-active-lineHeight);
             }
diff --git a/packages/amis-ui/scss/components/form/_tree.scss b/packages/amis-ui/scss/components/form/_tree.scss
index 208404590..d6d666b9f 100644
--- a/packages/amis-ui/scss/components/form/_tree.scss
+++ b/packages/amis-ui/scss/components/form/_tree.scss
@@ -30,6 +30,14 @@
     max-height: none;
     overflow: visible;
   }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    margin-top: var(--gap-sm);
+    margin-bottom: var(--gap-md);
+    margin-left: px2rem(12px);
+  }
 }
 
 .#{$ns}Tree {
@@ -113,6 +121,11 @@
 
   &-rootItem {
     line-height: var(--Tree-itemHeight);
+
+    .#{$ns}Tree-rootIcon {
+      color: var(--inputTree-base-default-color);
+      align-items: center;
+    }
   }
 
   &-item > div:hover > .#{$ns}Tree-item-icons,
@@ -143,6 +156,8 @@
       align-items: center;
       overflow: hidden;
       height: px2rem(32px);
+      position: relative;
+      cursor: pointer;
     }
 
     &:hover {
@@ -194,7 +209,8 @@
   &-item-icons {
     visibility: hidden;
     transition: visibility var(--animation-duration) ease;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     vertical-align: top;
     height: var(--Tree-itemHeight);
     line-height: var(--Tree-itemHeight);
@@ -215,6 +231,12 @@
     }
   }
 
+  &-itemActions {
+    display: flex;
+    align-items: center;
+    margin-left: var(--Tree-icon-gap);
+  }
+
   &-itemInput {
     // padding-left: var(--Tree-itemArrowWidth);
     display: flex;
diff --git a/packages/amis-ui/src/components/Collapse.tsx b/packages/amis-ui/src/components/Collapse.tsx
index a682d58f6..5872bfe27 100644
--- a/packages/amis-ui/src/components/Collapse.tsx
+++ b/packages/amis-ui/src/components/Collapse.tsx
@@ -203,42 +203,40 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       : collapseHeader || header;
 
     let dom = [
-      finalHeader ? (
-        <HeadingComponent
-          key="header"
-          onClick={this.toggleCollapsed}
-          className={cx(
-            `Collapse-header`,
-            {'is-mobile': mobileUI},
-            headingClassName
-          )}
-        >
-          {showArrow && collapsable ? (
-            expandIcon ? (
-              React.cloneElement(expandIcon, {
-                ...expandIcon.props,
-                className: cx(
-                  'Collapse-icon-tranform',
-                  expandIcon.props?.className
-                )
-              })
-            ) : (
-              <span className={cx('Collapse-arrow-wrap')}>
-                <Icon
-                  icon="right-arrow-bold"
-                  className={cx('Collapse-arrow', 'icon')}
-                  classNameProp={cx('Collapse-arrow')}
-                  iconContent="Collapse-arrow"
-                />
-              </span>
-            )
+      <HeadingComponent
+        key="header"
+        onClick={this.toggleCollapsed}
+        className={cx(
+          `Collapse-header`,
+          {'is-mobile': mobileUI},
+          headingClassName,
+          {noTitle: !finalHeader}
+        )}
+      >
+        {showArrow && collapsable ? (
+          expandIcon ? (
+            React.cloneElement(expandIcon, {
+              ...expandIcon.props,
+              className: cx(
+                'Collapse-icon-tranform',
+                expandIcon.props?.className
+              )
+            })
           ) : (
-            ''
-          )}
-          {finalHeader}
-        </HeadingComponent>
-      ) : null,
-
+            <span className={cx('Collapse-arrow-wrap')}>
+              <Icon
+                icon="right-arrow-bold"
+                className={cx('Collapse-arrow', 'icon')}
+                classNameProp={cx('Collapse-arrow')}
+                iconContent="Collapse-arrow"
+              />
+            </span>
+          )
+        ) : (
+          ''
+        )}
+        {finalHeader}
+      </HeadingComponent>,
       <Transition
         key="body"
         mountOnEnter={mountOnEnter}
diff --git a/packages/amis-ui/src/components/ConfirmBox.tsx b/packages/amis-ui/src/components/ConfirmBox.tsx
index 7492eb88e..71622a87a 100644
--- a/packages/amis-ui/src/components/ConfirmBox.tsx
+++ b/packages/amis-ui/src/components/ConfirmBox.tsx
@@ -41,6 +41,8 @@ export interface ConfirmBoxProps extends LocaleProps, ThemeProps {
   bodyClassName?: string;
   footerClassName?: string;
   testIdBuilder?: TestIdBuilder;
+  onExited?: () => void;
+  onEntered?: () => void;
 }
 
 export function ConfirmBox({
@@ -66,7 +68,9 @@ export function ConfirmBox({
   footerClassName,
   mobileUI,
   disabled,
-  testIdBuilder
+  testIdBuilder,
+  onEntered,
+  onExited
 }: ConfirmBoxProps) {
   const [loading, setLoading] = React.useState<boolean>();
   const [error, setError] = React.useState<string>();
@@ -101,6 +105,7 @@ export function ConfirmBox({
       setError(e.message);
     } finally {
       setLoading(false);
+      setTimeout(() => setError(''), 5000);
     }
   }, [onConfirm, beforeConfirm]);
   React.useEffect(() => {
@@ -115,6 +120,8 @@ export function ConfirmBox({
         onConfirm={handleConfirm}
         onHide={onCancel}
         container={popOverContainer}
+        onEntered={onEntered}
+        onExited={onExited}
       >
         {typeof children === 'function'
           ? children({
@@ -133,6 +140,8 @@ export function ConfirmBox({
         onHide={onCancel!}
         container={popOverContainer}
         className={className}
+        onEntered={onEntered}
+        onExited={onExited}
       >
         {showTitle !== false && title ? (
           <Modal.Header onClose={onCancel} className={headerClassName}>
diff --git a/packages/amis-ui/src/components/DatePicker.tsx b/packages/amis-ui/src/components/DatePicker.tsx
index 3862ef044..d98ff491e 100644
--- a/packages/amis-ui/src/components/DatePicker.tsx
+++ b/packages/amis-ui/src/components/DatePicker.tsx
@@ -275,6 +275,9 @@ export interface DateProps extends LocaleProps, ThemeProps {
   valueFormat?: string;
   closeOnSelect: boolean;
   disabled?: boolean;
+  /* * 是否禁止输入
+   */
+  inputForbid?: boolean;
   minDate?: moment.Moment;
   maxDate?: moment.Moment;
   minDateRaw?: string;
@@ -957,6 +960,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       onClick,
       onMouseEnter,
       onMouseLeave,
+      inputForbid,
       closeOnSelect
     } = this.props;
 
@@ -1098,7 +1102,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           autoComplete="off"
           value={this.state.inputValue || ''}
           disabled={disabled}
-          readOnly={mobileUI}
+          readOnly={mobileUI || inputForbid}
           {...testIdBuilder?.getChild('input').getTestId()}
         />
 
diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx
index 41c0bb34f..14e4f9cfd 100644
--- a/packages/amis-ui/src/components/DateRangePicker.tsx
+++ b/packages/amis-ui/src/components/DateRangePicker.tsx
@@ -57,6 +57,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   ranges?: string | Array<ShortCuts>;
   shortcuts?: string | Array<ShortCuts>;
   clearable?: boolean;
+  inputForbid?: boolean; // 禁用输入
   minDate?: moment.Moment;
   maxDate?: moment.Moment;
   minDateRaw?: string;
@@ -1996,6 +1997,7 @@ export class DateRangePicker extends React.Component<
       joinValues,
       delimiter,
       clearable,
+      inputForbid,
       disabled,
       embed,
       overlayPlacement,
@@ -2110,7 +2112,7 @@ export class DateRangePicker extends React.Component<
           autoComplete="off"
           value={this.state.startInputValue || ''}
           disabled={disabled}
-          readOnly={mobileUI}
+          readOnly={mobileUI || inputForbid}
           testIdBuilder={testIdBuilder?.getChild('start')}
         />
         <span
@@ -2131,7 +2133,7 @@ export class DateRangePicker extends React.Component<
           autoComplete="off"
           value={this.state.endInputValue || ''}
           disabled={disabled}
-          readOnly={mobileUI}
+          readOnly={mobileUI || inputForbid}
           testIdBuilder={testIdBuilder?.getChild('end')}
         />
 
diff --git a/packages/amis-ui/src/components/PickerContainer.tsx b/packages/amis-ui/src/components/PickerContainer.tsx
index af1afa6c9..f4e18be9c 100644
--- a/packages/amis-ui/src/components/PickerContainer.tsx
+++ b/packages/amis-ui/src/components/PickerContainer.tsx
@@ -172,7 +172,7 @@ export class PickerContainer extends React.Component<
           testIdBuilder={testIdBuilder?.getChild('confirm-box')}
         >
           {({popOverContainer, loading, onConfirm, bodyRef}) =>
-            popOverRender({
+            popOverRender?.({
               ...(this.state as any),
               ref: bodyRef,
               setState: this.updateState,
diff --git a/packages/amis-ui/src/components/PopUp.tsx b/packages/amis-ui/src/components/PopUp.tsx
index 0bfd9f629..355909f88 100644
--- a/packages/amis-ui/src/components/PopUp.tsx
+++ b/packages/amis-ui/src/components/PopUp.tsx
@@ -33,6 +33,8 @@ export interface PopUpPorps extends ThemeProps, LocaleProps {
   placement?: 'left' | 'center' | 'right';
   header?: JSX.Element;
   children?: React.ReactNode | Array<React.ReactNode>;
+  onExited?: () => void;
+  onEntered?: () => void;
 }
 
 const fadeStyles: {
@@ -89,6 +91,8 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
       showClose,
       header,
       placement = 'center',
+      onEntered,
+      onExited,
       ...rest
     } = this.props;
 
@@ -98,7 +102,15 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
     delete outerStyle.top;
     return (
       <Portal container={container}>
-        <Transition mountOnEnter unmountOnExit in={isShow} timeout={500} appear>
+        <Transition
+          onEntered={onEntered}
+          onExit={onExited}
+          mountOnEnter
+          unmountOnExit
+          in={isShow}
+          timeout={500}
+          appear
+        >
           {(status: string) => {
             return (
               <div
diff --git a/packages/amis-ui/src/components/Radios.tsx b/packages/amis-ui/src/components/Radios.tsx
index aeb496094..02edd8bf7 100644
--- a/packages/amis-ui/src/components/Radios.tsx
+++ b/packages/amis-ui/src/components/Radios.tsx
@@ -109,7 +109,7 @@ export class Radios extends React.Component<RadioProps, any> {
   }
 
   renderItem(option: Option, index: number, valueArray: Array<Option>) {
-    if (option.children) {
+    if (option.children?.length) {
       return this.renderGroup(option, index, valueArray);
     }
 
diff --git a/packages/amis-ui/src/components/ResultBox.tsx b/packages/amis-ui/src/components/ResultBox.tsx
index b72f032bf..1947153c6 100644
--- a/packages/amis-ui/src/components/ResultBox.tsx
+++ b/packages/amis-ui/src/components/ResultBox.tsx
@@ -20,6 +20,7 @@ export interface ResultBoxProps
   result?: Array<any> | any;
   itemRender: (value: any) => JSX.Element | string;
   onResultChange?: (value: Array<any>) => void;
+  onItemClick?: (item: Object) => void;
   onClear?: (e: React.MouseEvent<HTMLElement>) => void;
   allowInput?: boolean;
   inputPlaceholder: string;
@@ -103,6 +104,17 @@ export class ResultBox extends React.Component<ResultBoxProps> {
     onResultChange && onResultChange(newResult);
   }
 
+  @autobind
+  handleItemClick(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const {result, onItemClick} = this.props;
+    const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+    const newResult = Array.isArray(result) ? result.concat() : [];
+    onItemClick && onItemClick(newResult[index] || {});
+  }
+
   @autobind
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     const {onChange} = this.props;
@@ -165,9 +177,14 @@ export class ResultBox extends React.Component<ResultBoxProps> {
                             'is-invalid': showInvalidMatch && item?.__unmatched
                           })}
                           key={itemIndex}
+                          onClick={this.handleItemClick}
                           {...itemTIB?.getTestId()}
                         >
-                          <span className={cx('ResultBox-valueLabel')}>
+                          <span
+                            className={cx('ResultBox-valueLabel')}
+                            data-index={index}
+                            {...itemTIB?.getChild('click').getTestId()}
+                          >
                             {itemRender(item)}
                           </span>
                           <a
@@ -205,9 +222,14 @@ export class ResultBox extends React.Component<ResultBoxProps> {
               className={cx('ResultBox-value', {
                 'is-invalid': isShowInvalid
               })}
+              onClick={this.handleItemClick}
               {...itemTIB?.getTestId()}
             >
-              <span className={cx('ResultBox-valueLabel')}>
+              <span
+                className={cx('ResultBox-valueLabel')}
+                data-index={index}
+                {...itemTIB?.getChild('click').getTestId()}
+              >
                 {itemRender(item)}
               </span>
               <a
@@ -237,9 +259,14 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             className={cx('ResultBox-value', {
               'is-invalid': showInvalidMatch && item?.__unmatched
             })}
+            onClick={this.handleItemClick}
             {...itemTIB?.getTestId()}
           >
-            <span className={cx('ResultBox-valueLabel')}>
+            <span
+              className={cx('ResultBox-valueLabel')}
+              data-index={index}
+              {...itemTIB?.getChild('click').getTestId()}
+            >
               {itemRender(item)}
             </span>
             <a
diff --git a/packages/amis-ui/src/components/Steps.tsx b/packages/amis-ui/src/components/Steps.tsx
index f6a90fd4c..515328f93 100644
--- a/packages/amis-ui/src/components/Steps.tsx
+++ b/packages/amis-ui/src/components/Steps.tsx
@@ -89,6 +89,7 @@ export interface StepsProps extends ThemeProps {
   labelPlacement?: 'horizontal' | 'vertical';
   progressDot?: boolean;
   onClickStep?: (i: number, step: StepObject) => void;
+  iconPosition?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -102,6 +103,7 @@ export function Steps(props: StepsProps) {
     mode = 'horizontal',
     labelPlacement = 'horizontal',
     progressDot = false,
+    iconPosition,
     mobileUI,
     onClickStep
   } = props;
@@ -172,7 +174,12 @@ export function Steps(props: StepsProps) {
               }`
             )}
           >
-            <div className={cx('StepsItem-container')}>
+            <div
+              className={cx(
+                'StepsItem-container',
+                iconPosition && mode != 'vertical' && 'StepsItem-vertical'
+              )}
+            >
               <div className={cx('StepsItem-containerTail')}></div>
               {progressDot ? (
                 <div
@@ -239,16 +246,16 @@ export function Steps(props: StepsProps) {
                     <span>{step.description}</span>
                   </div>
                 </div>
+                {mode === 'simple' && i < stepsRow.length - 1 && (
+                  <div className={cx('StepsItem-icon-line')}>
+                    <Icon
+                      icon="right-arrow"
+                      className="icon"
+                      iconContent="StepsItem-icon-line"
+                    />
+                  </div>
+                )}
               </div>
-              {mode === 'simple' && i < stepsRow.length - 1 && (
-                <div className={cx('StepsItem-icon-line')}>
-                  <Icon
-                    icon="right-arrow"
-                    className="icon"
-                    iconContent="StepsItem-icon-line"
-                  />
-                </div>
-              )}
             </div>
           </li>
         );
diff --git a/packages/amis-ui/src/components/Tabs.tsx b/packages/amis-ui/src/components/Tabs.tsx
index de405ccea..7811c1eac 100644
--- a/packages/amis-ui/src/components/Tabs.tsx
+++ b/packages/amis-ui/src/components/Tabs.tsx
@@ -169,6 +169,7 @@ export interface TabsProps extends ThemeProps, LocaleProps {
   activeKey?: string | number;
   contentClassName: string;
   linksClassName?: ClassName;
+  titleClassName?: ClassName;
   className?: string;
   tabs?: Array<TabProps>;
   tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
@@ -176,7 +177,7 @@ export interface TabsProps extends ThemeProps, LocaleProps {
   addable?: boolean; // 是否显示增加按钮
   onAdd?: () => void;
   closable?: boolean;
-  onClose?: (index: number, key: string | number) => void;
+  onClose?: (key: string | number) => void;
   draggable?: boolean;
   onDragChange?: (e: any) => void;
   showTip?: boolean;
@@ -597,7 +598,8 @@ export class Tabs extends React.Component<TabsProps, any> {
       showTip,
       showTipClassName,
       editable,
-      testIdBuilder
+      testIdBuilder,
+      titleClassName
     } = this.props;
 
     const {
@@ -666,6 +668,7 @@ export class Tabs extends React.Component<TabsProps, any> {
       <li
         className={cx(
           'Tabs-link',
+          titleClassName,
           activeKey === eventKey ? 'is-active' : '',
           disabled ? 'is-disabled' : '',
           tabClassName
@@ -697,8 +700,7 @@ export class Tabs extends React.Component<TabsProps, any> {
             className={cx('Tabs-link-close')}
             onClick={(e: React.MouseEvent) => {
               e.stopPropagation();
-              this.props.onClose &&
-                this.props.onClose(index, eventKey ?? index);
+              this.props.onClose && this.props.onClose(eventKey);
             }}
             {...tabTestIdBuidr?.getChild('close').getTestId()}
           >
@@ -775,7 +777,8 @@ export class Tabs extends React.Component<TabsProps, any> {
       translate: __,
       classnames: cx,
       popOverContainer,
-      collapseBtnLabel
+      collapseBtnLabel,
+      titleClassName
     } = this.props;
 
     if (!Array.isArray(children)) {
@@ -814,6 +817,7 @@ export class Tabs extends React.Component<TabsProps, any> {
             <li
               className={cx(
                 'Tabs-link',
+                titleClassName,
                 rest.some(item => ~item.props.className.indexOf('is-active'))
                   ? 'is-active'
                   : ''
diff --git a/packages/amis-ui/src/components/Transfer.tsx b/packages/amis-ui/src/components/Transfer.tsx
index c0b5831fe..c360ce3d9 100644
--- a/packages/amis-ui/src/components/Transfer.tsx
+++ b/packages/amis-ui/src/components/Transfer.tsx
@@ -713,6 +713,7 @@ export class Transfer<
       checkAll,
       checkAllLabel,
       onlyChildren,
+      autoCheckChildren,
       testIdBuilder
     } = props;
     const {isTreeDeferLoad, searchResult, inputValue} = this.state;
@@ -767,6 +768,7 @@ export class Transfer<
         itemHeight={itemHeight}
         checkAllLabel={checkAllLabel}
         checkAll={checkAll}
+        autoCheckChildren={autoCheckChildren}
       />
     ) : mode === 'chained' ? (
       <ChainedSelection
diff --git a/packages/amis-ui/src/components/TransferPicker.tsx b/packages/amis-ui/src/components/TransferPicker.tsx
index 911349912..f2a11505b 100644
--- a/packages/amis-ui/src/components/TransferPicker.tsx
+++ b/packages/amis-ui/src/components/TransferPicker.tsx
@@ -18,7 +18,7 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
   borderMode?: 'full' | 'half' | 'none';
 
   onFocus?: () => void;
-
+  onItemClick?: (item: Object) => void;
   onBlur?: () => void;
   popOverContainer?: any;
 }
@@ -65,6 +65,7 @@ export class TransferPicker extends React.Component<
       disabled,
       className,
       onChange,
+      onItemClick,
       size,
       borderMode,
       labelField = 'label',
@@ -129,6 +130,7 @@ export class TransferPicker extends React.Component<
             )}
             allowInput={false}
             result={value}
+            onItemClick={onItemClick}
             onResultChange={onChange}
             onResultClick={onClick}
             placeholder={placeholder ?? __('Select.placeholder')}
diff --git a/packages/amis-ui/src/components/Tree.tsx b/packages/amis-ui/src/components/Tree.tsx
index 714f02f52..9fe1051b5 100644
--- a/packages/amis-ui/src/components/Tree.tsx
+++ b/packages/amis-ui/src/components/Tree.tsx
@@ -54,6 +54,8 @@ export interface IDropInfo {
   indicator: IDropIndicator;
 }
 
+type NodeBehaviorType = 'unfold' | 'check';
+
 interface TreeSelectorProps extends ThemeProps, LocaleProps, SpinnerExtraProps {
   highlightTxt?: string;
 
@@ -108,6 +110,11 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps, SpinnerExtraProps {
   // ui级联关系，true代表级联选中，false代表不级联，默认为true
   autoCheckChildren: boolean;
 
+  /**
+   * 子节点取消时自定去掉父节点的值，默认为false
+   */
+  autoCancelParent?: boolean;
+
   /*
    * 该属性代表数据级联关系，autoCheckChildren为true时生效，默认为false，具体数据级联关系如下：
    * 1.cascade 为false，ui行为为级联选中子节点，子节点禁用；值只包含父节点的值
@@ -117,6 +124,11 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps, SpinnerExtraProps {
    */
   cascade?: boolean;
 
+  /**
+   * 节点行为配置，默认为选中
+   */
+  nodeBehavior?: NodeBehaviorType[];
+
   /**
    * 是否使用 disable 字段
    */
@@ -131,6 +143,8 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps, SpinnerExtraProps {
   createTip?: string;
   // 是否开启虚拟滚动
   virtualThreshold?: number;
+  // 虚拟滚动列表高度
+  virtualHeight?: number;
   itemHeight?: number;
   onAdd?: (
     idx?: number | Array<number>,
@@ -153,8 +167,15 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps, SpinnerExtraProps {
   // 全选按钮文案
   checkAllLabel?: string;
   enableDefaultIcon?: boolean;
+  onHandleNodeClick?: (option: Option) => void;
+
+  /**
+   * 节点操作栏区域
+   */
+  itemActionsRender?: (item: Option, states: any) => JSX.Element;
 
   testIdBuilder?: TestIdBuilder;
+  actionClassName?: string;
 }
 
 interface TreeSelectorState {
@@ -201,6 +222,7 @@ export class TreeSelector extends React.Component<
     rootLabel: 'Tree.root',
     rootValue: 0,
     autoCheckChildren: true,
+    autoCancelParent: false,
     cascade: false,
     selfDisabledAffectChildren: true,
     rootCreateTip: 'Tree.addRoot',
@@ -230,6 +252,7 @@ export class TreeSelector extends React.Component<
     y: 0
   };
   root = React.createRef<HTMLDivElement>();
+  virtualListRef = React.createRef<any>();
 
   constructor(props: TreeSelectorProps) {
     super(props);
@@ -498,12 +521,33 @@ export class TreeSelector extends React.Component<
     );
   }
 
+  @autobind
+  handleItemClick(node: any, checked: boolean) {
+    const {onHandleNodeClick, multiple, nodeBehavior = ['check']} = this.props;
+
+    onHandleNodeClick && onHandleNodeClick(node);
+
+    if (nodeBehavior?.includes('unfold') && node.children?.length) {
+      this.toggleUnfolded(node);
+    }
+
+    if (nodeBehavior?.includes('check')) {
+      multiple ? this.handleCheck(node, !checked) : this.handleSelect(node);
+    }
+  }
+
   @autobind
   handleCheck(item: any, checked: boolean) {
     // TODO: 重新梳理这里的逻辑
     const props = this.props;
     const value = this.state.valueSet;
-    const {onlyChildren, withChildren, cascade, autoCheckChildren} = props;
+    const {
+      onlyChildren,
+      withChildren,
+      cascade,
+      autoCheckChildren,
+      autoCancelParent
+    } = props;
     if (checked) {
       if (!value.has(item)) {
         value.add(item);
@@ -623,6 +667,21 @@ export class TreeSelector extends React.Component<
           }
         }
       }
+
+      if (autoCancelParent && cascade) {
+        let toCheck = item;
+        while (true) {
+          const parent = getTreeParent(props.options, toCheck);
+          //判断 parent 节点是否已经勾选
+          if (value.has(parent)) {
+            //当有一个子节点取消时要去掉父节点，也要去掉父节点的父节点，直至最外层
+            value.delete(parent);
+            toCheck = parent;
+            continue;
+          }
+          break;
+        }
+      }
     }
 
     this.setState(
@@ -1145,7 +1204,9 @@ export class TreeSelector extends React.Component<
       enableDefaultIcon,
       valueField,
       mobileUI,
-      testIdBuilder
+      testIdBuilder,
+      itemActionsRender,
+      actionClassName
     } = this.props;
 
     const item = this.state.flattenedOptions[index];
@@ -1188,7 +1249,8 @@ export class TreeSelector extends React.Component<
     const iconValue =
       item[iconField] ||
       (enableDefaultIcon !== false
-        ? Array.isArray(item.children) && item.children.length
+        ? (Array.isArray(item.children) && item.children.length) ||
+          item[deferField]
           ? 'folder'
           : 'file'
         : false);
@@ -1259,22 +1321,18 @@ export class TreeSelector extends React.Component<
           <div
             className={cx('Tree-itemLabel-item', {'is-mobile': mobileUI})}
             {...itemTestBuilder?.getChild('content').getTestId()}
+            onClick={() => !disabled && this.handleItemClick(item, checked)}
           >
             {showIcon ? (
               <i
                 className={cx(
                   `Tree-itemIcon ${
-                    Array.isArray(item.children) && item.children.length
+                    (Array.isArray(item.children) && item.children.length) ||
+                    item[deferField]
                       ? 'Tree-folderIcon'
                       : 'Tree-leafIcon'
                   }`
                 )}
-                onClick={() =>
-                  !disabled &&
-                  (multiple
-                    ? this.handleCheck(item, !checked)
-                    : this.handleSelect(item))
-                }
               >
                 {iconValue ? <Icon icon={iconValue} className="icon" /> : null}
               </i>
@@ -1282,12 +1340,6 @@ export class TreeSelector extends React.Component<
 
             <span
               className={cx('Tree-itemText')}
-              onClick={() =>
-                !disabled &&
-                (multiple
-                  ? this.handleCheck(item, !checked)
-                  : this.handleSelect(item))
-              }
               title={item[labelField]}
               {...itemTestBuilder?.getChild('text').getTestId()}
             >
@@ -1307,7 +1359,10 @@ export class TreeSelector extends React.Component<
             </span>
 
             {!disabled && !isAdding && !isEditing ? (
-              <div className={cx('Tree-item-icons')}>
+              <div
+                className={cx('Tree-item-icons', actionClassName)}
+                onClick={e => e.stopPropagation()}
+              >
                 {creatable &&
                 !(item[deferField] && !item.loaded) &&
                 hasAbility(item, 'creatable') ? (
@@ -1357,6 +1412,21 @@ export class TreeSelector extends React.Component<
                     </a>
                   </TooltipWrapper>
                 ) : null}
+
+                {itemActionsRender && (
+                  <div className={cx('Tree-itemActions')}>
+                    {itemActionsRender(item, {
+                      ...item,
+                      index,
+                      multiple: multiple,
+                      checked: checked,
+                      labelField: labelField,
+                      onChange: () => this.handleCheck(item, !checked),
+                      disabled: disabled || item.disabled,
+                      classnames: cx
+                    })}
+                  </div>
+                )}
               </div>
             ) : null}
           </div>
@@ -1473,17 +1543,19 @@ export class TreeSelector extends React.Component<
 
   @autobind
   renderList(list: Options, value: any[]) {
-    const {virtualThreshold, itemHeight = 32} = this.props;
+    const {virtualThreshold, itemHeight = 32, virtualHeight} = this.props;
     if (virtualThreshold && list.length > virtualThreshold) {
       return (
-        <VirtualList
-          height={list.length > 8 ? 266 : list.length * itemHeight}
-          itemCount={list.length}
-          prefix={this.renderCheckAll()}
-          itemSize={itemHeight}
-          //! hack: 让 VirtualList 重新渲染
-          renderItem={this.renderItem.bind(this)}
-        />
+        <div ref={this.virtualListRef}>
+          <VirtualList
+            height={virtualHeight !== undefined ? virtualHeight : 266}
+            itemCount={list.length}
+            prefix={this.renderCheckAll()}
+            itemSize={itemHeight}
+            //! hack: 让 VirtualList 重新渲染
+            renderItem={this.renderItem.bind(this)}
+          />
+        </div>
       );
     }
 
@@ -1510,7 +1582,8 @@ export class TreeSelector extends React.Component<
       disabled,
       draggable,
       translate: __,
-      testIdBuilder
+      testIdBuilder,
+      actionClassName
     } = this.props;
     const {
       value,
@@ -1585,7 +1658,7 @@ export class TreeSelector extends React.Component<
                   rootCreatable !== false &&
                   !isAdding &&
                   !isEditing ? (
-                    <div className={cx('Tree-item-icons')}>
+                    <div className={cx('Tree-item-icons', actionClassName)}>
                       {creatable ? (
                         <a
                           onClick={this.handleAdd.bind(this, null)}
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
index deb0e80d0..9d14e25ce 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
@@ -34,6 +34,18 @@ exports[`Renderer:fieldSet 1`] = `
         <fieldset
           class="cxd-Collapse is-active no-border"
         >
+          <legend
+            class="cxd-Collapse-header bg-dark noTitle"
+          >
+            <span
+              class="cxd-Collapse-arrow-wrap"
+            >
+              <icon-mock
+                classname="cxd-Collapse-arrow icon icon-right-arrow-bold cxd-Collapse-arrow"
+                icon="right-arrow-bold"
+              />
+            </span>
+          </legend>
           <div
             class="cxd-Collapse-contentWrapper"
           >
@@ -123,6 +135,9 @@ exports[`Renderer:fieldSet with mode 1`] = `
         <fieldset
           class="cxd-Collapse is-active"
         >
+          <legend
+            class="cxd-Collapse-header noTitle"
+          />
           <div
             class="cxd-Collapse-contentWrapper"
           >
@@ -260,6 +275,9 @@ exports[`Renderer:fieldSet with mode 2`] = `
         <fieldset
           class="cxd-Collapse is-active"
         >
+          <legend
+            class="cxd-Collapse-header noTitle"
+          />
           <div
             class="cxd-Collapse-contentWrapper"
           >
@@ -397,6 +415,9 @@ exports[`Renderer:fieldSet with mode 3`] = `
         <fieldset
           class="cxd-Collapse is-active"
         >
+          <legend
+            class="cxd-Collapse-header noTitle"
+          />
           <div
             class="cxd-Collapse-contentWrapper"
           >
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTag.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTag.test.tsx.snap
index c3416cb0d..47aa6a340 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTag.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTag.test.tsx.snap
@@ -47,6 +47,7 @@ exports[`Renderer:InputTag InputTag input with batch tag 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="0"
               >
                 Apple
               </span>
@@ -64,6 +65,7 @@ exports[`Renderer:InputTag InputTag input with batch tag 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="1"
               >
                 Orange
               </span>
@@ -81,6 +83,7 @@ exports[`Renderer:InputTag InputTag input with batch tag 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="2"
               >
                 Banana
               </span>
@@ -163,6 +166,7 @@ exports[`Renderer:InputTag InputTag input with batch tag and separator "|" 1`] =
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="0"
               >
                 Apple
               </span>
@@ -180,6 +184,7 @@ exports[`Renderer:InputTag InputTag input with batch tag and separator "|" 1`] =
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="1"
               >
                 Orange
               </span>
@@ -197,6 +202,7 @@ exports[`Renderer:InputTag InputTag input with batch tag and separator "|" 1`] =
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="2"
               >
                 Banana
               </span>
@@ -278,6 +284,7 @@ exports[`Renderer:InputTag InputTag input with max quantity 2 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="0"
               >
                 Apple
               </span>
@@ -295,6 +302,7 @@ exports[`Renderer:InputTag InputTag input with max quantity 2 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="1"
               >
                 Orange
               </span>
@@ -375,6 +383,7 @@ exports[`Renderer:InputTag InputTag input with maxTagLength 5 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="0"
               >
                 Apple
               </span>
@@ -456,6 +465,7 @@ exports[`Renderer:InputTag InputTag input with single tag 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="0"
               >
                 Honey-dew melon
               </span>
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/nestedSelect.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/nestedSelect.test.tsx.snap
index 86a99fef3..e2db76ead 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/nestedSelect.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/nestedSelect.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`Renderer:NestedSelect with maxTagLength 3 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="0"
               >
                 <span
                   class="cxd-Select-valueLabel"
@@ -71,6 +72,7 @@ exports[`Renderer:NestedSelect with maxTagLength 3 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="1"
               >
                 <span
                   class="cxd-Select-valueLabel"
@@ -99,6 +101,7 @@ exports[`Renderer:NestedSelect with maxTagLength 3 1`] = `
             >
               <span
                 class="cxd-ResultBox-valueLabel"
+                data-index="2"
               >
                 <span
                   class="cxd-Select-valueLabel"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
index 66e78df6d..f44d59907 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/select.test.tsx.snap
@@ -1773,6 +1773,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                 >
                   <span
                     class="cxd-ResultBox-valueLabel"
+                    data-index="0"
                   >
                     诸葛亮
                   </span>
@@ -1790,6 +1791,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                 >
                   <span
                     class="cxd-ResultBox-valueLabel"
+                    data-index="1"
                   >
                     李白
                   </span>
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap
index 0b7985b64..b8a36bdb1 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/tabsTransferPicker.test.tsx.snap
@@ -81,6 +81,7 @@ exports[`Renderer:TabsTransferPicker 1`] = `
                           >
                             <span
                               class="cxd-ResultBox-valueLabel"
+                              data-index="0"
                             >
                               <span>
                                 诸葛亮
diff --git a/packages/amis/__tests__/renderers/Tabs.test.tsx b/packages/amis/__tests__/renderers/Tabs.test.tsx
index a37e37cd8..4df3e9984 100644
--- a/packages/amis/__tests__/renderers/Tabs.test.tsx
+++ b/packages/amis/__tests__/renderers/Tabs.test.tsx
@@ -14,6 +14,7 @@
  10. disabled 可禁用
  11. tabs 作为表单项
  12. collapseOnExceed 配置超出折叠
+ 13. tabs 删除事件动作
  */
 
 import {
@@ -545,3 +546,90 @@ test('Renderer:tabs with collapseOnExceed', async () => {
     container.querySelector('.is-active.cxd-Tabs-pane')!
   ).toHaveTextContent('Content 5');
 });
+
+// 13. tabs 删除事件动作
+test('Renderer:Tabs delete actions', async () => {
+  const {container, getByText} = render(
+    amisRender({
+      type: 'page',
+      body: [
+        {
+          type: 'tabs',
+          name: 'tabs',
+          id: 'tabs',
+          tabs: [
+            {
+              title: '选项卡1',
+              hash: 'tab1',
+              body: '选项卡内容1'
+            },
+            {
+              title: '选项卡2',
+              hash: 'tab2',
+              body: '选项卡内容2'
+            },
+            {
+              title: '选项卡3',
+              hash: 'tab3',
+              body: '选项卡内容3'
+            }
+          ]
+        },
+        {
+          type: 'button',
+          label: '删除选项卡1',
+          onEvent: {
+            click: {
+              actions: [
+                {
+                  actionType: 'deleteTab',
+                  componentId: 'tabs',
+                  args: {
+                    deleteHash: 'tab1'
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          type: 'button',
+          label: '删除选项卡3',
+          onEvent: {
+            click: {
+              actions: [
+                {
+                  actionType: 'deleteTab',
+                  componentId: 'tabs',
+                  args: {
+                    deleteHash: 'tab3'
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    })
+  );
+
+  const tabs = container.querySelectorAll('.cxd-Tabs-links .cxd-Tabs-link');
+
+  expect(tabs.length).toBe(3);
+  expect(tabs[0].textContent).toBe('选项卡1');
+  expect(tabs[1].textContent).toBe('选项卡2');
+  expect(tabs[2].textContent).toBe('选项卡3');
+
+  fireEvent.click(getByText('删除选项卡1'));
+  await wait(300);
+  const tabs1 = container.querySelectorAll('.cxd-Tabs-links .cxd-Tabs-link');
+  expect(tabs1.length).toBe(2);
+  expect(tabs1[0].textContent).toBe('选项卡2');
+  expect(tabs1[1].textContent).toBe('选项卡3');
+
+  fireEvent.click(getByText('删除选项卡3'));
+  await wait(300);
+  const tabs2 = container.querySelectorAll('.cxd-Tabs-links .cxd-Tabs-link');
+  expect(tabs2.length).toBe(1);
+  expect(tabs2[0].textContent).toBe('选项卡2');
+});
diff --git a/packages/amis/__tests__/renderers/Tree.test.tsx b/packages/amis/__tests__/renderers/Tree.test.tsx
index 2bce5e09e..7799668d8 100644
--- a/packages/amis/__tests__/renderers/Tree.test.tsx
+++ b/packages/amis/__tests__/renderers/Tree.test.tsx
@@ -436,71 +436,71 @@ test('Tree: item disabled', async () => {
   const {container, findByText, findByPlaceholderText} = render(
     amisRender(
       {
-        "type": "form",
-        "api": "/api/mock2/form/saveForm",
-        "body": [
+        type: 'form',
+        api: '/api/mock2/form/saveForm',
+        body: [
           {
-            "label": "树型展示",
-            "type": "transfer",
-            "name": "transfer",
-            "selectMode": "tree",
-            "searchable": true,
-            "options": [
+            label: '树型展示',
+            type: 'transfer',
+            name: 'transfer',
+            selectMode: 'tree',
+            searchable: true,
+            options: [
               {
-                "label": "法师",
-                "children": [
+                label: '法师',
+                children: [
                   {
-                    "label": "诸葛亮",
-                    "value": "zhugeliang"
+                    label: '诸葛亮',
+                    value: 'zhugeliang'
                   }
                 ]
               },
               {
-                "label": "战士",
-                "children": [
+                label: '战士',
+                children: [
                   {
-                    "label": "曹操",
-                    "value": "caocao"
+                    label: '曹操',
+                    value: 'caocao'
                   },
                   {
-                    "label": "曹操1",
-                    "value": "caocao1",
-                    "children": [
+                    label: '曹操1',
+                    value: 'caocao1',
+                    children: [
                       {
-                        "label": "李白1",
-                        "value": "libai1"
+                        label: '李白1',
+                        value: 'libai1'
                       },
                       {
-                        "label": "韩信1",
-                        "value": "hanxin1"
+                        label: '韩信1',
+                        value: 'hanxin1'
                       },
                       {
-                        "label": "云中君1",
-                        "value": "yunzhongjun1"
+                        label: '云中君1',
+                        value: 'yunzhongjun1'
                       }
                     ]
                   },
                   {
-                    "disabled": true,
-                    "label": "钟无艳",
-                    "value": "zhongwuyan"
+                    disabled: true,
+                    label: '钟无艳',
+                    value: 'zhongwuyan'
                   }
                 ]
               },
               {
-                "label": "打野",
-                "children": [
+                label: '打野',
+                children: [
                   {
-                    "label": "李白",
-                    "value": "libai"
+                    label: '李白',
+                    value: 'libai'
                   },
                   {
-                    "label": "韩信",
-                    "value": "hanxin"
+                    label: '韩信',
+                    value: 'hanxin'
                   },
                   {
-                    "label": "云中君",
-                    "value": "yunzhongjun"
+                    label: '云中君',
+                    value: 'yunzhongjun'
                   }
                 ]
               }
@@ -533,73 +533,282 @@ test('Tree: item disabled', async () => {
 
 test('Tree: single value mode should not render input when searchable enabled and default value settled', async () => {
   const {container} = render(
-    amisRender({
-      type: 'container',
-      body: [
-        {
-          "type": "tree-select",
-          "name": "tree",
-          "label": "Tree",
-          "searchable": true,
-          "value": 2,
-          "inputClassName": "single",
-          "options": [
-            {
-              "label": "Folder A",
-              "value": 1,
-              "children": [
-                {
-                  "label": "file A",
-                  "value": 2
-                },
-                {
-                  "label": "file B",
-                  "value": 3
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "type": "tree-select",
-          "name": "tree2",
-          "label": "Tree2",
-          "searchable": true,
-          "value": "2,4",
-          "multiple": true,
-          "inputClassName": "multiple",
-          "options": [
-            {
-              "label": "Folder A",
-              "value": 1,
-              "children": [
-                {
-                  "label": "file A",
-                  "value": 2
-                },
-                {
-                  "label": "file B",
-                  "value": 3
-                }
-              ]
-            },
-            {
-              "label": "file C",
-              "value": 4
-            }
-          ]
-        }
-      ]
-    },
-    {},
-    makeEnv({})
-  ));
+    amisRender(
+      {
+        type: 'container',
+        body: [
+          {
+            type: 'tree-select',
+            name: 'tree',
+            label: 'Tree',
+            searchable: true,
+            value: 2,
+            inputClassName: 'single',
+            options: [
+              {
+                label: 'Folder A',
+                value: 1,
+                children: [
+                  {
+                    label: 'file A',
+                    value: 2
+                  },
+                  {
+                    label: 'file B',
+                    value: 3
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            type: 'tree-select',
+            name: 'tree2',
+            label: 'Tree2',
+            searchable: true,
+            value: '2,4',
+            multiple: true,
+            inputClassName: 'multiple',
+            options: [
+              {
+                label: 'Folder A',
+                value: 1,
+                children: [
+                  {
+                    label: 'file A',
+                    value: 2
+                  },
+                  {
+                    label: 'file B',
+                    value: 3
+                  }
+                ]
+              },
+              {
+                label: 'file C',
+                value: 4
+              }
+            ]
+          }
+        ]
+      },
+      {},
+      makeEnv({})
+    )
+  );
 
-  const singleModeInput = container.querySelector('.single .cxd-ResultBox-value-input');
-  const multipleModeInput = container.querySelector('.multiple .cxd-ResultBox-value-input');
+  const singleModeInput = container.querySelector(
+    '.single .cxd-ResultBox-value-input'
+  );
+  const multipleModeInput = container.querySelector(
+    '.multiple .cxd-ResultBox-value-input'
+  );
 
   /** 单选模式且已选值，不应该再有 input */
   expect(singleModeInput).not.toBeInTheDocument();
   /** 多选模式始终都有 input */
   expect(multipleModeInput).toBeInTheDocument();
-})
+});
+
+test('Tree: autoCancelParent = true', async () => {
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'page',
+        body: {
+          type: 'form',
+          api: '/api/mock2/form/saveForm',
+          body: [
+            {
+              type: 'input-tree',
+              name: 'tree',
+              label: 'Tree',
+              cascade: true,
+              multiple: true,
+              autoCancelParent: true,
+              options: [
+                {
+                  label: 'Folder A',
+                  value: 1,
+                  children: [
+                    {
+                      label: 'file A',
+                      value: 2
+                    },
+                    {
+                      label: 'Folder B',
+                      value: 3,
+                      children: [
+                        {
+                          label: 'file b1',
+                          value: 3.1
+                        },
+                        {
+                          label: 'file b2',
+                          value: 3.2
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  label: 'file C',
+                  value: 4
+                },
+                {
+                  label: 'file D',
+                  value: 5
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  fireEvent.click(getByText('Folder A'));
+
+  await waitFor(() => container.querySelector('.is-checked'));
+
+  expect(container.querySelectorAll('.is-checked').length).toBe(5);
+
+  fireEvent.click(getByText('file b1'));
+
+  await waitFor(() => container.querySelector('.is-checked'));
+
+  expect(container.querySelectorAll('.is-checked').length).toBe(2);
+});
+
+test('Tree: nodeBehavior-check', async () => {
+  const {container, getByText} = render(
+    amisRender({
+      type: 'page',
+      body: {
+        type: 'form',
+        api: '/api/mock2/form/saveForm',
+        body: [
+          {
+            type: 'input-tree',
+            name: 'tree',
+            label: 'Tree',
+            options: [
+              {
+                label: 'Folder A',
+                value: 1,
+                children: [
+                  {
+                    label: 'file A',
+                    value: 2
+                  }
+                ]
+              },
+              {
+                label: 'file C',
+                value: 3
+              }
+            ]
+          }
+        ]
+      }
+    })
+  );
+
+  fireEvent.click(getByText('Folder A'));
+
+  await waitFor(() => container.querySelector('.is-checked'));
+
+  expect(container.querySelector('.is-checked')!.textContent).toBe('Folder A');
+});
+
+test('Tree: nodeBehavior-unfold', async () => {
+  const {container, getByText} = render(
+    amisRender({
+      type: 'page',
+      body: {
+        type: 'form',
+        api: '/api/mock2/form/saveForm',
+        body: [
+          {
+            type: 'input-tree',
+            name: 'tree',
+            label: 'Tree',
+            nodeBehavior: ['unfold'],
+            options: [
+              {
+                label: 'Folder A',
+                value: 1,
+                collapsed: true,
+                children: [
+                  {
+                    label: 'file A',
+                    value: 2
+                  }
+                ]
+              },
+              {
+                label: 'file C',
+                value: 3
+              }
+            ]
+          }
+        ]
+      }
+    })
+  );
+
+  fireEvent.click(getByText('Folder A'));
+
+  await waitFor(() => container.querySelector('.is-child'));
+
+  expect(container.querySelector('.is-child')!.textContent).toBe('file A');
+});
+
+test('Tree: nodeBehavior-check+unfold', async () => {
+  const {container, getByText} = render(
+    amisRender({
+      type: 'page',
+      body: {
+        type: 'form',
+        api: '/api/mock2/form/saveForm',
+        body: [
+          {
+            type: 'input-tree',
+            name: 'tree',
+            label: 'Tree',
+            nodeBehavior: ['unfold', 'check'],
+            options: [
+              {
+                label: 'Folder A',
+                value: 1,
+                collapsed: true,
+                children: [
+                  {
+                    label: 'file A',
+                    value: 2
+                  }
+                ]
+              },
+              {
+                label: 'file C',
+                value: 3
+              }
+            ]
+          }
+        ]
+      }
+    })
+  );
+
+  fireEvent.click(getByText('Folder A'));
+
+  await waitFor(() => container.querySelector('.is-child'));
+
+  expect(container.querySelector('.is-child')!.textContent).toBe('file A');
+
+  await waitFor(() => container.querySelector('.is-checked'));
+
+  expect(container.querySelector('.is-checked')!.textContent).toBe('Folder A');
+});
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
index 94489838f..137fdba54 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`Renderer:Page 1`] = `
 exports[`Renderer:Page classNames 1`] = `
 <div>
   <div
-    class="cxd-Page cxd-Page--withSidebar cxd-Page--asideSticky"
+    class="cxd-Page cxd-Page--withSidebar cxd-Page--asideSticky cxd-Page--leftAside"
   >
     <div
       class="cxd-Page-aside cxd-Page-aside--withWidth aside-class-name"
diff --git a/packages/amis/package.json b/packages/amis/package.json
index 3bc1a45b8..574c871dd 100644
--- a/packages/amis/package.json
+++ b/packages/amis/package.json
@@ -11,7 +11,7 @@
     "coverage": "jest --coverage",
     "publish-to-internal": "sh build.sh && sh publish.sh",
     "build": "npm run clean-dist && sh build.sh",
-    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
+    "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "prettier": "prettier --write '{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}'",
     "build-schemas": "ts-node -O '{\"target\":\"es6\"}' ../../scripts/build-schemas.ts",
     "clean-dist": "rimraf lib/** esm/**"
@@ -76,6 +76,7 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
diff --git a/packages/amis/src/renderers/Form/Checkboxes.tsx b/packages/amis/src/renderers/Form/Checkboxes.tsx
index 2874f557d..833d8d66f 100644
--- a/packages/amis/src/renderers/Form/Checkboxes.tsx
+++ b/packages/amis/src/renderers/Form/Checkboxes.tsx
@@ -217,7 +217,7 @@ export default class CheckboxesControl extends React.Component<
   }
 
   renderItem(option: Option, index: number) {
-    if (option.children) {
+    if (option.children?.length) {
       return this.renderGroup(option, index);
     }
 
diff --git a/packages/amis/src/renderers/Form/InputDate.tsx b/packages/amis/src/renderers/Form/InputDate.tsx
index 7aa7af913..823b4e8d8 100644
--- a/packages/amis/src/renderers/Form/InputDate.tsx
+++ b/packages/amis/src/renderers/Form/InputDate.tsx
@@ -81,6 +81,10 @@ export interface InputDateBaseControlSchema extends FormBaseControlSchema {
    * (currentDate: moment.Moment, props: any) => boolean;
    */
   disabledDate?: string;
+
+  /* * 是否禁止输入
+   */
+  inputForbid?: boolean;
 }
 
 /**
diff --git a/packages/amis/src/renderers/Form/InputText.tsx b/packages/amis/src/renderers/Form/InputText.tsx
index 3f1ff16f4..5643f0221 100644
--- a/packages/amis/src/renderers/Form/InputText.tsx
+++ b/packages/amis/src/renderers/Form/InputText.tsx
@@ -210,14 +210,8 @@ export default class TextControl extends React.PureComponent<
   };
 
   componentDidMount() {
-    const {
-      formItem,
-      autoComplete,
-      addHook,
-      formInited,
-      data,
-      name
-    } = this.props;
+    const {formItem, autoComplete, addHook, formInited, data, name} =
+      this.props;
 
     if (isEffectiveApi(autoComplete, data) && formItem) {
       if (formInited) {
@@ -308,14 +302,8 @@ export default class TextControl extends React.PureComponent<
   }
 
   async resetValue() {
-    const {
-      onChange,
-      dispatchEvent,
-      resetValue,
-      formStore,
-      store,
-      name
-    } = this.props;
+    const {onChange, dispatchEvent, resetValue, formStore, store, name} =
+      this.props;
     const pristineVal =
       getVariable(formStore?.pristine ?? store?.pristine, name) ?? resetValue;
 
@@ -496,13 +484,8 @@ export default class TextControl extends React.PureComponent<
   }
 
   async handleKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
-    const {
-      selectedOptions,
-      onChange,
-      multiple,
-      creatable,
-      dispatchEvent
-    } = this.props;
+    const {selectedOptions, onChange, multiple, creatable, dispatchEvent} =
+      this.props;
     const valueField = this.props?.valueField || 'value';
 
     if (selectedOptions.length && !this.state.inputValue && evt.keyCode === 8) {
@@ -644,12 +627,8 @@ export default class TextControl extends React.PureComponent<
 
   @autobind
   async handleNormalInputChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {
-      onChange,
-      dispatchEvent,
-      trimContents,
-      clearValueOnEmpty
-    } = this.props;
+    const {onChange, dispatchEvent, trimContents, clearValueOnEmpty} =
+      this.props;
     let value: string | undefined = this.transformValue(e.currentTarget.value);
     if (typeof value === 'string') {
       if (trimContents) {
@@ -674,13 +653,8 @@ export default class TextControl extends React.PureComponent<
   }
 
   normalizeValue(value: Option[] | Option | undefined | null) {
-    const {
-      multiple,
-      delimiter,
-      joinValues,
-      extractValue,
-      valueField
-    } = this.props;
+    const {multiple, delimiter, joinValues, extractValue, valueField} =
+      this.props;
     const selectedOptions = Array.isArray(value) ? value : value ? [value] : [];
 
     if (joinValues) {
@@ -863,9 +837,8 @@ export default class TextControl extends React.PureComponent<
                 {
                   'is-opened': isOpen,
                   'TextControl-input--multiple': multiple,
-                  [`TextControl-input--border${ucFirst(
+                  [`TextControl-input--border${ucFirst(borderMode)}`]:
                     borderMode
-                  )}`]: borderMode
                 }
               )}
               onClick={this.handleClick}
diff --git a/packages/amis/src/renderers/Form/InputTree.tsx b/packages/amis/src/renderers/Form/InputTree.tsx
index 3afe86ec1..c7228e590 100644
--- a/packages/amis/src/renderers/Form/InputTree.tsx
+++ b/packages/amis/src/renderers/Form/InputTree.tsx
@@ -21,13 +21,24 @@ import {
   findTree,
   isEffectiveApi,
   BaseApiObject,
-  getVariable
+  getVariable,
+  setThemeClassName,
+  CustomStyle,
+  resizeSensor,
+  anyChanged
 } from 'amis-core';
 import {Spinner, SearchBox} from 'amis-ui';
-import {FormOptionsSchema, SchemaApi} from '../../Schema';
+import {
+  FormOptionsSchema,
+  SchemaApi,
+  SchemaCollection,
+  SchemaClassName
+} from '../../Schema';
 import {supportStatic} from './StaticHoc';
 import type {ItemRenderStates} from 'amis-ui/lib/components/Selection';
 
+type NodeBehaviorType = 'unfold' | 'check';
+
 /**
  * Tree 下拉选择框。
  * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/tree
@@ -69,6 +80,16 @@ export interface TreeControlSchema extends FormOptionsSchema {
    */
   cascade?: boolean;
 
+  /**
+   * 节点行为配置，默认为选中
+   */
+  nodeBehavior?: NodeBehaviorType[];
+
+  /**
+   * 子节点取消时自动取消父节点的值，默认为false
+   */
+  autoCancelParent?: boolean;
+
   /**
    * 选父级的时候是否把子节点的值也包含在内。
    */
@@ -129,6 +150,11 @@ export interface TreeControlSchema extends FormOptionsSchema {
    */
   searchApi?: SchemaApi;
 
+  /**
+   * 自定义节点操作栏区域
+   */
+  itemActions?: SchemaCollection;
+
   /**
    * 搜索框的配置
    */
@@ -194,6 +220,9 @@ export interface TreeProps
 interface TreeState {
   filteredOptions: Option[];
   keyword: string;
+  allowSearch: boolean;
+  virtualListHeight: number;
+  othersHeight: number;
 }
 
 export default class TreeControl extends React.Component<TreeProps, TreeState> {
@@ -207,12 +236,17 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
     pathSeparator: '/'
   };
   treeRef: any;
+  readonly rootRef = React.createRef<HTMLDivElement>();
+  unSensor?: () => void;
 
   constructor(props: TreeProps) {
     super(props);
     this.state = {
       keyword: '',
-      filteredOptions: this.props.options ?? []
+      filteredOptions: this.props.options ?? [],
+      allowSearch: false,
+      virtualListHeight: 0,
+      othersHeight: 0
     };
     this.handleSearch = debounce(this.handleSearch.bind(this), 250, {
       trailing: true,
@@ -220,8 +254,24 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
     });
   }
 
-  componentDidUpdate(prevProps: TreeProps) {
+  componentDidMount() {
+    if (this.props.heightAuto) {
+      this.initOthersHeight();
+      this.handleVirtualListHeight();
+      this.unSensor = resizeSensor(
+        this.rootRef.current?.parentElement!,
+        () => {
+          this.handleVirtualListHeight();
+        },
+        false,
+        'height'
+      );
+    }
+  }
+
+  componentDidUpdate(prevProps: TreeProps, preState: TreeState) {
     const props = this.props;
+    const state = this.state;
     const keyword = this.state.keyword;
 
     if (
@@ -235,6 +285,95 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
           searchable && keyword ? this.filterOptions(options, keyword) : options
       });
     }
+
+    if (
+      anyChanged(
+        [
+          'label',
+          'searchable',
+          'creatable',
+          'hideRoot',
+          'themeCss',
+          'wrapperCustomStyle',
+          'heightAuto'
+        ],
+        prevProps,
+        props
+      ) &&
+      props.heightAuto
+    ) {
+      this.initOthersHeight();
+    }
+
+    if (preState.othersHeight !== state.othersHeight && props.heightAuto) {
+      this.handleVirtualListHeight();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.unSensor) {
+      this.unSensor();
+      delete this.unSensor;
+    }
+  }
+
+  initOthersHeight() {
+    const treeElement = this.rootRef.current;
+    const treeParentElement = this.rootRef.current?.parentElement;
+    const virtualElement = this.treeRef.virtualListRef.current;
+    const virtualParentElement: HTMLElement | null | undefined =
+      this.treeRef.virtualListRef.current?.parentElement;
+
+    if (
+      !treeParentElement ||
+      !virtualParentElement ||
+      !virtualElement ||
+      !treeElement
+    )
+      return;
+
+    const calculateHeight = (
+      element: HTMLElement,
+      excludeElement: HTMLElement
+    ) => {
+      return Array.from(element.children)
+        .filter(item => item !== excludeElement)
+        .reduce((prev, current: HTMLElement) => {
+          return (
+            prev + current.offsetHeight + this.getElementVerticalMargin(current)
+          );
+        }, 0);
+    };
+
+    // 计算元素的高度+padding+margin等值
+    const othersHeight =
+      calculateHeight(treeParentElement, treeElement) +
+      this.getElementVerticalMargin(treeElement) +
+      calculateHeight(virtualParentElement, virtualElement) +
+      treeElement.offsetHeight -
+      virtualParentElement.offsetHeight;
+
+    this.setState({othersHeight});
+  }
+
+  handleVirtualListHeight() {
+    const {othersHeight} = this.state;
+    const parentElement = this.rootRef.current?.parentElement;
+    if (!parentElement) return;
+
+    const virtualListHeight = parentElement.offsetHeight - othersHeight;
+
+    this.setState({
+      virtualListHeight: virtualListHeight > 0 ? virtualListHeight : 0
+    });
+  }
+
+  // 获取边距高度
+  getElementVerticalMargin(element: HTMLElement) {
+    const styles: any = window.getComputedStyle(element, null);
+    return (
+      parseInt(styles.marginTop || '0') + parseInt(styles.marginBottom || '0')
+    );
   }
 
   reload() {
@@ -255,7 +394,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
     } else if (action.actionType === 'expand') {
       this.treeRef.syncUnFolded(this.props, action.args?.openLevel);
     } else if (action.actionType === 'collapse') {
-      this.treeRef.syncUnFolded(this.props, 0);
+      this.treeRef.syncUnFolded(this.props, action.args?.closeLevel || 0);
     } else if (action.actionType === 'add') {
       this.addItemFromAction(action.args?.item, action.args?.parentValue);
     } else if (action.actionType === 'edit') {
@@ -264,6 +403,11 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
       this.deleteItemFromAction(action.args?.value);
     } else if (action.actionType === 'reload') {
       this.reload();
+    } else if (actionType === 'search') {
+      this.setState({
+        allowSearch: !!action.args?.keyword
+      });
+      this.handleSearch(action.args?.keyword);
     }
   }
 
@@ -348,8 +492,8 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
       joinValues,
       extractValue
     } = this.props;
-    const {filteredOptions} = this.state;
-    const items = searchable ? filteredOptions : options;
+    const {filteredOptions, allowSearch} = this.state;
+    const items = searchable || allowSearch ? filteredOptions : options;
 
     const selectedItems = value2array(value, {
       multiple,
@@ -362,7 +506,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
     // 如果是搜索模式，有可能已经选择的值被过滤掉了，如果值发生了变化
     // 不应该让原来选中的值丢失
     // https://github.com/baidu/amis/issues/9946
-    if (multiple && searchable && originSelectedItems.length) {
+    if (multiple && (searchable || allowSearch) && originSelectedItems.length) {
       originSelectedItems.forEach(origin => {
         const exists = findTree(
           filteredOptions,
@@ -397,6 +541,20 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
     onChange && onChange(value);
   }
 
+  @autobind
+  async handleNodeClick(item: any) {
+    const {dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'itemClick',
+      createObject(data, {item})
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+  }
+
   async handleSearch(keyword: string) {
     const {searchApi, options, env, data, translate: __} = this.props;
 
@@ -463,11 +621,37 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
     });
   }
 
+  @autobind
+  renderItemActions(option: Option, states: any) {
+    const {itemActions, data, render} = this.props;
+
+    return render(`action/${states.index}`, itemActions || '', {
+      data: createObject(createObject(data, {...states}), option)
+    });
+  }
+
+  @autobind
+  renderSearch() {
+    const {classPrefix: ns, searchConfig, mobileUI, testIdBuilder} = this.props;
+    return (
+      <SearchBox
+        className={cx(`${ns}TreeControl-searchbox`, searchConfig?.className, {
+          'is-sticky': searchConfig?.sticky
+        })}
+        mini={false}
+        clearable={true}
+        {...omit(searchConfig, 'className', 'sticky')}
+        onSearch={this.handleSearch}
+        mobileUI={mobileUI}
+        testIdBuilder={testIdBuilder?.getChild('search')}
+      />
+    );
+  }
+
   @supportStatic()
   render() {
     const {
       className,
-      style,
       treeContainerClassName,
       classPrefix: ns,
       value,
@@ -490,6 +674,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
       hideRoot,
       rootLabel,
       autoCheckChildren,
+      autoCancelParent,
       cascade,
       rootValue,
       showIcon,
@@ -526,11 +711,16 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
       heightAuto,
       mobileUI,
       testIdBuilder,
-      popOverContainer,
+      nodeBehavior,
+      itemActions,
+      id,
+      wrapperCustomStyle,
+      themeCss,
       env
     } = this.props;
     let {highlightTxt} = this.props;
-    const {filteredOptions, keyword} = this.state;
+    const {filteredOptions, keyword, allowSearch, virtualListHeight} =
+      this.state;
 
     if (isPureVariable(highlightTxt)) {
       highlightTxt = resolveVariableAndFilter(highlightTxt, data);
@@ -546,12 +736,13 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
         deferField={deferField}
         disabled={disabled}
         onChange={this.handleChange}
+        onHandleNodeClick={this.handleNodeClick}
         joinValues={joinValues}
         extractValue={extractValue}
         delimiter={delimiter}
         placeholder={__(placeholder)}
-        options={searchable ? filteredOptions : options}
-        highlightTxt={searchable ? keyword : highlightTxt}
+        options={searchable || allowSearch ? filteredOptions : options}
+        highlightTxt={searchable || allowSearch ? keyword : highlightTxt}
         multiple={multiple}
         initiallyOpen={initiallyOpen}
         unfoldedLevel={unfoldedLevel}
@@ -565,6 +756,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
         showRadio={showRadio}
         showOutline={showOutline}
         autoCheckChildren={autoCheckChildren}
+        autoCancelParent={autoCancelParent}
         cascade={cascade}
         foldedField="collapsed"
         value={value || ''}
@@ -587,49 +779,69 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
         onDeferLoad={deferLoad}
         onExpandTree={expandTreeOptions}
         virtualThreshold={virtualThreshold}
+        virtualHeight={
+          toNumber(virtualListHeight) >= 0
+            ? toNumber(virtualListHeight)
+            : undefined
+        }
         itemHeight={toNumber(itemHeight) > 0 ? toNumber(itemHeight) : undefined}
         itemRender={menuTpl ? this.renderOptionItem : undefined}
         enableDefaultIcon={enableDefaultIcon}
         mobileUI={mobileUI}
+        nodeBehavior={nodeBehavior}
+        itemActionsRender={itemActions ? this.renderItemActions : undefined}
+        actionClassName={cx(
+          setThemeClassName({
+            ...this.props,
+            name: 'actionControlClassName',
+            id,
+            themeCss
+          })
+        )}
         testIdBuilder={testIdBuilder?.getChild('tree')}
       />
     );
 
     return (
-      <div
-        className={cx(`${ns}TreeControl`, className, treeContainerClassName, {
-          'is-sticky': searchable && searchConfig?.sticky,
-          'h-auto': heightAuto
-        })}
-        {...testIdBuilder?.getChild('control').getTestId()}
-      >
-        <Spinner
-          size="sm"
-          key="info"
-          show={loading}
-          loadingConfig={loadingConfig}
+      <>
+        <div
+          ref={this.rootRef}
+          className={cx(`${ns}TreeControl`, className, treeContainerClassName, {
+            'is-sticky': searchable && searchConfig?.sticky,
+            'h-auto': heightAuto
+          })}
+          {...testIdBuilder?.getChild('control').getTestId()}
+        >
+          <Spinner
+            size="sm"
+            key="info"
+            show={loading}
+            loadingConfig={loadingConfig}
+          />
+          {loading ? null : searchable ? (
+            <>
+              {this.renderSearch()}
+              {TreeCmpt}
+            </>
+          ) : (
+            TreeCmpt
+          )}
+        </div>
+        <CustomStyle
+          {...this.props}
+          config={{
+            wrapperCustomStyle,
+            id,
+            themeCss,
+            classNames: [
+              {
+                key: 'actionControlClassName'
+              }
+            ]
+          }}
+          env={env}
         />
-        {loading ? null : searchable ? (
-          <>
-            <SearchBox
-              className={cx(
-                `${ns}TreeControl-searchbox`,
-                searchConfig?.className,
-                {'is-sticky': searchConfig?.sticky}
-              )}
-              mini={false}
-              clearable={true}
-              {...omit(searchConfig, 'className', 'sticky')}
-              onSearch={this.handleSearch}
-              mobileUI={mobileUI}
-              testIdBuilder={testIdBuilder?.getChild('search')}
-            />
-            {TreeCmpt}
-          </>
-        ) : (
-          TreeCmpt
-        )}
-      </div>
+      </>
     );
   }
 }
diff --git a/packages/amis/src/renderers/Form/Transfer.tsx b/packages/amis/src/renderers/Form/Transfer.tsx
index ba5c89642..1a7dae278 100644
--- a/packages/amis/src/renderers/Form/Transfer.tsx
+++ b/packages/amis/src/renderers/Form/Transfer.tsx
@@ -362,6 +362,12 @@ export class BaseTransferRenderer<
     return option;
   }
 
+  @autobind
+  getResult(payload: any) {
+    const result = payload.data.options || payload.data.items || payload.data;
+    return result;
+  }
+
   @autobind
   async handleSearch(
     term: string,
@@ -393,8 +399,7 @@ export class BaseTransferRenderer<
           throw new Error(__(payload.msg || 'networkError'));
         }
 
-        const result =
-          payload.data.options || payload.data.items || payload.data;
+        const result = this.getResult(payload);
         if (!Array.isArray(result)) {
           throw new Error(__('CRUD.invalidArray'));
         }
diff --git a/packages/amis/src/renderers/Form/TransferPicker.tsx b/packages/amis/src/renderers/Form/TransferPicker.tsx
index e9c133bf7..d7a91711f 100644
--- a/packages/amis/src/renderers/Form/TransferPicker.tsx
+++ b/packages/amis/src/renderers/Form/TransferPicker.tsx
@@ -32,6 +32,8 @@ export interface TransferPickerControlSchema
    * 弹窗大小
    */
   pickerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  onlyChildren?: boolean;
 }
 
 export interface TabsTransferProps
@@ -55,6 +57,20 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
     dispatchEvent(name, resolveEventData(this.props, {value}));
   }
 
+  @autobind
+  // 增加点击选项事件函数
+  async onItemClick(item: Object) {
+    // 触发渲染器事件
+    const {dispatchEvent} = this.props;
+    const rendererEvent = await dispatchEvent(
+      'itemClick',
+      resolveEventData(this.props, {item})
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
+  }
+
   // 动作
   doAction(action: ActionObject) {
     const {resetValue, onChange, formStore, store, name} = this.props;
@@ -110,6 +126,7 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
       data,
       popOverContainer,
       placeholder,
+      onlyChildren,
       autoCheckChildren = true,
       initiallyOpen = true
     } = this.props;
@@ -136,9 +153,11 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
           placeholder={placeholder}
           borderMode={borderMode}
           selectMode={selectMode}
+          onlyChildren={onlyChildren}
           value={selectedOptions}
           disabled={disabled}
           options={options}
+          onItemClick={this.onItemClick}
           onChange={this.handleChange}
           option2value={this.option2value}
           sortable={sortable}
diff --git a/packages/amis/src/renderers/Form/TreeSelect.tsx b/packages/amis/src/renderers/Form/TreeSelect.tsx
index edf11f0ba..c39580fc3 100644
--- a/packages/amis/src/renderers/Form/TreeSelect.tsx
+++ b/packages/amis/src/renderers/Form/TreeSelect.tsx
@@ -5,7 +5,8 @@ import {
   findTreeIndex,
   getVariable,
   hasAbility,
-  resolveEventData
+  resolveEventData,
+  setThemeClassName
 } from 'amis-core';
 import {PopOver} from 'amis-core';
 import {PopUp, SpinnerExtraProps} from 'amis-ui';
@@ -14,8 +15,8 @@ import {
   OptionsControl,
   OptionsControlProps,
   Option,
-  FormOptionsControl,
-  toNumber
+  toNumber,
+  CustomStyle
 } from 'amis-core';
 
 import {Tree as TreeSelector} from 'amis-ui';
@@ -30,12 +31,14 @@ import {autobind, getTreeAncestors, isMobile, createObject} from 'amis-core';
 import {findDOMNode} from 'react-dom';
 import {normalizeOptions} from 'amis-core';
 import {ActionObject} from 'amis-core';
-import {FormOptionsSchema, SchemaApi} from '../../Schema';
+import {FormOptionsSchema, SchemaApi, SchemaCollection} from '../../Schema';
 import {supportStatic} from './StaticHoc';
 import {TooltipWrapperSchema} from '../TooltipWrapper';
 import type {ItemRenderStates} from 'amis-ui/lib/components/Selection';
 import type {TestIdBuilder} from 'amis-core';
 
+type NodeBehaviorType = 'unfold' | 'check';
+
 /**
  * Tree 下拉选择框。
  * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/form/tree
@@ -68,6 +71,11 @@ export interface TreeSelectControlSchema extends FormOptionsSchema {
    */
   cascade?: boolean;
 
+  /**
+   * 节点行为配置，默认为选中
+   */
+  nodeBehavior?: NodeBehaviorType[];
+
   /**
    * 选父级的时候是否把子节点的值也包含在内。
    */
@@ -128,6 +136,16 @@ export interface TreeSelectControlSchema extends FormOptionsSchema {
    */
   menuTpl?: string;
 
+  /**
+   * 子节点取消时自动取消父节点的值，默认为false
+   */
+  autoCancelParent?: boolean;
+
+  /**
+   * 自定义节点操作栏区域
+   */
+  itemActions?: SchemaCollection;
+
   /**
    * 是否为选项添加默认的Icon，默认值为true
    */
@@ -602,6 +620,20 @@ export default class TreeSelectControl extends React.Component<
     onChange && onChange(value);
   }
 
+  @autobind
+  async handleNodeClick(item: any) {
+    const {dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'itemClick',
+      createObject(data, {item})
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+  }
+
   /** 下拉框选项渲染 */
   @autobind
   renderOptionItem(option: Option, states: ItemRenderStates) {
@@ -687,13 +719,19 @@ export default class TreeSelectControl extends React.Component<
       selfDisabledAffectChildren,
       showOutline,
       autoCheckChildren,
+      autoCancelParent,
       hideRoot,
       virtualThreshold,
       itemHeight,
       menuTpl,
       enableDefaultIcon,
       mobileUI,
-      testIdBuilder
+      testIdBuilder,
+      nodeBehavior,
+      itemActions,
+      classnames: cx,
+      id,
+      themeCss
     } = this.props;
 
     let filtedOptions =
@@ -706,6 +744,7 @@ export default class TreeSelectControl extends React.Component<
         classPrefix={ns}
         onRef={this.domRef}
         onlyChildren={onlyChildren}
+        onHandleNodeClick={this.handleNodeClick}
         onlyLeaf={onlyLeaf}
         labelField={labelField}
         valueField={valueField}
@@ -723,6 +762,7 @@ export default class TreeSelectControl extends React.Component<
         unfoldedLevel={unfoldedLevel}
         withChildren={withChildren}
         autoCheckChildren={autoCheckChildren}
+        autoCancelParent={autoCancelParent}
         rootLabel={__(rootLabel)}
         rootValue={rootValue}
         showIcon={showIcon}
@@ -757,11 +797,30 @@ export default class TreeSelectControl extends React.Component<
         itemRender={menuTpl ? this.renderOptionItem : undefined}
         enableDefaultIcon={enableDefaultIcon}
         mobileUI={mobileUI}
+        nodeBehavior={nodeBehavior}
+        itemActionsRender={itemActions ? this.renderItemActions : undefined}
+        actionClassName={cx(
+          setThemeClassName({
+            ...this.props,
+            name: 'actionControlClassName',
+            id,
+            themeCss
+          })
+        )}
         testIdBuilder={testIdBuilder}
       />
     );
   }
 
+  @autobind
+  renderItemActions(option: Option, states: any) {
+    const {itemActions, data, render} = this.props;
+
+    return render(`action/${states.index}`, itemActions || '', {
+      data: createObject(createObject(data, {...states}), option)
+    });
+  }
+
   @supportStatic()
   render() {
     const {
@@ -786,7 +845,10 @@ export default class TreeSelectControl extends React.Component<
       translate: __,
       env,
       loadingConfig,
-      testIdBuilder
+      testIdBuilder,
+      wrapperCustomStyle,
+      id,
+      themeCss
     } = this.props;
     const {isOpened} = this.state;
     const resultValue = multiple
@@ -796,85 +858,101 @@ export default class TreeSelectControl extends React.Component<
       : '';
 
     return (
-      <div
-        ref={this.container}
-        className={cx(`TreeSelectControl`, className)}
-        {...testIdBuilder?.getTestId()}
-      >
-        <ResultBox
-          popOverContainer={popOverContainer || env.getModalContainer}
-          maxTagCount={maxTagCount}
-          overflowTagPopover={overflowTagPopover}
-          disabled={disabled}
-          ref={this.targetRef}
-          placeholder={__(placeholder ?? 'placeholder.empty')}
-          inputPlaceholder={''}
-          className={cx(`TreeSelect`, {
-            'TreeSelect--inline': inline,
-            'TreeSelect--single': !multiple,
-            'TreeSelect--multi': multiple,
-            'TreeSelect--searchable':
-              searchable || isEffectiveApi(autoComplete),
-            'is-opened': this.state.isOpened,
-            'is-disabled': disabled
-          })}
-          result={resultValue}
-          onResultClick={this.handleOutClick}
-          value={this.state.inputValue}
-          onChange={this.handleInputChange}
-          onResultChange={this.handleResultChange}
-          itemRender={this.renderItem}
-          onKeyPress={this.handleKeyPress}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-          onKeyDown={this.handleInputKeyDown}
-          clearable={clearable}
-          allowInput={
-            !mobileUI &&
-            (searchable || isEffectiveApi(autoComplete)) &&
-            (multiple || !resultValue)
-          }
-          hasDropDownArrow
-          readOnly={mobileUI}
-          mobileUI={mobileUI}
-          testIdBuilder={testIdBuilder?.getChild('result-box')}
+      <>
+        <div
+          ref={this.container}
+          className={cx(`TreeSelectControl`, className)}
+          {...testIdBuilder?.getTestId()}
         >
-          {loading ? (
-            <Spinner loadingConfig={loadingConfig} size="sm" />
-          ) : undefined}
-        </ResultBox>
-        {!mobileUI && isOpened ? (
-          <Overlay
-            container={popOverContainer || (() => this.container.current)}
-            target={() => this.target}
-            show
+          <ResultBox
+            popOverContainer={popOverContainer || env.getModalContainer}
+            maxTagCount={maxTagCount}
+            overflowTagPopover={overflowTagPopover}
+            disabled={disabled}
+            ref={this.targetRef}
+            placeholder={__(placeholder ?? 'placeholder.empty')}
+            inputPlaceholder={''}
+            className={cx(`TreeSelect`, {
+              'TreeSelect--inline': inline,
+              'TreeSelect--single': !multiple,
+              'TreeSelect--multi': multiple,
+              'TreeSelect--searchable':
+                searchable || isEffectiveApi(autoComplete),
+              'is-opened': this.state.isOpened,
+              'is-disabled': disabled
+            })}
+            result={resultValue}
+            onResultClick={this.handleOutClick}
+            value={this.state.inputValue}
+            onChange={this.handleInputChange}
+            onResultChange={this.handleResultChange}
+            itemRender={this.renderItem}
+            onKeyPress={this.handleKeyPress}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            onKeyDown={this.handleInputKeyDown}
+            clearable={clearable}
+            allowInput={
+              !mobileUI &&
+              (searchable || isEffectiveApi(autoComplete)) &&
+              (multiple || !resultValue)
+            }
+            hasDropDownArrow
+            readOnly={mobileUI}
+            mobileUI={mobileUI}
+            testIdBuilder={testIdBuilder?.getChild('result-box')}
           >
-            <PopOver
-              classPrefix={ns}
-              className={`${ns}TreeSelect-popover`}
-              style={{
-                minWidth: this.target ? this.target.offsetWidth : undefined
-              }}
+            {loading ? (
+              <Spinner loadingConfig={loadingConfig} size="sm" />
+            ) : undefined}
+          </ResultBox>
+          {!mobileUI && isOpened ? (
+            <Overlay
+              container={popOverContainer || (() => this.container.current)}
+              target={() => this.target}
+              show
+            >
+              <PopOver
+                classPrefix={ns}
+                className={`${ns}TreeSelect-popover`}
+                style={{
+                  minWidth: this.target ? this.target.offsetWidth : undefined
+                }}
+                onHide={this.close}
+                overlay
+              >
+                {this.renderOuter()}
+              </PopOver>
+            </Overlay>
+          ) : null}
+          {mobileUI ? (
+            <PopUp
+              container={env.getModalContainer}
+              className={cx(`${ns}TreeSelect-popup`)}
+              isShow={isOpened}
               onHide={this.close}
-              overlay
+              showConfirm
+              onConfirm={this.handleConfirm}
             >
               {this.renderOuter()}
-            </PopOver>
-          </Overlay>
-        ) : null}
-        {mobileUI ? (
-          <PopUp
-            container={env.getModalContainer}
-            className={cx(`${ns}TreeSelect-popup`)}
-            isShow={isOpened}
-            onHide={this.close}
-            showConfirm
-            onConfirm={this.handleConfirm}
-          >
-            {this.renderOuter()}
-          </PopUp>
-        ) : null}
-      </div>
+            </PopUp>
+          ) : null}
+        </div>
+        <CustomStyle
+          {...this.props}
+          config={{
+            wrapperCustomStyle,
+            id,
+            themeCss,
+            classNames: [
+              {
+                key: 'actionControlClassName'
+              }
+            ]
+          }}
+          env={env}
+        />
+      </>
     );
   }
 }
diff --git a/packages/amis/src/renderers/Mapping.tsx b/packages/amis/src/renderers/Mapping.tsx
index 79a0a886f..c56a977c0 100644
--- a/packages/amis/src/renderers/Mapping.tsx
+++ b/packages/amis/src/renderers/Mapping.tsx
@@ -91,6 +91,8 @@ export const Store = StoreNode.named('MappingStore')
                 ? data.options
                 : Array.isArray(data.items)
                 ? data.items
+                : Array.isArray(data.records)
+                ? data.records
                 : data
             );
           } else {
@@ -144,6 +146,8 @@ export interface MappingProps
   extends Omit<RendererProps, 'store'>,
     Omit<MappingSchema, 'type' | 'className'> {
   store: IStore;
+  renderValue: (map: any, key: any) => String;
+  renderViewValue: (value: any, key: any) => React.ReactNode;
 }
 
 export const MappingField = withStore(props =>
@@ -231,14 +235,14 @@ export const MappingField = withStore(props =>
         typeof key !== 'undefined' &&
         map &&
         (value =
-          map[key] ??
+          this.renderValue(map, key) ??
           (key === true && map['1']
             ? map['1']
             : key === false && map['0']
             ? map['0']
             : map['*'])) !== undefined
       ) {
-        viewValue = this.renderViewValue(value);
+        viewValue = this.renderViewValue(value, key);
       }
 
       return (
@@ -251,9 +255,14 @@ export const MappingField = withStore(props =>
         </span>
       );
     }
-
-    renderViewValue(value: any) {
-      const {render, itemSchema, data, labelField, name} = this.props;
+    renderViewValue(value: any, key: any) {
+      const {render, itemSchema, renderViewValue, data, labelField, name} =
+        this.props;
+      // 检查是否有外部renderViewValue函数传入
+      if (renderViewValue) {
+        // 使用外部传入的renderViewValue函数
+        return renderViewValue(value, key);
+      }
 
       if (!itemSchema) {
         let label = value;
@@ -296,6 +305,15 @@ export const MappingField = withStore(props =>
       });
     }
 
+    // 扩展函数,用于外围扩充
+    renderValue(map: any, key: any) {
+      const {renderValue} = this.props;
+      if (renderValue) {
+        return renderValue(map, key);
+      }
+      return map[key];
+    }
+
     render() {
       const {style, defaultValue, data} = this.props;
       let mapKey = getPropValue(this.props);
diff --git a/packages/amis/src/renderers/Page.tsx b/packages/amis/src/renderers/Page.tsx
index 81116ec30..c34faeae8 100644
--- a/packages/amis/src/renderers/Page.tsx
+++ b/packages/amis/src/renderers/Page.tsx
@@ -107,6 +107,13 @@ export interface PageSchema extends BaseSchema, SpinnerExtraProps {
    */
   asideSticky?: boolean;
 
+  /**
+   * 边栏位置
+   *
+   * @default 'left'
+   */
+  asidePosition?: 'left' | 'right';
+
   /**
    * 边栏最小宽度
    */
@@ -253,6 +260,7 @@ export default class Page extends React.Component<PageProps> {
     toolbarClassName: '',
     messages: {},
     asideSticky: true,
+    asidePosition: 'left',
     pullRefresh: {
       disabled: true
     }
@@ -666,9 +674,14 @@ export default class Page extends React.Component<PageProps> {
 
   @autobind
   handleResizeMouseMove(e: MouseEvent) {
-    const {asideMinWidth = 160, asideMaxWidth = 350} = this.props;
+    const {
+      asideMinWidth = 160,
+      asideMaxWidth = 350,
+      asidePosition
+    } = this.props;
     const dx = e.clientX - this.startX;
-    const mx = this.startWidth + dx;
+    const mx =
+      asidePosition === 'right' ? this.startWidth - dx : this.startWidth + dx;
     const width = Math.min(Math.max(mx, asideMinWidth), asideMaxWidth);
     this.codeWrap.style.cssText += `width: ${width}px`;
   }
@@ -994,7 +1007,8 @@ export default class Page extends React.Component<PageProps> {
       id,
       wrapperCustomStyle,
       env,
-      themeCss
+      themeCss,
+      asidePosition
     } = this.props;
 
     const subProps = {
@@ -1018,6 +1032,7 @@ export default class Page extends React.Component<PageProps> {
           `Page`,
           hasAside ? `Page--withSidebar` : '',
           hasAside && asideSticky ? `Page--asideSticky` : '',
+          hasAside && asidePosition ? `Page--${asidePosition}Aside` : '',
           className,
           setThemeClassName({
             name: 'baseControlClassName',
@@ -1159,12 +1174,7 @@ export default class Page extends React.Component<PageProps> {
   }
 }
 
-@Renderer({
-  type: 'page',
-  storeType: ServiceStore.name,
-  isolateScope: true
-})
-export class PageRenderer extends Page {
+export class PageRendererBase extends Page {
   static contextType = ScopedContext;
 
   constructor(props: PageProps, context: IScopedContext) {
@@ -1290,3 +1300,10 @@ export class PageRenderer extends Page {
     return store.data;
   }
 }
+
+@Renderer({
+  type: 'page',
+  storeType: ServiceStore.name,
+  isolateScope: true
+})
+export class PageRenderer extends PageRendererBase {}
diff --git a/packages/amis/src/renderers/PopOver.tsx b/packages/amis/src/renderers/PopOver.tsx
index 094178f75..407cc5d57 100644
--- a/packages/amis/src/renderers/PopOver.tsx
+++ b/packages/amis/src/renderers/PopOver.tsx
@@ -125,6 +125,7 @@ export interface PopOverProps extends RendererProps {
   popOver: boolean | SchemaPopOverObject;
   onPopOverOpened: (popover: any) => void;
   onPopOverClosed: (popover: any) => void;
+  textOverflow?: 'noWrap' | 'ellipsis' | 'default';
 }
 
 export interface PopOverState {
@@ -162,10 +163,19 @@ export const HocPopOver =
         this.target = ref;
       }
 
-      openPopOver() {
+      openPopOver(event: any) {
         const onPopOverOpened = this.props.onPopOverOpened;
         lastOpenedInstance?.closePopOver();
         lastOpenedInstance = this;
+        const e = event.currentTarget;
+        // 如果内容不超出，不需要弹出
+        if (
+          this.getClassName() === 'ellipsis' &&
+          e &&
+          e.offsetWidth >= e.scrollWidth
+        ) {
+          return;
+        }
         this.setState(
           {
             isOpened: true
@@ -192,7 +202,7 @@ export const HocPopOver =
 
       closePopOverLater() {
         // 5s 后自动关闭。
-        this.timer = setTimeout(this.closePopOver, 2000);
+        this.timer = setTimeout(this.closePopOver, 500);
       }
 
       clearCloseTimer() {
@@ -234,6 +244,11 @@ export const HocPopOver =
             type: 'panel',
             ...popOver
           };
+        } else if (this.getClassName() === 'ellipsis') {
+          schema = {
+            type: 'panel',
+            body: `\${${name}}`
+          };
         }
 
         return schema || 'error';
@@ -241,7 +256,8 @@ export const HocPopOver =
 
       getOffset() {
         const {popOver} = this.props;
-        if (typeof popOver === 'boolean' || !popOver.offset) {
+
+        if (!popOver || typeof popOver === 'boolean' || !popOver.offset) {
           return undefined;
         }
 
@@ -273,15 +289,19 @@ export const HocPopOver =
         }
 
         const content = render('popover-detail', this.buildSchema(), {
-          className: cx((popOver as SchemaPopOverObject).className)
+          className: cx(popOver && (popOver as SchemaPopOverObject).className)
         }) as JSX.Element;
 
         if (!popOverContainer) {
           popOverContainer = () => findDOMNode(this);
         }
 
+        const selectClassName = this.getClassName();
+        const defaultPositon =
+          selectClassName === 'ellipsis' ? 'right-top-center-bottom' : 'center';
         const position =
           (popOver && (popOver as SchemaPopOverObject).position) || '';
+
         const isFixed = /^fixed\-/.test(position);
         return isFixed ? (
           <RootClose
@@ -312,7 +332,7 @@ export const HocPopOver =
         ) : (
           <Overlay
             container={popOverContainer}
-            placement={position || config.position || 'center'}
+            placement={position || config.position || defaultPositon}
             target={() => this.target}
             onHide={this.closePopOver}
             rootClose
@@ -322,16 +342,18 @@ export const HocPopOver =
               classPrefix={ns}
               className={cx(
                 'PopOverAble-popover',
-                (popOver as SchemaPopOverObject).popOverClassName
+                popOver && (popOver as SchemaPopOverObject).popOverClassName
               )}
               offset={this.getOffset()}
               onMouseLeave={
-                (popOver as SchemaPopOverObject)?.trigger === 'hover'
+                (popOver as SchemaPopOverObject)?.trigger === 'hover' ||
+                selectClassName
                   ? this.closePopOver
                   : undefined
               }
               onMouseEnter={
-                (popOver as SchemaPopOverObject)?.trigger === 'hover'
+                (popOver as SchemaPopOverObject)?.trigger === 'hover' ||
+                selectClassName
                   ? this.clearCloseTimer
                   : undefined
               }
@@ -341,6 +363,14 @@ export const HocPopOver =
           </Overlay>
         );
       }
+      // 便于外围扩充函数，勿动
+      getClassName() {
+        const {textOverflow, getClassName} = this.props;
+        if (getClassName) {
+          return getClassName();
+        }
+        return textOverflow === 'default' ? '' : textOverflow;
+      }
 
       render() {
         const {
@@ -349,12 +379,15 @@ export const HocPopOver =
           popOverEnable,
           className,
           noHoc,
+          width,
           classnames: cx,
           showIcon
         } = this.props;
 
+        const selectClassName = this.getClassName();
+
         if (
-          !popOver ||
+          (!popOver && !selectClassName) ||
           popOverEnabled === false ||
           noHoc ||
           popOverEnable === false
@@ -364,7 +397,7 @@ export const HocPopOver =
 
         const triggerProps: any = {};
         const trigger = (popOver as SchemaPopOverObject)?.trigger;
-        if (trigger === 'hover') {
+        if (trigger === 'hover' || selectClassName === 'ellipsis') {
           triggerProps.onMouseEnter = this.openPopOver;
           triggerProps.onMouseLeave = this.closePopOverLater;
         } else {
@@ -375,11 +408,13 @@ export const HocPopOver =
           <Component
             {...this.props}
             className={cx(`Field--popOverAble`, className, {
-              in: this.state.isOpened
+              'in': this.state.isOpened,
+              'Field--popOverAble--flex':
+                width && selectClassName === 'ellipsis'
             })}
             ref={config.targetOutter ? this.targetRef : undefined}
           >
-            {(popOver as SchemaPopOverObject)?.showIcon !== false ? (
+            {(popOver as SchemaPopOverObject)?.showIcon !== false && popOver ? (
               <>
                 <Component {...this.props} contentsOnly noHoc />
                 <span
@@ -395,8 +430,14 @@ export const HocPopOver =
             ) : (
               <>
                 <div
-                  className={cx('Field-popOverWrap')}
+                  className={cx(
+                    'Field-popOverWrap',
+                    selectClassName
+                      ? 'Field-popOverWrap-' + selectClassName
+                      : ''
+                  )}
                   {...triggerProps}
+                  style={{width: selectClassName && width}}
                   ref={config.targetOutter ? undefined : this.targetRef}
                 >
                   <Component {...this.props} contentsOnly noHoc />
diff --git a/packages/amis/src/renderers/Steps.tsx b/packages/amis/src/renderers/Steps.tsx
index daf2656f8..dd9ed641b 100644
--- a/packages/amis/src/renderers/Steps.tsx
+++ b/packages/amis/src/renderers/Steps.tsx
@@ -85,6 +85,11 @@ export interface StepsSchema extends BaseSchema {
    * 点状步骤条
    */
   progressDot?: boolean;
+
+  /**
+   * 切换图标位置
+   */
+  iconPosition: false;
 }
 
 export interface StepsProps
@@ -98,6 +103,7 @@ export function StepsCmpt(props: StepsProps) {
     steps,
     status,
     mode,
+    iconPosition,
     labelPlacement,
     progressDot,
     data,
@@ -163,6 +169,7 @@ export function StepsCmpt(props: StepsProps) {
       style={style}
       status={statusValue}
       mode={mode}
+      iconPosition={iconPosition}
       progressDot={progressDot}
       labelPlacement={labelPlacement}
       mobileUI={mobileUI}
diff --git a/packages/amis/src/renderers/Table/TableCell.tsx b/packages/amis/src/renderers/Table/TableCell.tsx
index 4993acb55..f34dba8e8 100644
--- a/packages/amis/src/renderers/Table/TableCell.tsx
+++ b/packages/amis/src/renderers/Table/TableCell.tsx
@@ -199,10 +199,10 @@ export class TableCell extends React.Component<TableCellProps> {
   type: 'cell',
   name: 'table-cell'
 })
-@QuickEdit()
 @PopOverable({
   targetOutter: true
 })
+@QuickEdit()
 @Copyable()
 @observer
 export class TableCellRenderer extends TableCell {
diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx
index b63caa0e9..2c15d8af2 100644
--- a/packages/amis/src/renderers/Table/index.tsx
+++ b/packages/amis/src/renderers/Table/index.tsx
@@ -43,7 +43,8 @@ import {
   isExpression,
   getTree,
   resolveVariableAndFilterForAsync,
-  getMatchedEventTargets
+  getMatchedEventTargets,
+  loopTooMuch
 } from 'amis-core';
 import {
   Button,
@@ -724,6 +725,11 @@ export default class Table extends React.Component<TableProps, object> {
 
       if (prev === resolved) {
         updateRows = false;
+      } else if (
+        loopTooMuch(`Table.syncRows${store.id}`) &&
+        isEqual(prev, resolved)
+      ) {
+        updateRows = false;
       } else {
         updateRows = true;
         rows = Array.isArray(resolved) ? resolved : [];
diff --git a/packages/amis/src/renderers/Tabs.tsx b/packages/amis/src/renderers/Tabs.tsx
index 607eb6673..f9552bfcc 100644
--- a/packages/amis/src/renderers/Tabs.tsx
+++ b/packages/amis/src/renderers/Tabs.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import {Renderer, RendererProps, resolveEventData} from 'amis-core';
-import {ActionObject, Schema, SchemaNode} from 'amis-core';
+import {
+  CustomStyle,
+  Renderer,
+  RendererProps,
+  resolveEventData,
+  setThemeClassName
+} from 'amis-core';
+import {ActionObject} from 'amis-core';
 import find from 'lodash/find';
 import {
   isVisible,
@@ -13,7 +19,6 @@ import {
 } from 'amis-core';
 import findIndex from 'lodash/findIndex';
 import {Tabs as CTabs, Tab} from 'amis-ui';
-import {ClassNamesFn} from 'amis-core';
 import {
   BaseSchema,
   SchemaClassName,
@@ -24,7 +29,7 @@ import {
 } from '../Schema';
 import {ActionSchema} from './Action';
 import {filter} from 'amis-core';
-import {resolveVariable, tokenize, resolveVariableAndFilter} from 'amis-core';
+import {resolveVariableAndFilter} from 'amis-core';
 import {FormHorizontal} from 'amis-core';
 import {str2AsyncFunction} from 'amis-core';
 import {ScopedContext, IScopedContext} from 'amis-core';
@@ -226,6 +231,7 @@ export interface TabsProps
 
 interface TabSource extends TabSchema {
   data?: any;
+  themeCss?: string;
 }
 
 export interface TabsState {
@@ -236,7 +242,7 @@ export interface TabsState {
 }
 
 export type TabsRendererEvent = 'change';
-export type TabsRendererAction = 'changeActiveKey';
+export type TabsRendererAction = 'changeActiveKey' | 'deleteTab';
 
 export default class Tabs extends React.Component<TabsProps, TabsState> {
   static defaultProps: Partial<TabsProps> = {
@@ -582,10 +588,29 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   @autobind
-  handleClose(index: number, key: string | number) {
+  async handleClose(key: any, isHash?: boolean) {
     const originTabs = this.state.localTabs.concat();
 
-    originTabs.splice(index, 1);
+    // 获取删除元素项下标
+    const tabIndex = originTabs?.findIndex(
+      (item, index) => key === (isHash ? item.hash : item.hash ?? index)
+    );
+
+    if (tabIndex === -1) {
+      return;
+    }
+
+    originTabs.splice(tabIndex, 1);
+    const {dispatchEvent} = this.props;
+    const rendererEvent = await dispatchEvent(
+      'delete',
+      resolveEventData(this.props, {
+        value: key
+      })
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     this.setState({
       localTabs: originTabs
@@ -687,10 +712,14 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     const tmpKey = Number(args?.activeKey);
     let activeKey = isNaN(tmpKey) ? args?.activeKey : tmpKey;
 
+    const deleteHash = args?.deleteHash;
+
     if (actionType === 'changeActiveKey') {
       this.handleSelect(
         typeof activeKey === 'number' ? activeKey - 1 : activeKey
       );
+    } else if (actionType === 'deleteTab') {
+      this.handleClose(deleteHash, true);
     }
   }
 
@@ -734,10 +763,28 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   renderToolbar() {
-    const {toolbar, render, classnames: cx, toolbarClassName} = this.props;
+    const {
+      toolbar,
+      render,
+      classnames: cx,
+      toolbarClassName,
+      id,
+      themeCss
+    } = this.props;
 
     return toolbar ? (
-      <div className={cx(`Tabs-toolbar`, toolbarClassName)}>
+      <div
+        className={cx(
+          `Tabs-toolbar`,
+          toolbarClassName,
+          setThemeClassName({
+            ...this.props,
+            name: 'toolbarControlClassName',
+            id,
+            themeCss
+          })
+        )}
+      >
         {render('toolbar', toolbar)}
       </div>
     ) : null;
@@ -777,7 +824,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       disabled,
       mobileUI,
       swipeable,
-      testIdBuilder
+      testIdBuilder,
+      id,
+      wrapperCustomStyle,
+      themeCss,
+      env
     } = this.props;
 
     const mode = tabsMode || dMode;
@@ -791,6 +842,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
     const {localTabs: tabs, isFromSource} = this.state;
     let children: Array<JSX.Element | null> = [];
+    let childrenCustomStyle: Array<JSX.Element | null> = [];
 
     // 是否从 source 数据中生成
     if (isFromSource) {
@@ -826,6 +878,15 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
             testIdBuilder={testIdBuilder?.getChild(
               `tab-${typeof tab.title === 'string' ? tab.title : index}`
             )}
+            className={cx(
+              tab.className,
+              setThemeClassName({
+                ...tab,
+                name: 'panelControlClassName',
+                id: tab.id,
+                themeCss: tab.themeCss
+              })
+            )}
           >
             {render(
               `item/${index}`,
@@ -841,6 +902,28 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
           </Tab>
         ) : null;
       });
+
+      childrenCustomStyle = tabs.map((tab: TabSource, index: number) => {
+        const ctx = createObject(
+          data,
+          isObject(tab.data) ? {index, ...tab.data} : {item: tab.data, index}
+        );
+        return isVisible(tab, ctx) ? (
+          <CustomStyle
+            {...tab}
+            config={{
+              id: tab.id,
+              themeCss: tab.themeCss,
+              classNames: [
+                {
+                  key: 'panelControlClassName'
+                }
+              ]
+            }}
+            env={this.props.env}
+          />
+        ) : null;
+      });
     } else {
       children = tabs.map((tab, index) =>
         isVisible(tab, data) ? (
@@ -870,6 +953,15 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
             testIdBuilder={testIdBuilder?.getChild(
               `tab-${typeof tab.title === 'string' ? tab.title : index}`
             )}
+            className={cx(
+              tab.className,
+              setThemeClassName({
+                ...tab,
+                name: 'panelControlClassName',
+                id: tab.id,
+                themeCss: tab.themeCss
+              })
+            )}
           >
             {this.renderTab
               ? this.renderTab(tab, this.props, index)
@@ -888,39 +980,133 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
           </Tab>
         ) : null
       );
+
+      childrenCustomStyle = tabs.map(tab =>
+        isVisible(tab, data) ? (
+          <CustomStyle
+            config={{
+              id: tab.id,
+              themeCss: tab.themeCss,
+              classNames: [
+                {
+                  key: 'panelControlClassName'
+                }
+              ]
+            }}
+            env={this.props.env}
+          />
+        ) : null
+      );
     }
 
     return (
-      <CTabs
-        addBtnText={__(addBtnText || 'add')}
-        classPrefix={ns}
-        classnames={cx}
-        mode={mode}
-        closable={closable}
-        className={className}
-        style={style}
-        contentClassName={contentClassName}
-        linksClassName={linksClassName}
-        onSelect={this.handleSelect}
-        activeKey={this.state.activeKey}
-        toolbar={this.renderToolbar()}
-        addable={addable}
-        onAdd={this.handleAdd}
-        onClose={this.handleClose}
-        draggable={draggable}
-        onDragChange={this.handleDragChange}
-        showTip={showTip}
-        showTipClassName={showTipClassName}
-        editable={editable}
-        onEdit={this.handleEdit}
-        sidePosition={sidePosition}
-        collapseOnExceed={collapseOnExceed}
-        collapseBtnLabel={collapseBtnLabel}
-        mobileUI={mobileUI}
-        testIdBuilder={testIdBuilder}
-      >
-        {children}
-      </CTabs>
+      <>
+        <CTabs
+          addBtnText={__(addBtnText || 'add')}
+          classPrefix={ns}
+          classnames={cx}
+          mode={mode}
+          closable={closable}
+          className={cx(
+            className,
+            setThemeClassName({
+              ...this.props,
+              name: 'wrapperCustomStyle',
+              id,
+              themeCss: wrapperCustomStyle
+            })
+          )}
+          style={style}
+          contentClassName={cx(
+            contentClassName,
+            setThemeClassName({
+              ...this.props,
+              name: 'contentControlClassName',
+              id,
+              themeCss
+            })
+          )}
+          linksClassName={linksClassName}
+          titleClassName={cx(
+            setThemeClassName({
+              ...this.props,
+              name: 'titleControlClassName',
+              id,
+              themeCss
+            })
+          )}
+          onSelect={this.handleSelect}
+          activeKey={this.state.activeKey}
+          toolbar={this.renderToolbar()}
+          addable={addable}
+          onAdd={this.handleAdd}
+          onClose={this.handleClose}
+          draggable={draggable}
+          onDragChange={this.handleDragChange}
+          showTip={showTip}
+          showTipClassName={showTipClassName}
+          editable={editable}
+          onEdit={this.handleEdit}
+          sidePosition={sidePosition}
+          collapseOnExceed={collapseOnExceed}
+          collapseBtnLabel={collapseBtnLabel}
+          mobileUI={mobileUI}
+          testIdBuilder={testIdBuilder}
+        >
+          {children}
+        </CTabs>
+        {childrenCustomStyle}
+        <CustomStyle
+          {...this.props}
+          config={{
+            wrapperCustomStyle,
+            id,
+            themeCss,
+            classNames: [
+              {
+                key: 'titleControlClassName',
+                weights: {
+                  default: {
+                    important: true,
+                    inner: '> a'
+                  },
+                  focused: {
+                    important: true,
+                    suf: '.is-active',
+                    inner: '> a'
+                  },
+                  hover: {
+                    important: true,
+                    inner: '> a'
+                  },
+                  disabled: {
+                    important: true,
+                    suf: '.is-disabled',
+                    inner: '> a'
+                  }
+                }
+              },
+              {
+                key: 'toolbarControlClassName',
+                weights: {
+                  default: {
+                    important: true
+                  }
+                }
+              },
+              {
+                key: 'contentControlClassName',
+                weights: {
+                  default: {
+                    important: true
+                  }
+                }
+              }
+            ]
+          }}
+          env={env}
+        />
+      </>
     );
   }