diff --git a/test-ui/src/views/test/case/detail/index.vue b/test-ui/src/views/test/case/detail/index.vue
index 7ef73c3..0b688bf 100644
--- a/test-ui/src/views/test/case/detail/index.vue
+++ b/test-ui/src/views/test/case/detail/index.vue
@@ -50,6 +50,10 @@ export default {
     saveStep(list) {
       let p = []
       list.forEach((item) => {
+        item.assertion.pop();
+        item.assignment.pop();
+        item.requestHeader.pop();
+        item.requestParams.pop();
         p.push({
           ...item,
           caseId: this.$route.query.id,
diff --git a/test-ui/src/views/test/case/detail/page1.vue b/test-ui/src/views/test/case/detail/page1.vue
index c9cd3c1..0f2bfc3 100644
--- a/test-ui/src/views/test/case/detail/page1.vue
+++ b/test-ui/src/views/test/case/detail/page1.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-form :model="form" ref="form">
-      <el-form-item label="步骤名称" prop="name">
+      <el-form-item label="名称" prop="name">
         <el-input v-model="form.name" placeholder="请输入步骤名称"/>
       </el-form-item>
       <el-form-item label="接口" prop="uri">
@@ -211,7 +211,6 @@ export default {
       });
     },
     linkApi(row) {
-      console.log(row)
       this.open = false
       if (row) {
         this.form.requestMethod = row.method
diff --git a/test-ui/src/views/test/case/detail/page3.vue b/test-ui/src/views/test/case/detail/page3.vue
index c00a42d..a1c92a7 100644
--- a/test-ui/src/views/test/case/detail/page3.vue
+++ b/test-ui/src/views/test/case/detail/page3.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="form" ref="form">
+    <el-form :model="form" ref="form" :inline="true">
       <el-form-item label="循环次数" prop="count">
         <el-input v-model="form.count" placeholder="请输入循环次数"/>
       </el-form-item>
@@ -8,17 +8,97 @@
         <el-switch v-model="form.async" active-color="#13ce66" inactive-color="#ff4949" :active-value="0" :inactive-value="2"/>
       </el-form-item>
     </el-form>
+    <div v-loading="loading">
+      <div style="margin-bottom:20px;">
+        <el-dropdown trigger="click" @command="handleAdd">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini">添加步骤</el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="1">HTTP接口</el-dropdown-item>
+            <el-dropdown-item command="2">数据库源</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="item.parentId && item.parentId === form.id">
+          <template slot="title">
+            <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px"/>
+            <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;">{{ dict.type.step_type.findLast(t => t.value == item.type).label }}</el-tag>
+            <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ item.name }}</el-tag>
+            <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
+            <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success">{{ item.requestUrl }}</el-tag>
+          </template>
+          <el-button size="mini" type="text" @click="handleDel(index)" style="float: right">删除</el-button>
+          <page1 v-if="item.type == 1" :form="item" :hosts="hosts"/>
+          <page2 v-if="item.type == 2" :form="item" :datasourceList="datasourceList"/>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
   </div>
 </template>
 
 <script>
+import page1 from "@/views/test/case/detail/page1.vue";
+import page2 from "@/views/test/case/detail/page2.vue";
 
 export default {
+  dicts: ['step_type'],
+  components: {page1, page2},
   props: {
     form: {
       type: Object
+    },
+    hosts: {
+      type: Array
+    },
+    datasourceList: {
+      type: Array
+    },
+    list: {
+      type: Array
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      activeName: null,
     }
   },
+  methods: {
+    handleAdd(type) {
+      this.list.push({
+        name: "",
+        parentId: this.form.id,
+        type: type,
+        requestMethod: 'POST',
+        requestUrl: "",
+        apiHttpId: null,
+        requestHeader: [{
+          key: "",
+          value: "",
+        }],
+        requestParams: [{
+          key: "",
+          value: "",
+        }],
+        assignment:[{
+          name: "",
+          type: "",
+          content: "",
+          path: "",
+        }],
+        assertion:[{
+          name: "",
+          source: "",
+          fn: "",
+          target: ""
+        }],
+        requestBody: "",
+      });
+    },
+    handleDel(index) {
+      this.list.splice(index, 1)
+    }
+  }
 }
 </script>
 
diff --git a/test-ui/src/views/test/case/detail/page4.vue b/test-ui/src/views/test/case/detail/page4.vue
index c411db3..06abea4 100644
--- a/test-ui/src/views/test/case/detail/page4.vue
+++ b/test-ui/src/views/test/case/detail/page4.vue
@@ -11,19 +11,97 @@
         <JsonEditorVue mode="text" v-model="form.breakError" class="jse-theme-dark"/>
       </el-form-item>
     </el-form>
+    <div v-loading="loading">
+      <div style="margin-bottom:20px;">
+        <el-dropdown trigger="click" @command="handleAdd">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini">添加步骤</el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="1">HTTP接口</el-dropdown-item>
+            <el-dropdown-item command="2">数据库源</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="item.parentId && item.parentId === form.id">
+          <template slot="title">
+            <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px"/>
+            <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;">{{ dict.type.step_type.findLast(t => t.value == item.type).label }}</el-tag>
+            <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ item.name }}</el-tag>
+            <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
+            <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success">{{ item.requestUrl }}</el-tag>
+          </template>
+          <el-button size="mini" type="text" @click="handleDel(index)" style="float: right">删除</el-button>
+          <page1 v-if="item.type == 1" :form="item" :hosts="hosts"/>
+          <page2 v-if="item.type == 2" :form="item" :datasourceList="datasourceList"/>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
   </div>
 </template>
 
 <script>
 import JsonEditorVue from "json-editor-vue";
+import page1 from "@/views/test/case/detail/page1.vue";
+import page2 from "@/views/test/case/detail/page2.vue";
 
 export default {
-  components: {JsonEditorVue},
+  components: {page1, page2, JsonEditorVue},
   props: {
     form: {
       type: Object
+    },
+    hosts: {
+      type: Array
+    },
+    datasourceList: {
+      type: Array
+    },
+    list: {
+      type: Array
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      activeName: null,
     }
   },
+  methods: {
+    handleAdd(type) {
+      this.list.push({
+        name: "",
+        parentId: this.form.id,
+        type: type,
+        requestMethod: 'POST',
+        requestUrl: "",
+        apiHttpId: null,
+        requestHeader: [{
+          key: "",
+          value: "",
+        }],
+        requestParams: [{
+          key: "",
+          value: "",
+        }],
+        assignment:[{
+          name: "",
+          type: "",
+          content: "",
+          path: "",
+        }],
+        assertion:[{
+          name: "",
+          source: "",
+          fn: "",
+          target: ""
+        }],
+        requestBody: "",
+      });
+    },
+    handleDel(index) {
+      this.list.splice(index, 1)
+    }
+  }
 }
 </script>
 
diff --git a/test-ui/src/views/test/case/detail/step.vue b/test-ui/src/views/test/case/detail/step.vue
index 8de26e4..919625c 100644
--- a/test-ui/src/views/test/case/detail/step.vue
+++ b/test-ui/src/views/test/case/detail/step.vue
@@ -9,18 +9,19 @@
       </el-dropdown>
     </div>
     <el-collapse v-model="activeName" accordion v-if="list && list.length">
-      <el-collapse-item :name="index" v-for="(item, index) in list" :key="index">
+      <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="!item.parentId">
         <template slot="title">
           <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px"/>
           <el-tag effect="plain" style="width: 70px;text-align: center;margin-right: 12px;">{{ dict.type.step_type.findLast(t => t.value == item.type).label }}</el-tag>
           <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ item.name }}</el-tag>
