diff --git a/src/components/index.js b/src/components/index.js
index 3f08fbfc86a9d45ac7da8ff14a51c69def9822fd..b0976f57230ddf51a5883f80cddc0b3e021112fb 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,5 +2,6 @@ import Table from './table/index.vue';
 import WhiteCard from './white_card/index.vue';
 import Upload from './upload/index.vue';
 import MyFormItem from './table/my_item.vue';
+import ActionButoon from './action_button/index.vue';
 
-export { Table, WhiteCard, Upload, MyFormItem };
+export { Table, WhiteCard, Upload, MyFormItem, ActionButoon };
diff --git a/src/components/table/tableDrawer.vue b/src/components/table/tableDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1435871875a050d139c0500105ba937ab7b3147
--- /dev/null
+++ b/src/components/table/tableDrawer.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <Drawer />
+        
+        <Table>
+            <template #search="query">
+                <slot name="search" :query="query" />
+            </template>
+
+            <slot name="table" />
+        </Table>
+    </div>
+</template>
+
+<script>
+import Table from './table.vue';
+import Drawer from './drawer.vue';
+
+export default {
+    components: { Table, Drawer },
+};
+</script>
diff --git a/src/pages/system/view/menu/MenuManagement.vue b/src/pages/system/view/menu/MenuManagement.vue
index 8c0c507fc3e801b380c406d7212f6fad36cc09d9..dce01ed36f3c25f50760f7db9e2bd7ce6bc6a91d 100644
--- a/src/pages/system/view/menu/MenuManagement.vue
+++ b/src/pages/system/view/menu/MenuManagement.vue
@@ -8,7 +8,8 @@
         ref="table"
     >
         <template #drawer>
-            <Form ref="addForm" />
+            <AddCom v-if="addCom" />
+            <Form ref="addForm" v-else />
         </template>
 
         <a-table-column title="名称" data-index="menuName" />
@@ -18,9 +19,7 @@
         <a-table-column title="模块URL" data-index="menuUrl" />
         <a-table-column title="操作">
             <template #default="row">
-                <a @click="() => edit(row)">编辑</a>
-                <a-divider type="vertical" />
-                <PopconfirmDelete :url="`/api/v1/menus/${row.menuId}`" :cb="refreshTable" />
+                <my-ac-btn :row="row" :buttons="buttons" />
             </template>
         </a-table-column>
     </my-table>
@@ -28,21 +27,37 @@
 
 <script>
 import { convertListToTree } from '@/utils';
-import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
 import Form from './form.vue';
+import AddCom from './add_com.vue';
 
 export default {
     data: vm => ({
+        addCom: false,
         addBtn: {
             text: '新建',
             onOk() {
                 return vm.$refs['addForm']?.submit();
             },
+            onCancel() {
+                vm.addCom = false;
+            },
         },
         sortOrder: 'ascend',
+        buttons: [
+            {
+                label: '新增组件',
+                click() {
+                    vm.show();
+                    vm.addCom = true;
+                },
+                isHidden: row => row.menuType === 'MENU',
+            },
+            { label: '编辑', click: vm.edit },
+            { type: 'confirm', url: row => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable },
+        ],
     }),
 
-    components: { PopconfirmDelete, Form },
+    components: { Form, AddCom },
 
     methods: {
         formatData: convertListToTree,
@@ -58,6 +73,9 @@ export default {
                 this.$refs['addForm'].setEdit({ ...data });
             });
         },
+        show() {
+            this.$refs['table'].show();
+        },
     },
 };
 </script>
diff --git a/src/pages/system/view/menu/add_com.vue b/src/pages/system/view/menu/add_com.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc74c1c8eb827bc30110efab33b66cf07e6fa462
--- /dev/null
+++ b/src/pages/system/view/menu/add_com.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>addCom</h1>
+</template>
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 7353a29cbcc1724591de9a5e8285685615373c15..6f217c4dd2839932ded967406ddf881a2b1015c6 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -1,7 +1,7 @@
 import VueI18nPlugin from './vueI18nPlugin';
 import AuthorityPlugin from './authorityPlugin';
 import TabsPagePlugin from './tabsPagePlugin';
-import { Table, WhiteCard, Upload, MyFormItem } from '@/components';
+import { Table, WhiteCard, Upload, MyFormItem, ActionButoon } from '@/components';
 
 const Plugins = {
     install: function(Vue) {
@@ -12,6 +12,7 @@ const Plugins = {
         Vue.component('my-card', WhiteCard);
         Vue.component('my-upload', Upload);
         Vue.component('my-form-item', MyFormItem);
+        Vue.component('my-ac-btn', ActionButoon);
     },
 };
 export default Plugins;