diff --git a/test-test/src/main/java/com/test/test/controller/TestCaseStepController.java b/test-test/src/main/java/com/test/test/controller/TestCaseStepController.java
index 38eb133..dd2293a 100644
--- a/test-test/src/main/java/com/test/test/controller/TestCaseStepController.java
+++ b/test-test/src/main/java/com/test/test/controller/TestCaseStepController.java
@@ -3,20 +3,17 @@ package com.test.test.controller;
 import com.test.common.annotation.Log;
 import com.test.common.core.controller.BaseController;
 import com.test.common.core.domain.AjaxResult;
-import com.test.common.core.page.TableDataInfo;
 import com.test.common.enums.BusinessType;
 import com.test.common.utils.DateUtils;
-import com.test.test.domain.TestCase;
 import com.test.test.domain.TestCaseStep;
 import com.test.test.domain.qo.IDQO;
-import com.test.test.domain.qo.TestCaseListQO;
-import com.test.test.service.ITestCaseService;
+import com.test.test.domain.qo.TestCaseStepAddQO;
 import com.test.test.service.ITestCaseStepService;
 import jakarta.annotation.Resource;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.List;
+import java.util.Date;
 
 /**
  * 步骤Controller
@@ -48,10 +45,13 @@ public class TestCaseStepController extends BaseController {
      */
     @Log(title = "步骤", businessType = BusinessType.INSERT)
     @PostMapping("/add")
-    public AjaxResult add(@RequestBody TestCaseStep testCaseStep) {
-        testCaseStep.setCreateBy(getLoginUser().getUsername());
-        testCaseStep.setCreateTime(DateUtils.getNowDate());
-        return toAjax(testCaseStepService.insertTestCaseStep(testCaseStep));
+    public AjaxResult add(@RequestBody TestCaseStepAddQO qo) {
+        Date nowDate = DateUtils.getNowDate();
+        qo.getList().forEach(testCaseStep -> {
+            testCaseStep.setCreateBy(getLoginUser().getUsername());
+            testCaseStep.setCreateTime(nowDate);
+        });
+        return toAjax(testCaseStepService.insertBatchTestCaseStep(qo));
     }
 
     /**
diff --git a/test-test/src/main/java/com/test/test/domain/qo/TestCaseStepAddQO.java b/test-test/src/main/java/com/test/test/domain/qo/TestCaseStepAddQO.java
new file mode 100644
index 0000000..45508de
--- /dev/null
+++ b/test-test/src/main/java/com/test/test/domain/qo/TestCaseStepAddQO.java
@@ -0,0 +1,12 @@
+package com.test.test.domain.qo;
+
+import com.test.test.domain.TestCaseStep;
+import lombok.Data;
+
+import java.util.List;
+
+@Data
+public class TestCaseStepAddQO {
+    private Long caseId;
+    private List<TestCaseStep> list;
+}
diff --git a/test-test/src/main/java/com/test/test/mapper/TestCaseStepMapper.java b/test-test/src/main/java/com/test/test/mapper/TestCaseStepMapper.java
index 1c0079d..9993adf 100644
--- a/test-test/src/main/java/com/test/test/mapper/TestCaseStepMapper.java
+++ b/test-test/src/main/java/com/test/test/mapper/TestCaseStepMapper.java
@@ -67,4 +67,6 @@ public interface TestCaseStepMapper
      * @return 用例步骤集合
      */
     public List<TestCaseStep> selectTestCaseStepListByCaseId(Long caseId);
+
+    int deleteTestCaseStepByCaseId(Long caseId);
 }
diff --git a/test-test/src/main/java/com/test/test/service/ITestCaseStepService.java b/test-test/src/main/java/com/test/test/service/ITestCaseStepService.java
index 8891af5..faba383 100644
--- a/test-test/src/main/java/com/test/test/service/ITestCaseStepService.java
+++ b/test-test/src/main/java/com/test/test/service/ITestCaseStepService.java
@@ -1,6 +1,7 @@
 package com.test.test.service;
 
 import com.test.test.domain.TestCaseStep;
+import com.test.test.domain.qo.TestCaseStepAddQO;
 
 import java.util.List;
 import java.util.Map;
@@ -37,6 +38,14 @@ public interface ITestCaseStepService
      */
     public int insertTestCaseStep(TestCaseStep testCaseStep);
 