+          <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
           <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success">{{ item.requestUrl }}</el-tag>
         </template>
         <el-button size="mini" type="text" @click="handleDel(index)" style="float: right">删除</el-button>
         <page1 v-if="item.type == 1" :form="item" :hosts="hosts"/>
         <page2 v-if="item.type == 2" :form="item" :datasourceList="datasourceList"/>
-        <page3 v-if="item.type == 3" :form="item" :list="list"/>
-        <page4 v-if="item.type == 4" :form="item" :list="list"/>
+        <page3 v-if="item.type == 3" :form="item" :list="list" :hosts="hosts" :datasourceList="datasourceList"/>
+        <page4 v-if="item.type == 4" :form="item" :list="list" :hosts="hosts" :datasourceList="datasourceList"/>
       </el-collapse-item>
     </el-collapse>
     <el-empty v-else/>
@@ -61,7 +62,37 @@ export default {
       this.datasourceList = res.data;
     })
     listCaseStep({caseId: this.$route.query.id}).then(res => {
-      this.list = res.data;
+      this.list = [];
+      res.data.forEach(item => {
+        let p = {
+          ...item,
+          assertion: item.assertion ? JSON.parse(item.assertion) : [],
+          assignment: item.assignment ? JSON.parse(item.assignment) : [],
+          requestHeader: item.requestHeader ? JSON.parse(item.requestHeader) : [],
+          requestParams: item.requestParams ? JSON.parse(item.requestParams) : []
+        }
+        p.assertion.push({
+          name: "",
+          source: "",
+          fn: "",
+          target: ""
+        })
+        p.assignment.push({
+          name: "",
+          type: "",
+          content: "",
+          path: "",
+        })
+        p.requestHeader.push({
+          key: "",
+          value: "",
+        })
+        p.requestParams.push({
+          key: "",
+          value: "",
+        })
+        this.list.push(p)
+      })
       this.loading = false;
     });
 
diff --git a/test-ui/src/views/test/case/index.vue b/test-ui/src/views/test/case/index.vue
index fec42c2..545d0f8 100644
--- a/test-ui/src/views/test/case/index.vue
+++ b/test-ui/src/views/test/case/index.vue
@@ -14,6 +14,7 @@
         <el-table-column label="创建时间" align="center" prop="createTime"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRun(scope.row.id)">执行</el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
           </template>
         </el-table-column>
@@ -79,6 +80,9 @@ export default {
         }
       });
     },
+    handleRun(id) {
+      console.log(id)
+    },
     handleRowClick(row) {
       this.$tab.openPage(`用例[${row.name}]`, "/case/detail", {id: row.id});
     },