diff --git a/platform/example/src/component/AddStep.tsx b/platform/example/src/component/AddStep.tsx
new file mode 100644
index 0000000..1b5d302
--- /dev/null
+++ b/platform/example/src/component/AddStep.tsx
@@ -0,0 +1,24 @@
+import {Dropdown, MenuProps, Space} from "antd";
+import style from "@/component/layout/css/header.module.less";
+import {DownOutlined} from "@ant-design/icons";
+import {menus, stepList, stepMap} from "@/component/step";
+import drapStore from "@/mobx/DrapStore";
+
+console.log(stepList)
+const items: MenuProps['items'] = [...menus];
+
+const onClick: MenuProps['onClick'] = ({ key }) => {
+    // 给容器添加组件
+    // message.info(`Click on item ${key}`);
+    const component = stepMap[key];
+    console.log(key,component)
+    drapStore.addChildren(null,component.defaultDataFunc())
+};
+const AddStep :React.FC= (props)=>{
+    return  <Dropdown menu={{ items,onClick }}>
+      <div className={style.addStep} onClick={(e) => e.preventDefault()}>
+        {props.children}
+      </div>
+    </Dropdown>
+}
+export default AddStep
\ No newline at end of file
diff --git a/platform/example/src/component/CardItem.tsx b/platform/example/src/component/CardItem.tsx
index 7818619..62377e9 100644
--- a/platform/example/src/component/CardItem.tsx
+++ b/platform/example/src/component/CardItem.tsx
@@ -1,9 +1,12 @@
 import {memo, useRef} from "react";
 import {useDrag, useDrop} from "react-dnd";
 import drapStore from "@/mobx/DrapStore";
-import {Content, StepDragType, StepType} from "@/component/type";
+import {Content, StepDragEnum, StepDragType, StepType} from "@/component/type";
 import style from "./css/DrapItem.module.less"
 import {stepMap} from "@/component/step";