+    /**
+     * 新增用例步骤
+     *
+     * @param testCaseStep 用例步骤
+     * @return 结果
+     */
+    public int insertBatchTestCaseStep(TestCaseStepAddQO testCaseStep);
+
     /**
      * 修改用例步骤
      *
diff --git a/test-test/src/main/java/com/test/test/service/impl/TestCaseStepServiceImpl.java b/test-test/src/main/java/com/test/test/service/impl/TestCaseStepServiceImpl.java
index a802490..d2a31e0 100644
--- a/test-test/src/main/java/com/test/test/service/impl/TestCaseStepServiceImpl.java
+++ b/test-test/src/main/java/com/test/test/service/impl/TestCaseStepServiceImpl.java
@@ -4,11 +4,13 @@ import com.test.common.core.domain.model.JmeterRequest;
 import com.test.common.utils.DateUtils;
 import com.test.common.utils.JMeterUtil;
 import com.test.test.domain.TestCaseStep;
+import com.test.test.domain.qo.TestCaseStepAddQO;
 import com.test.test.mapper.TestCaseStepMapper;
 import com.test.test.service.ITestCaseStepService;
 import jakarta.annotation.Resource;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import java.util.List;
 import java.util.Map;
@@ -21,8 +23,7 @@ import java.util.Map;
  */
 @Slf4j
 @Service
