diff --git a/platform/example/src/component/AddStep.tsx b/platform/example/src/component/AddStep.tsx
index 265af60..ebcafa6 100644
--- a/platform/example/src/component/AddStep.tsx
+++ b/platform/example/src/component/AddStep.tsx
@@ -1,25 +1,42 @@
 import {Dropdown, MenuProps, Space} from "antd";
 import style from "@/component/layout/css/header.module.less";
-import {DownOutlined} from "@ant-design/icons";
+import {DownOutlined, PlusOutlined} from "@ant-design/icons";
 import {stepMap} from "@/component/step";
 import drapStore from "@/mobx/DrapStore";
 import Menus from "@/component/step/menus";
-
+import {Props} from "react"
+import {Content, StepDragType} from "@/component/type";
+// <PlusOutlined />
 // console.log(stepList)
-const items: MenuProps['items'] = [...Menus];
+const items: MenuProps['items'] = [...Menus].map(e=>{
+    e.label = <div>
+        <PlusOutlined />
+        <span style={{marginLeft:"10px"}}>{e.label}</span>
 
-const onClick: MenuProps['onClick'] = ({ key }) => {
-    // 给容器添加组件
-    // message.info(`Click on item ${key}`);
-    console.log(stepMap)
-    const component = stepMap[key];
-    console.log(key,component)
-    drapStore.addChildren(null,component.defaultDataFunc())
-};
-const AddStep :React.FC= (props)=>{
+    </div>
+    return e
+});
+interface addStepProps {
+    className?:string
+    step?:StepDragType<Content>
+}
+
+const AddStep :React.FC<addStepProps>= (props)=>{
+    const onClick: MenuProps['onClick'] = ({ key }) => {
+        // 给容器添加组件
+        // message.info(`Click on item ${key}`);
+        const component = stepMap[key];
+        console.log(key,component,props.step)
+        if(props.step){
+            drapStore.addChildren(props.step,component.defaultDataFunc())
+            return
+        }
+        drapStore.addChildren(null,component.defaultDataFunc())
+    };
     return  <Dropdown menu={{ items,onClick }}>
-      <div className={style.addStep} onClick={(e) => e.preventDefault()}>
-        {props.children}
+
+      <div  className={props.className} onClick={(e) => e.preventDefault()}>
+          {props.children}
       </div>
     </Dropdown>
 }
diff --git a/platform/example/src/component/CardItem.tsx b/platform/example/src/component/CardItem.tsx
index a066907..cd38395 100644
--- a/platform/example/src/component/CardItem.tsx
+++ b/platform/example/src/component/CardItem.tsx
@@ -175,6 +175,7 @@ const CardItem = memo((props:CardItemProps) => {
         }),
     }),[data])
     const step = stepMap[data.mold]
