diff --git a/src/ActionGroup/demos/basic.tsx b/src/ActionGroup/demos/basic.tsx
index 281124b8..961d7446 100644
--- a/src/ActionGroup/demos/basic.tsx
+++ b/src/ActionGroup/demos/basic.tsx
@@ -1,3 +1,6 @@
+/**
+ * title: 基础使用
+ */
import { ActionGroup } from '@ant-design/pro-editor';
export default () => {
diff --git a/src/ActionGroup/demos/config.tsx b/src/ActionGroup/demos/config.tsx
index fa0fa101..7ab6ccd8 100644
--- a/src/ActionGroup/demos/config.tsx
+++ b/src/ActionGroup/demos/config.tsx
@@ -1,3 +1,7 @@
+/**
+ * title: 配置使用
+ * description: 通过配置 `items` 渲染整个内容
+ */
import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ActionGroup } from '@ant-design/pro-editor';
import { message } from 'antd';
diff --git a/src/ActionGroup/demos/custom.tsx b/src/ActionGroup/demos/custom.tsx
index a650b04e..723548d3 100644
--- a/src/ActionGroup/demos/custom.tsx
+++ b/src/ActionGroup/demos/custom.tsx
@@ -1,3 +1,7 @@
+/**
+ * title: 自定义
+ * description: 通过 `render` 可以自定义渲染特殊的操作内容
+ */
import { ActionGroup, ActionIcon } from '@ant-design/pro-editor';
import { Card, Input, Rate, Switch } from 'antd';
diff --git a/src/ActionGroup/demos/dropMenu.tsx b/src/ActionGroup/demos/dropMenu.tsx
index a4d7a967..fbc44e12 100644
--- a/src/ActionGroup/demos/dropMenu.tsx
+++ b/src/ActionGroup/demos/dropMenu.tsx
@@ -1,3 +1,8 @@
+/**
+ * title: dropdown
+ * description: 通过配置 `dropdownMenu` 可以在尾部渲染一个下拉内容
+ */
+
import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { ActionGroup } from '@ant-design/pro-editor';
import { message } from 'antd';
diff --git a/src/ActionGroup/demos/type.tsx b/src/ActionGroup/demos/type.tsx
index 2402be69..ef19eed1 100644
--- a/src/ActionGroup/demos/type.tsx
+++ b/src/ActionGroup/demos/type.tsx
@@ -1,3 +1,6 @@
+/**
+ * title: 模式配置
+ */
import { ActionGroup } from '@ant-design/pro-editor';
import { InputNumber, Segmented, Space } from 'antd';
import { useState } from 'react';
diff --git a/src/ActionGroup/demos/withPanel.tsx b/src/ActionGroup/demos/withPanel.tsx
index 8a0a12fd..05eefce2 100644
--- a/src/ActionGroup/demos/withPanel.tsx
+++ b/src/ActionGroup/demos/withPanel.tsx
@@ -1,3 +1,8 @@
+/**
+ * title: 浮动面板中使用
+ * description: 配合 DraggablePanel 可以使得整个面板可浮动拖拽
+ */
+
import type { Position } from '@ant-design/pro-editor';
import { ActionGroup, DraggablePanel } from '@ant-design/pro-editor';
import { useLocalStorageState } from 'ahooks';
diff --git a/src/ActionGroup/index.md b/src/ActionGroup/index.md
index d5ff2174..9537f8b9 100644
--- a/src/ActionGroup/index.md
+++ b/src/ActionGroup/index.md
@@ -2,6 +2,8 @@
title: ActionGroup 工具面板
atomId: ActionGroup
group: 基础组件
+demo:
+ cols: 2
---
# ActionGroup 工具面板
@@ -12,28 +14,11 @@ group: 基础组件
## 代码演示
-### 基础
-
-
-### 使用配置
-
-
-### 使用 dropdownMenu 扩展更多内容
-
-
-### 类型、大小和方向调整
-
-
-### 高度自定义
-
-
-### 使用浮动面板
-
## API