+import lodash from "lodash"
+// import AddStep from "./AddStep";
+import {DownOutlined} from "@ant-design/icons";
 let id = 0
 export const getDropStoreId = (type?:string) =>{
     const DropStore = {
@@ -67,6 +70,10 @@ const CardItem = memo((props:CardItemProps) => {
                 // 如果是根组件，不移除自身
                 if(props.parent===null){
                     return;
+                }
+                // 子组件不移除
+                if(childrenFind(droppedId)){
+                    return;
                 }
                     // 跨组件移动--移除自身
                 deleteCard(props.parent,props.data)
@@ -75,6 +82,20 @@ const CardItem = memo((props:CardItemProps) => {
         }),
         [id, originalIndex, moveCard],
     )
+    // 父级是否存在
+    const childrenFind = (id:string)=>{
+        // @ts-ignore
+        if(Array.isArray(props.parent.children)){
+            // @ts-ignore
+            for (let i = 0; i < props.parent.children?.length; i++) {
+                // @ts-ignore
+                if(props.parent.children[i].id===id){
+                    return true
+                }
+            }
+        }
+        return  false
+    }
     const [{isOver,canDrop,isOverCurrent}, drop] = useDrop(
         () => ({
             accept: StepType.CARD,
@@ -135,8 +156,10 @@ const CardItem = memo((props:CardItemProps) => {
                 // @ts-ignore
                 const newItem = { ...item, id: String(new Date().getTime()) }
                 if(tag!==Propstag){
-                    // @ts-ignore
-                    const newItem = { ...item, id: String(new Date().getTime()) }
+                    // 销毁自己
+                    item.destruction()
+                    const newItem = lodash.cloneDeep(item)
+                    newItem.id = String(new Date().getTime())
                     childrenCreate(newItem)
                 }
                 return
@@ -158,7 +181,12 @@ const CardItem = memo((props:CardItemProps) => {
         drapStore.updateState()
 
     }
-
+    // const addStepDom = ()=>{
+    //     return     <AddStep >
+    //         <span>新增步骤</span>
+    //         <DownOutlined />
+    //     </AddStep>
+    // }
     return (
         <div className={style.woodExampleBody}>
             <div ref={(node) => drag(drop(node))} >
@@ -175,11 +203,13 @@ const CardItem = memo((props:CardItemProps) => {
             <div>
                 {step&&(<StepComponent updateData={updateData} data={data.data} />)}
             </div>
-
-            {props.data.children&&props.data.children.length>0&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
-                {props.children}
+            {props.children}
+            {props.data.type===StepDragEnum.CONTAINER&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
+                拖动到此处或者
+                    {/*{addStepDom()}*/}
             </div>)}
 
+
         </div>
     )
 })
diff --git a/platform/example/src/component/DragList.tsx b/platform/example/src/component/DragList.tsx
index 57c7b7e..aaaf0f7 100644
--- a/platform/example/src/component/DragList.tsx
+++ b/platform/example/src/component/DragList.tsx
@@ -12,15 +12,15 @@ interface DragListProps {
 const _tagStore = getDropStoreId()
 const tagStore = _tagStore()
 const DragList = ({data,parent}:DragListProps) => {
-    console.log(data)
     if(!Array.isArray(data)){
         data = []
     }
     // const [list, setList] = useState(data);
-    data.forEach((e:StepDragType<object>)=>{
+    data.forEach((e:StepDragType<Content>)=>{
         if(!e.tag){
             e.tag = tagStore.tag
         }
+        e.destruction = () => deleteCard(null,e)
     })
     // 在当前位置插入模块
     const insertCard = useCallback(
diff --git a/platform/example/src/component/layout/header.tsx b/platform/example/src/component/layout/header.tsx
index 1eab98b..a60049e 100644
--- a/platform/example/src/component/layout/header.tsx
+++ b/platform/example/src/component/layout/header.tsx
@@ -4,6 +4,7 @@ import {Dropdown, message, Space} from 'antd';
 import style from "./css/header.module.less"
 import {stepMap,stepList} from "../step/index"
 import drapStore from "@/mobx/DrapStore";
+import AddStep from "@/component/AddStep";
 
 const items: MenuProps['items'] = [
     ...stepList.map(step=>step.Menu)
@@ -15,20 +16,17 @@ const onClick: MenuProps['onClick'] = ({ key }) => {
   const component = stepMap[key];
   console.log(key,component)
   drapStore.addChildren(null,component.defaultDataFunc())
-
 };
 
 const Header = () => {
   return (<div className={style.woodheader}>
 
-    <Dropdown menu={{ items,onClick }}>
-      <span className={style.addStep} onClick={(e) => e.preventDefault()}>
-        <Space>
-          新增步骤
-          <DownOutlined />
-        </Space>
-      </span>
-    </Dropdown>
+      <AddStep >
+          <Space>
+              新增步骤
+              <DownOutlined />
+          </Space>
+      </AddStep>
     <span className={style.addStep} onClick={(e) => e.preventDefault()}>
         <Space>
           变量管理
diff --git a/platform/example/src/component/step/index.ts b/platform/example/src/component/step/index.ts
index fbcdb69..c8f405b 100644
--- a/platform/example/src/component/step/index.ts
+++ b/platform/example/src/component/step/index.ts
@@ -5,13 +5,15 @@ import {Content, StepDragType} from "@/component/type";
 import {stepProps} from "@/component/step/type";
 
 
+interface Menu {
+    label: string
+    key: string
+    options: {}
+    component: ComponentClass<stepProps,any>
+}
+
 export interface StepComponentExport {
-    Menu: {
-        label: string
-        key: string
-        options: {}
-        component: ComponentClass<stepProps,any>
-    }
+    Menu: Menu
 
     defaultDataFunc: () => StepDragType<Content>
 }
@@ -24,6 +26,7 @@ export const stepList = [
     HttpStepComponent,
     LoopEditComponent
 ]
+export const menus:Menu[] = stepList.map(step=>step.Menu)
 
 export const stepMap: stepMapType = {}
 stepList.forEach(step => {
diff --git a/platform/example/src/component/type.ts b/platform/example/src/component/type.ts
index af437d3..ec750d3 100644
--- a/platform/example/src/component/type.ts
+++ b/platform/example/src/component/type.ts
@@ -18,6 +18,7 @@ export interface StepDragType<T> {
     children?:StepDragType<T>[]
     parent:StepDragType<T>|null
     data:T
+    destruction:()=>void
 }
 // 组件内容
 export interface Content {
diff --git a/platform/example/src/mobx/DrapStore.ts b/platform/example/src/mobx/DrapStore.ts
index 0655116..43482e2 100644
--- a/platform/example/src/mobx/DrapStore.ts
+++ b/platform/example/src/mobx/DrapStore.ts
@@ -95,7 +95,6 @@ class DrapStore {
         if(parentItem===null){
             DrapChildren = this.state
         }
-        console.log(DrapChildren)
         DrapChildren.forEach((dropItem,idx)=>{
             if(dropItem.id===item.id){
                 drop = dropItem
@@ -105,7 +104,6 @@ class DrapStore {
         if(drop===null){
             return
         }
-        console.log(drop)
         if(parentItem===null){
             const ord = this.state[to]
             this.state[to] = drop