+    console.log(step,stepMap,data.mold)
     const StepComponent = step&&step.component;
 
     const updateData = (data:string) =>{
@@ -183,9 +184,8 @@ const CardItem = memo((props:CardItemProps) => {
 
     }
     const addStepDom = ()=>{
-        return<AddStep >
-            <span>新增步骤</span>
-            <DownOutlined />
+        return<AddStep className={style.woodExampleAddStepbtn} step={props.data as StepDragType<Content>}>
+            <span>新建步骤</span>
         </AddStep>
 
     }
@@ -193,23 +193,28 @@ const CardItem = memo((props:CardItemProps) => {
         <div className={style.woodExampleBody}>
             <div ref={(node) => drag(drop(node))} >
                 <div ref={nodeRef} className={style.woodExampleHeader}>
-                    { (isOver && canDrop && positionRef.current === 'top') && <div >拖拽到此处top</div> }
+                    {/*{ (isOver && canDrop && positionRef.current === 'top') && <div >拖拽到此处top</div> }*/}
                     <span className={style.woodExampleIndex}>{data?.index}</span>
                     <span>{data?.data?.label}</span>
                     <span className={style.woodExampleRemark}>{data?.data?.remark?data.data.remark:"步骤备注"}</span>
                     {data?.data?.tag&&<span className={style.woodExampleTag} style={{"background":data?.data?.color}}>{data?.data?.tag}</span>}
-                    { (isOver && canDrop && positionRef.current === 'bottom' && originalIndex !== len-1 ) && <div >拖拽到此处bottom</div> }
-                    { (isDragging  && canDrop && originalIndex === len-1 && positionRef.current !== 'top') && <div >拖拽到此处len</div> }
+                    {/*{ (isOver && canDrop && positionRef.current === 'bottom' && originalIndex !== len-1 ) && <div >拖拽到此处bottom</div> }*/}
+                    {/*{ (isDragging  && canDrop && originalIndex === len-1 && positionRef.current !== 'top') && <div >拖拽到此处len</div> }*/}
                 </div>
             </div>
-            <div>
-                {step&&(<StepComponent updateData={updateData} data={data.data} />)}
-            </div>
-            {props.children}
-            {props.data.type===StepDragEnum.CONTAINER&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
-                拖动到此处或者
+            <div className={style.woodExampleContent}>
+                <div>
+                    {step&&(<StepComponent updateData={updateData} data={data.data} />)}
+                </div>
+                <div className={style.woodExampleChildren}>
+                    {props.children}
+                </div>
+                {props.data.type===StepDragEnum.CONTAINER&&(<div className={style.woodExampleAddStep} ref={(node)=>childrenDrop(node)} >
+                    <span>拖动到此处或者</span>
                     {addStepDom()}
-            </div>)}
+                    <span>完成添加</span>
+                </div>)}
+            </div>
 
 
         </div>
diff --git a/platform/example/src/component/css/DrapItem.module.less b/platform/example/src/component/css/DrapItem.module.less
index a9e21e5..b720b8b 100644
--- a/platform/example/src/component/css/DrapItem.module.less
+++ b/platform/example/src/component/css/DrapItem.module.less
@@ -38,4 +38,19 @@
 .woodExampleIndex{
   margin: 0 5px;
   color: #333;
+}
+.woodExampleAddStep{
+  text-align: center;
+  padding: 5px 0;
+  margin: 10px 0;
+  border: 1px dashed #d9d9d9;
+}
+.woodExampleContent{
+  padding: 0 10px;
+}
+.woodExampleAddStepbtn{
+  display: inline-block;
+  margin: 0 5px;
+  color: #60abfd;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/platform/example/src/component/layout/css/header.module.less b/platform/example/src/component/layout/css/header.module.less
index 95c1bd3..fcaefef 100644
--- a/platform/example/src/component/layout/css/header.module.less
+++ b/platform/example/src/component/layout/css/header.module.less
@@ -8,6 +8,7 @@
   padding: 3px 5px;
   cursor: pointer;
   transition: background-color 1s;
+  border-radius: 5px;
   &:hover{
     background: #95bbff;
   }
diff --git a/platform/example/src/component/layout/header.tsx b/platform/example/src/component/layout/header.tsx
index a60049e..1acbff0 100644
--- a/platform/example/src/component/layout/header.tsx
+++ b/platform/example/src/component/layout/header.tsx
@@ -6,26 +6,16 @@ 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)
-];
-
-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 Header = () => {
   return (<div className={style.woodheader}>
 
-      <AddStep >
+      <AddStep className={style.addStep}>
           <Space>
               新增步骤
               <DownOutlined />
           </Space>
+
       </AddStep>
     <span className={style.addStep} onClick={(e) => e.preventDefault()}>
         <Space>
diff --git a/platform/example/src/component/step/http/Edit.tsx b/platform/example/src/component/step/http/Edit.tsx
index a9ee715..21da18a 100644
--- a/platform/example/src/component/step/http/Edit.tsx
+++ b/platform/example/src/component/step/http/Edit.tsx
@@ -34,9 +34,9 @@ class HttpEditComponent extends Component<stepProps, State> {
         const content = Object.assign({
             url:urlDefaultData
         },props.data)
-        console.log(1)
+        console.log(props)
         this.state = {
-            data:content
+            data:content as HttpData
         }
         console.log(this.state.data)
     }
diff --git a/platform/example/src/component/step/index.ts b/platform/example/src/component/step/index.ts
index ab62b23..4585019 100644
--- a/platform/example/src/component/step/index.ts
+++ b/platform/example/src/component/step/index.ts
@@ -6,7 +6,7 @@ import {stepProps} from "@/component/step/type";
 
 
 export interface MenuItem {
-    label: string
+    label: React.ReactNode
     key: string
     options: {}
 }
diff --git a/platform/example/src/component/step/loop/Edit.tsx b/platform/example/src/component/step/loop/Edit.tsx
index 8f816bb..1f6bb65 100644
--- a/platform/example/src/component/step/loop/Edit.tsx
+++ b/platform/example/src/component/step/loop/Edit.tsx
@@ -1,12 +1,43 @@
 import {Component} from "react";
 import {LoopProps, LoopState} from "@/component/step/loop/type";
+import {InputNumber} from "antd";
+import style from "./loop.module.less"
+import {InfoCircleOutlined} from "@ant-design/icons";
 interface Interface {
 
 }
 
 class LoopEditComponent extends Component<LoopProps, LoopState>{
+    constructor(props:LoopProps) {
+        super(props);
+        this.state = {
+            loop:props.data.loop
+        }
+        console.log(props.data)
+    }
+    updateData(){
+        this.props.updateData(JSON.stringify(this.state.data))
+    }
+    valueChange(value:number){
+        this.setState({loop:value})
+        this.updateData()
+        console.log(this.state.loop)
+    }
     render() {
-        return <div>loop</div>;
+        return <div className={style.loopBody}>
+            <div className={style.loopHeader}>
+                <span style={{marginRight:"20px"}}><InfoCircleOutlined /></span>
+                <span className={style.loopTitle}>循环步骤</span>
+
+            </div>
+            <div className={style.loopContent}>
+                <span>可以使用$_index变量获取当前循环的次数,次数从0开始计数</span>
+                <span>
+                    <InputNumber addonBefore="执行次数" value={this.state.loop} onChange={(e)=>this.valueChange(e)} min={0}  defaultValue={0} />
+                </span>
+            </div>
+
+        </div>;
     }
 }
 
diff --git a/platform/example/src/component/step/loop/index.tsx b/platform/example/src/component/step/loop/index.tsx
index 26e9953..9c8615f 100644
--- a/platform/example/src/component/step/loop/index.tsx
+++ b/platform/example/src/component/step/loop/index.tsx
@@ -5,15 +5,16 @@ import {StepComponentExport} from "@/component/step";
 import HttpEditComponent from "@/component/step/http/Edit";
 import LoopEditComponent from "@/component/step/loop/Edit";
 const tagStore = getDropStoreId("loop")
-const name = "Loop"
+const name = "LOOP"
 const LoopData:LoopInterface = {
     content: "",
     id:0,
     label:"循环组件",
     remark:"",
-    color:"red",
+    color:"#7eabbe",
     tag:"LOOP",
     value:"",
+    loop:0
 }
 
 const defaultDataFunc = () =>{
@@ -32,7 +33,8 @@ const defaultDataFunc = () =>{
         originalIndex:store.id,
         children:[],
         parent:null,
-        data:data
+        data:data,
+        destruction:()=>{}
     }
     return defaultData
 }
diff --git a/platform/example/src/component/step/loop/loop.module.less b/platform/example/src/component/step/loop/loop.module.less
new file mode 100644
index 0000000..5d7ecf3
--- /dev/null
+++ b/platform/example/src/component/step/loop/loop.module.less
@@ -0,0 +1,28 @@
+.loopContent{
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  >span:last-child{
+    background: #fff;
+  }
+}
+.loopBody{
+  background: #e6f7ff;
+  border: 2px solid #bae4fe;
+  border-radius: 5px;
+  margin: 10px 0;
+  padding: 10px 0;
+
+}
+.loopTitle{
+  font-size: 16px;
+  font-weight: 600;
+}
+.loopHeader{
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
\ No newline at end of file
diff --git a/platform/example/src/component/step/loop/type.d.ts b/platform/example/src/component/step/loop/type.d.ts
index 897f043..97fe31c 100644
--- a/platform/example/src/component/step/loop/type.d.ts
+++ b/platform/example/src/component/step/loop/type.d.ts
@@ -1,16 +1,17 @@
 import {Content, StepDragEnum, StepDragType} from "@/component/type";
 import {HttpData} from "@/component/step/http/type";
 
-interface LoopData {
+
+interface LoopData extends LoopInterface{
 
 }
 interface LoopProps {
     updateData:(data:string)=>void
-    data:HttpData
-}
-interface LoopState {
     data:LoopData
 }
-interface LoopInterface extends Content{
-
+interface LoopState {
+    loop:number
+}
+interface LoopInterface extends Content{
+    loop:number
 }