-public class TestCaseStepServiceImpl implements ITestCaseStepService
-{
+public class TestCaseStepServiceImpl implements ITestCaseStepService {
     @Resource
     private TestCaseStepMapper testCaseStepMapper;
 
@@ -33,8 +34,7 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
      * @return 用例步骤
      */
     @Override
-    public TestCaseStep selectTestCaseStepById(Long id)
-    {
+    public TestCaseStep selectTestCaseStepById(Long id) {
         return testCaseStepMapper.selectTestCaseStepById(id);
     }
 
@@ -45,8 +45,7 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
      * @return 用例步骤
      */
     @Override
-    public List<TestCaseStep> selectTestCaseStepList(TestCaseStep testCaseStep)
-    {
+    public List<TestCaseStep> selectTestCaseStepList(TestCaseStep testCaseStep) {
         return testCaseStepMapper.selectTestCaseStepList(testCaseStep);
     }
 
@@ -57,12 +56,22 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
      * @return 结果
      */
     @Override
-    public int insertTestCaseStep(TestCaseStep testCaseStep)
-    {
+    public int insertTestCaseStep(TestCaseStep testCaseStep) {
         testCaseStep.setCreateTime(DateUtils.getNowDate());
         return testCaseStepMapper.insertTestCaseStep(testCaseStep);
     }
 
+    @Override
+    @Transactional
+    public int insertBatchTestCaseStep(TestCaseStepAddQO qo) {
+        testCaseStepMapper.deleteTestCaseStepByCaseId(qo.getCaseId());
+        int i = 0;
+        for (TestCaseStep testCaseStep1 : qo.getList()) {
+            i += insertTestCaseStep(testCaseStep1);
+        }
+        return i;
+    }
+
     /**
      * 修改用例步骤
      *
@@ -70,8 +79,7 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
      * @return 结果
      */
     @Override
-    public int updateTestCaseStep(TestCaseStep testCaseStep)
-    {
+    public int updateTestCaseStep(TestCaseStep testCaseStep) {
         testCaseStep.setUpdateTime(DateUtils.getNowDate());
         return testCaseStepMapper.updateTestCaseStep(testCaseStep);
     }
@@ -83,8 +91,7 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
      * @return 结果
      */
     @Override
-    public int deleteTestCaseStepByIds(Long[] ids)
-    {
+    public int deleteTestCaseStepByIds(Long[] ids) {
         return testCaseStepMapper.deleteTestCaseStepByIds(ids);
     }
 
@@ -95,8 +102,7 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
      * @return 结果
      */
     @Override
-    public int deleteTestCaseStepById(Long id)
-    {
+    public int deleteTestCaseStepById(Long id) {
         return testCaseStepMapper.deleteTestCaseStepById(id);
     }
 
@@ -114,7 +120,7 @@ public class TestCaseStepServiceImpl implements ITestCaseStepService
     /**
      * 执行jmeter用例步骤计划
      *
-     * @param id 用例步骤主键
+     * @param id             用例步骤主键
      * @param jmeterHomePath jmeter安装路径
      * @return 结果
      */
diff --git a/test-test/src/main/resources/mapper/test/TestCaseStepMapper.xml b/test-test/src/main/resources/mapper/test/TestCaseStepMapper.xml
index cb305e7..6e45c1c 100644
--- a/test-test/src/main/resources/mapper/test/TestCaseStepMapper.xml
+++ b/test-test/src/main/resources/mapper/test/TestCaseStepMapper.xml
@@ -215,6 +215,12 @@
         where id = #{id}
     </delete>
 
+    <delete id="deleteTestCaseStepByCaseId" parameterType="Long">
+        delete
+        from test_case_step
+        where case_id = #{caseId}
+    </delete>
+
     <delete id="deleteTestCaseStepByIds" parameterType="String">
         delete from test_case_step where id in
         <foreach item="id" collection="array" open="(" separator="," close=")">
diff --git a/test-ui/package.json b/test-ui/package.json
index fe1176c..1d7e924 100644
--- a/test-ui/package.json
+++ b/test-ui/package.json
@@ -52,6 +52,7 @@
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
     "vue": "2.6.12",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
diff --git a/test-ui/src/views/test/case/detail/index.vue b/test-ui/src/views/test/case/detail/index.vue
index 53ac928..7ef73c3 100644
--- a/test-ui/src/views/test/case/detail/index.vue
+++ b/test-ui/src/views/test/case/detail/index.vue
@@ -18,6 +18,7 @@
 <script>
 import {getCase, updateCase} from "@/api/test/case";
 import Step from "@/views/test/case/detail/step.vue";
+import {addCaseStep} from "@/api/test/caseStep";
 
 export default {
   name: "test",
@@ -52,10 +53,20 @@ export default {
         p.push({
           ...item,
           caseId: this.$route.query.id,
+          assertion: JSON.stringify(item.assertion),
+          assignment: JSON.stringify(item.assignment),
+          requestHeader: JSON.stringify(item.requestHeader),
+          requestParams: JSON.stringify(item.requestParams)
         });
       })
-      console.log(p)
-      this.loading = false;
+      addCaseStep({
+        caseId: this.$route.query.id,
+        list: p
+      }).then(res => {
+        this.$message.success("修改成功");
+        this.loading = false;
+        this.$tab.closeOpenPage({path: "/case"});
+      })
     }
   }
 }
diff --git a/test-ui/src/views/test/case/detail/page1.vue b/test-ui/src/views/test/case/detail/page1.vue
index 51af85f..c9cd3c1 100644
--- a/test-ui/src/views/test/case/detail/page1.vue
+++ b/test-ui/src/views/test/case/detail/page1.vue
@@ -174,12 +174,14 @@ export default {
   props: {
     form: {
       type: Object
+    },
+    hosts: {
+      type: Array
     }
   },
   data() {
     return {
       activeName: "Headers",
-      hosts: null,
       open: false,
       loading: false,
       total: 0,
@@ -191,11 +193,6 @@ export default {
       },
     }
   },
-  created() {
-    listHttp().then(res => {
-      this.hosts = res.data;
-    })
-  },
   methods: {
     folderHandleSelected(id) {
       if (id) {
diff --git a/test-ui/src/views/test/case/detail/page2.vue b/test-ui/src/views/test/case/detail/page2.vue
index fff7a18..3168b53 100644
--- a/test-ui/src/views/test/case/detail/page2.vue
+++ b/test-ui/src/views/test/case/detail/page2.vue
@@ -1,11 +1,106 @@
 <template>
   <div class="app-container">
-    2
+    <el-form :model="form" ref="form">
+      <el-form-item label="数据源" prop="datasourceId">
+        <el-select v-model="form.datasourceId" style="width: 100%;" clearable>
+          <el-option v-for="item in this.datasourceList" :key="item.id" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="SQL指令" name="sql">
+        <codemirror v-model="form.sqlCommand" :options="editorOptions" />
+      </el-tab-pane>
+      <el-tab-pane label="提取" name="assignment">
+        <el-table :data="form.assignment">
+          <el-table-column label="变量名">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入变量名" v-model="form.assignment[scope.$index].name" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="提取方式">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="提取对象">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="提取表达式">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入提取表达式" v-model="form.assignment[scope.$index].path" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="60">
+            <template slot-scope="scope">
+              <el-button v-if="form.assignment.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assignment', scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="校验" name="assertion">
+        <el-table :data="form.assertion">
+          <el-table-column label="描述">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入描述" v-model="form.assertion[scope.$index].name" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="对象">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入对象" v-model="form.assertion[scope.$index].source" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="条件">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="内容">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入内容" v-model="form.assertion[scope.$index].target" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="60">
+            <template slot-scope="scope">
+              <el-button v-if="form.assertion.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete('assertion', scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
+import { codemirror } from "vue-codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/sql/sql"; // 语言模式
+import "codemirror/theme/dracula.css";
 
+export default {
+  components: { codemirror },
+  props: {
+    form: {
+      type: Object
+    },
+    datasourceList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      activeName: "sql",
+      editorOptions: {
+        mode: "sql", // 代码语言
+        theme: "dracula", // 主题
+        lineNumbers: true, // 显示行号
+        tabSize: 2
+      }
+    }
+  },
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/test-ui/src/views/test/case/detail/page3.vue b/test-ui/src/views/test/case/detail/page3.vue
index 687ea07..c00a42d 100644
--- a/test-ui/src/views/test/case/detail/page3.vue
+++ b/test-ui/src/views/test/case/detail/page3.vue
@@ -1,11 +1,25 @@
 <template>
-  <div>
-    3
+  <div class="app-container">
+    <el-form :model="form" ref="form">
+      <el-form-item label="循环次数" prop="count">
+        <el-input v-model="form.count" placeholder="请输入循环次数"/>
+      </el-form-item>
+      <el-form-item label="并行执行" prop="count">
+        <el-switch v-model="form.async" active-color="#13ce66" inactive-color="#ff4949" :active-value="0" :inactive-value="2"/>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
 
+export default {
+  props: {
+    form: {
+      type: Object
+    }
+  },
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/test-ui/src/views/test/case/detail/page4.vue b/test-ui/src/views/test/case/detail/page4.vue
index f67b226..c411db3 100644
--- a/test-ui/src/views/test/case/detail/page4.vue
+++ b/test-ui/src/views/test/case/detail/page4.vue
@@ -1,11 +1,30 @@
 <template>
-  <div>
-    4
+  <div class="app-container">
+    <el-form :model="form" ref="form">
+      <el-form-item label="轮询次数" prop="count">
+        <el-input v-model="form.count" placeholder="请输入循环次数"/>
+      </el-form-item>
+      <el-form-item label="轮询间隔" prop="interval">
+        <el-input v-model="form.interval" placeholder="请输入轮询间隔"/>
+      </el-form-item>
+      <el-form-item label="轮询失败原因" prop="breakError">
+        <JsonEditorVue mode="text" v-model="form.breakError" class="jse-theme-dark"/>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
+import JsonEditorVue from "json-editor-vue";
 
+export default {
+  components: {JsonEditorVue},
+  props: {
+    form: {
+      type: Object
+    }
+  },
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/test-ui/src/views/test/case/detail/step.vue b/test-ui/src/views/test/case/detail/step.vue
index afdea9e..8de26e4 100644
--- a/test-ui/src/views/test/case/detail/step.vue
+++ b/test-ui/src/views/test/case/detail/step.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <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>
@@ -12,12 +12,15 @@
       <el-collapse-item :name="index" v-for="(item, index) in list" :key="index">
         <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 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.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"/>
+        <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"/>
       </el-collapse-item>
     </el-collapse>
     <el-empty v-else/>
@@ -34,20 +37,34 @@ import page1 from "./page1.vue"
 import page2 from "./page2.vue"
 import page3 from "./page3.vue"
 import page4 from "./page4.vue"
+import {listHttp} from "@/api/test/http";
+import {listDatasource} from "@/api/test/database";
 
 export default {
   dicts: ['step_type'],
   components: {page1, page2, page3, page4},
   data() {
     return {
+      loading: false,
       activeName: null,
       list: [],
+      hosts: [],
+      datasourceList: [],
     };
   },
   created() {
+    this.loading = true;
+    listHttp().then(res => {
+      this.hosts = res.data;
+    })
+    listDatasource().then(res => {
+      this.datasourceList = res.data;
+    })
     listCaseStep({caseId: this.$route.query.id}).then(res => {
       this.list = res.data;
+      this.loading = false;
     });
+
   },
   methods: {
     handleAdd(type) {