diff --git a/test-ui/src/assets/images/header.png b/test-ui/src/assets/images/header.png
new file mode 100644
index 0000000..57030eb
Binary files /dev/null and b/test-ui/src/assets/images/header.png differ
diff --git a/test-ui/src/views/test/case/index.vue b/test-ui/src/views/test/case/index.vue
index 471c478..fec42c2 100644
--- a/test-ui/src/views/test/case/index.vue
+++ b/test-ui/src/views/test/case/index.vue
@@ -62,7 +62,7 @@ export default {
       });
     },
     handleAdd() {
-      this.$prompt('请输入名称', '提示', {
+      this.$prompt('请输入名称', '新增', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         inputPattern: /^(?!\s*$).+/,
@@ -80,7 +80,7 @@ export default {
       });
     },
     handleRowClick(row) {
-      this.$tab.openPage("用例 - " + row.name, "/case/detail", {id: row.id});
+      this.$tab.openPage(`用例[${row.name}]`, "/case/detail", {id: row.id});
     },
     handleDelete(id) {
       this.$modal.confirm('是否确认删除用例？').then(function () {
diff --git a/test-ui/src/views/test/task/edit/clickOutside.js b/test-ui/src/views/test/task/edit/clickOutside.js
new file mode 100644
index 0000000..f4019d3
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/clickOutside.js
@@ -0,0 +1,18 @@
+// clickOutside.js
+export default {
+  bind(el, binding, vnode) {
+    el.clickOutsideEvent = function (event) {
+      // 检查点击事件的目标元素是否是绑定指令的元素或其子元素
+      if (!(el === event.target || el.contains(event.target))) {
+        // 如果不是，则调用传递给指令的方法
+        vnode.context[binding.expression](event);
+      }
+    };
+    // 添加事件监听器
+    document.body.addEventListener("click", el.clickOutsideEvent);
+  },
+  unbind(el) {
+    // 移除事件监听器
+    document.body.removeEventListener("click", el.clickOutsideEvent);
+  },
+};
diff --git a/test-ui/src/views/test/task/edit/executionRecord.vue b/test-ui/src/views/test/task/edit/executionRecord.vue
new file mode 100644
index 0000000..649104e
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/executionRecord.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="button">
+        <el-button type="primary" icon="el-icon-video-play">搜索</el-button>
+        <i class="el-icon-setting"></i>
+      </div>
+    </div>
+    <div class="refresh">
+      <div class="refresh-icon">
+        <i class="el-icon-refresh"></i>
+        <span>刷新</span>
+      </div>
+    </div>
+    <div class="chart-container">
+      <div class="chart-instance">
+        <div>定时任务执行记录</div>
+        <lineChart />
+      </div>
+      <div class="chart-instance">
+        <div class="trend-chart">
+          <span>覆盖率趋势图</span>
+          <div>
+            <span class="select">选择应用</span>
+            <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <lineChartCover />
+      </div>
+    </div>
+    <div class="table-content">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="triggerTime" label="触发时间"> </el-table-column>
+        <el-table-column prop="startTime" label="开始时间"> </el-table-column>
+        <el-table-column prop="triggerMethod" label="触发方式">
+        </el-table-column>
+        <el-table-column prop="environment" label="执行环境"> </el-table-column>
+        <el-table-column label="状态">
+          <template slot-scope="scope">
+            <div class="status-cell">
+              <span class="status-icon success"></span>
+              <span class="status-text">{{ scope.row.status }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送状态">
+          <template slot-scope="scope">
+            <div class="status-cell">
+              <span class="status-icon pending"></span>
+              <span class="status-text">{{ scope.row.sendStatus }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="executionTime" label="执行耗时">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small"
+              >查看</el-button
+            >
+            <el-button type="text" size="small">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import lineChart from "./lineChart.vue";
+import lineChartCover from "./lineChartCover.vue";
+// import executiveReport from "./executiveReport.vue";
+export default {
+  components: {
+    lineChart,
+    lineChartCover,
+    // executiveReport,
+  },
+  data() {
+    return {
+      value: "",
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      tableData: [
+        {
+          triggerTime: "2025-02-19 10:00:00",
+          startTime: "2025-02-29 10:00:00",
+          triggerMethod: "定时",
+          environment: "中移商业保理平台",
+          status: "成功",
+          sendStatus: "未发送",
+          executionTime: "111s",
+        },
+        {
+          triggerTime: "2025-02-19 10:00:00",
+          startTime: "2025-02-29 10:00:00",
+          triggerMethod: "定时",
+          environment: "中移商业保理平台",
+          status: "成功",
+          sendStatus: "未发送",
+          executionTime: "111s",
+        },
+        {
+          triggerTime: "2025-02-19 10:00:00",
+          startTime: "2025-02-29 10:00:00",
+          triggerMethod: "定时",
+          environment: "中移商业保理平台",
+          status: "成功",
+          sendStatus: "未发送",
+          executionTime: "111s",
+        },
+        // 可以添加更多数据
+      ],
+      currentPage: 1,
+    };
+  },
+  methods: {
+    handleClick(row) {
+      this.$router.push({
+        name: "Report",
+      });
+    },
+    handleSizeChange() {},
+    handleCurrentChange() {},
+  },
+};
+</script>
+<style scoped lang="scss">
+.row {
+  border-bottom: 1px solid #e3e8f2;
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 0 24px 8px 24px;
+  .button {
+    align-items: center;
+    display: inline-flex;
+  }
+  .el-icon-setting {
+    font-size: 14px;
+    color: #343434;
+    margin-left: 10px;
+  }
+
+  .el-button {
+    height: 24px;
+    line-height: 22px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+}
+.refresh {
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 16px 24px;
+  .refresh-icon {
+    font-size: 12px;
+    color: #343434;
+    align-items: center;
+    display: inline-flex;
+  }
+  span {
+    font-size: 12px;
+    color: #343434;
+    margin-left: 10px;
+  }
+}
+.chart-container {
+  display: flex;
+
+  .chart-instance {
+    width: 50%;
+    padding: 16px;
+    border: 1px solid #e9f3fb;
+    margin-right: 16px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}
+.trend-chart {
+  display: flex;
+  justify-content: space-between;
+}
+.select {
+  color: #4f597f;
+  font-size: 12px;
+  padding-right: 8px;
+}
+.table-content {
+  padding-top: 24px;
+}
+
+.status-icon {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.status-icon.success {
+  background-color: green; // 成功状态图标颜色
+}
+
+.status-icon.pending {
+  background-color: gray; // 未发送状态图标颜色
+}
+
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
diff --git a/test-ui/src/views/test/task/edit/executiveReport.vue b/test-ui/src/views/test/task/edit/executiveReport.vue
new file mode 100644
index 0000000..e69de29
diff --git a/test-ui/src/views/test/task/edit/index.vue b/test-ui/src/views/test/task/edit/index.vue
new file mode 100644
index 0000000..403f376
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="content">
+    <div class="header" @click="handleOutClick">
+      <div class="back">
+        <span><i class="el-icon-arrow-left"></i></span>
+        <span>返回列表</span>
+      </div>
+      <div class="task">
+        <span class="collect"><i class="el-icon-star-off"></i></span>
+        <span class="name">任务名称</span>
+        <el-input :class="isEdit ? 'black' : 'red'" type="text" placeholder="请输入内容" v-model="text" maxlength="64" show-word-limit @click.native.stop="isEdit = true"/>
+      </div>
+    </div>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="任务详情" name="first">
+        <taskDetails />
+      </el-tab-pane>
+      <el-tab-pane label="执行记录" name="second">
+        <executionRecord />
+      </el-tab-pane>
+      <el-tab-pane label="操作记录" name="third">
+        <operationRecords />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import taskDetails from "./taskDetails.vue";
+import executionRecord from "./executionRecord.vue";
+import operationRecords from "./operationRecords.vue";
+export default {
+  components: {
+    taskDetails,
+    executionRecord,
+    operationRecords,
+  },
+  data() {
+    return {
+      text: "111", // 输入框内容
+      isEdit: false, // 是否禁用
+      activeName: "first",
+    };
+  },
+  methods: {
+    handleOutClick() {
+      this.isEdit = false; // 聚焦时设置为 true
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.header {
+  background-color: #fef9f1;
+  background-image: url(../../../../assets/images/header.png);
+  background-position-x: right;
+  background-position-y: top;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px 100px 16px 24px;
+}
+.back span {
+  color: rgb(50, 114, 254);
+  font-size: 12px;
+  font-weight: 400;
+}
+.task {
+  color: #4f597f;
+  font-size: 12px;
+  margin: 0 8px 0 0px;
+  display: flex;
+  align-items: center;
+  .collect {
+    margin-right: 10px;
+  }
+  .name {
+    margin-right: 10px;
+  }
+  .el-input {
+    flex: 1;
+  }
+}
+::v-deep .red {
+  .el-input__inner {
+    background: transparent;
+    border: none;
+  }
+  .el-input__suffix {
+    color: red;
+    display: none !important;
+  }
+}
+::v-deep .black {
+  .el-input__inner {
+    background: #fff;
+  }
+  .el-input__suffix {
+    display: inline-flex;
+  }
+}
+/* 修改 tab 标签的字体大小 */
+::v-deep .el-tabs__nav-wrap::after {
+  width: 100%;
+  height: 1px;
+  background-color: #e0e5f0;
+  border: none; /* 去掉默认的边框 */
+  padding: 0;
+}
+
+.el-tabs {
+  padding: 0 24px;
+}
+
+::v-deep .el-tabs__item {
+  font-size: 12px; /* 字体大小为 12px */
+  font-weight: 500;
+}
+</style>
diff --git a/test-ui/src/views/test/task/edit/lineChart.vue b/test-ui/src/views/test/task/edit/lineChart.vue
new file mode 100644
index 0000000..0c26bb6
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/lineChart.vue
@@ -0,0 +1,159 @@
+<template>
+  <!-- 修改为正确的闭合标签 -->
+  <div :class="className" :style="{ height: height, width: width }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "@/views/dashboard/mixins/resize";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "680px",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions();
+    },
+    setOptions() {
+      const option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["执行用例总数", "执行用例成功率"],
+          // 修改图例颜色
+          textStyle: {
+            color: "#686868",
+          },
+        },
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+          // 去掉背景保留背景线条
+          backgroundColor: "transparent",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            textStyle: {
+              color: "#686868",
+            },
+          },
+          data: [
+            "2025-01-21 10:00:00",
+            "2025-01-25 10:00:00",
+            "2025-01-29 10:00:00",
+            "2025-02-02 10:00:00",
+            "2025-02-06 10:00:00",
+            "2025-02-10 10:00:00",
+            "2025-02-14 10:00:00",
+            "2025-02-18 10:00:00",
+          ],
+        },
+        yAxis: [
+          {
+            type: "value",
+            // 去掉坐标轴名称
+            name: "",
+            min: 0,
+            max: 2,
+            interval: 0.5,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#686868",
+              },
+            },
+          },
+          {
+            type: "value",
+            // 去掉坐标轴名称
+            name: "",
+            min: 0,
+            max: 100,
+            interval: 25,
+            axisLabel: {
+              formatter: "{value}%",
+              textStyle: {
+                color: "#686868",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "执行用例总数",
+            type: "line",
+            yAxisIndex: 0, // 使用左边的纵坐标
+            data: [0.5, 1.2, 1.8, 1.5, 1.0, 0.8, 1.3, 1.7],
+            itemStyle: {
+              color: "blue", // 设置为蓝色
+            },
+          },
+          {
+            name: "执行用例成功率",
+            type: "line",
+            yAxisIndex: 1, // 使用右边的纵坐标
+            data: [25, 50, 75, 60, 40, 30, 70, 90],
+            itemStyle: {
+              color: "green", // 设置为绿色
+            },
+          },
+        ],
+      };
+      this.chart.setOption(option);
+    },
+  },
+};
+</script>
diff --git a/test-ui/src/views/test/task/edit/lineChartCover.vue b/test-ui/src/views/test/task/edit/lineChartCover.vue
new file mode 100644
index 0000000..79db731
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/lineChartCover.vue
@@ -0,0 +1,168 @@
+<template>
+  <!-- 修改为正确的闭合标签 -->
+  <div :class="className" :style="{ height: height, width: width }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "@/views/dashboard/mixins/resize";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "680px",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions();
+    },
+    setOptions() {
+      const option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["分支覆盖率", "方法覆盖率", "行覆盖率"],
+          // 修改图例颜色
+          textStyle: {
+            color: "#686868",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+          // 去掉背景保留背景线条
+          backgroundColor: "transparent",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            textStyle: {
+              color: "#686868",
+            },
+          },
+          data: [
+            "2025-01-21 10:00:00",
+            "2025-01-25 10:00:00",
+            "2025-01-29 10:00:00",
+            "2025-02-02 10:00:00",
+            "2025-02-06 10:00:00",
+            "2025-02-10 10:00:00",
+            "2025-02-14 10:00:00",
+            "2025-02-18 10:00:00",
+          ],
+        },
+        yAxis: [
+          {
+            type: "value",
+            // 去掉坐标轴名称
+            name: "",
+            min: 0,
+            max: 2,
+            interval: 0.5,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#686868",
+              },
+            },
+          },
+          {
+            type: "value",
+            // 去掉坐标轴名称
+            name: "",
+            min: 0,
+            max: 100,
+            interval: 25,
+            axisLabel: {
+              formatter: "{value}%",
+              textStyle: {
+                color: "#686868",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "分支覆盖率",
+            type: "line",
+            yAxisIndex: 0, // 使用左边的纵坐标
+            data: [0.5, 1.2, 1.8, 1.5, 1.0, 0.8, 1.3, 1.7],
+            itemStyle: {
+              color: "red", // 设置为蓝色
+            },
+          },
+          {
+            name: "方法覆盖率",
+            type: "line",
+            yAxisIndex: 1, // 使用右边的纵坐标
+            data: [25, 50, 75, 90, 40, 30, 70, 90],
+            itemStyle: {
+              color: "green", // 设置为绿色
+            },
+          },
+          {
+            name: "行覆盖率",
+            type: "line",
+            yAxisIndex: 1, // 使用右边的纵坐标
+            data: [25, 50, 75, 60, 40, 30, 70, 90],
+            itemStyle: {
+              color: "gray", // 设置为绿色
+            },
+          },
+        ],
+      };
+      this.chart.setOption(option);
+    },
+  },
+};
+</script>
diff --git a/test-ui/src/views/test/task/edit/operationRecords.vue b/test-ui/src/views/test/task/edit/operationRecords.vue
new file mode 100644
index 0000000..580607c
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/operationRecords.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <!-- 时间选择组件 -->
+    <div class="filter-container">
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="～"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        :default-value="['2025-02-16', '2025-02-19']"
+      >
+      </el-date-picker>
+    </div>
+
+    <!-- 表格 -->
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column type="index" label="序号"> </el-table-column>
+      <el-table-column prop="operationTime" label="操作时间"> </el-table-column>
+      <el-table-column prop="operator" label="操作人"> </el-table-column>
+      <el-table-column>
+        <template #header>
+          <span>ID</span>
+          <i class="el-icon-warning-outline" style="margin-left: 10px"></i>
+        </template>
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
+          <el-tooltip content="ID提示信息" placement="top">
+            <i
+              class="el-icon-info"
+              style="margin-left: 6px; color: #909399"
+            ></i>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column>
+        <template #header>
+          <span>名称</span>
+          <i class="el-icon-warning-outline" style="margin-left: 10px"></i>
+        </template>
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+          <el-tooltip content="名称提示信息" placement="top">
+            <i
+              class="el-icon-info"
+              style="margin-left: 6px; color: #909399"
+            ></i>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="operationType" label="操作类型"> </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "operationRecords",
+  data() {
+    return {
+      // 时间选择组件的默认值
+      dateRange: ["2025-02-16", "2025-02-19"],
+      // 表格数据（暂时为空）
+      tableData: [],
+    };
+  },
+  methods: {
+    handleClick(row) {
+      console.log(row);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 8px;
+}
+
+.el-icon-info {
+  cursor: pointer;
+}
+.table-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 40px;
+}
+</style>
diff --git a/test-ui/src/views/test/task/edit/report/components/pieChart.vue b/test-ui/src/views/test/task/edit/report/components/pieChart.vue
new file mode 100644
index 0000000..e545247
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/report/components/pieChart.vue
@@ -0,0 +1,111 @@
+<template>
+  <!-- 修改为正确的闭合标签 -->
+  <div :class="className" :style="{ height: height, width: width }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "@/views/dashboard/mixins/resize";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "430px",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions();
+    },
+    setOptions() {
+      const option = {
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          left: "20",
+        },
+        legend: {
+          right: "0",
+          top: "center",
+        },
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: "Search Engine" },
+              //   { value: 735, name: "Direct" },
+              //   { value: 580, name: "Email" },
+              //   { value: 484, name: "Union Ads" },
+              //   { value: 300, name: "Video Ads" },
+            ],
+          },
+        ],
+      };
+      this.chart.setOption(option);
+    },
+  },
+};
+</script>
diff --git a/test-ui/src/views/test/task/edit/report/index.vue b/test-ui/src/views/test/task/edit/report/index.vue
new file mode 100644
index 0000000..f1d06e9
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/report/index.vue
@@ -0,0 +1,292 @@
+<template>
+  <div class="task-page">
+    <div class="task-header">
+      <div class="task-header-left">
+        <i class="el-icon-back"></i>
+        <span class="task-header-title">任务信息</span>
+      </div>
+      <el-button type="primary" class="task-header-button">关联应用</el-button>
+    </div>
+    <div class="task-content">
+      <div class="task-left-panel">
+        <div class="task-panel-title">用例执行分布</div>
+        <pieChart />
+      </div>
+      <div class="task-right-panel">
+        <div class="task-panel-title">定时任务执行信息</div>
+        <div class="task-panel-content">
+          <div class="task-stats">
+            <div class="task-stats-total-cases">
+              <span class="task-stats-label">用例总数</span>
+              <span class="task-stats-value">2</span>
+            </div>
+            <div class="task-stats-step-count">
+              <span class="task-stats-label">用例步骤数</span>
+              <span class="task-stats-value">9</span>
+            </div>
+            <div class="task-stats-success-rate">
+              <span class="task-stats-label">成功率</span>
+              <span class="task-stats-value">100%</span>
+            </div>
+          </div>
+          <div class="task-details">
+            <div class="task-details-execution-time">
+              <div class="task-details-label">
+                <i class="el-icon-time"></i>
+                <span>执行耗时</span>
+              </div>
+              <div class="task-details-value">111s</div>
+            </div>
+            <div class="task-details-start-time">
+              <div class="task-details-label">
+                <i class="el-icon-time"></i>
+                <span>开始执行时间</span>
+              </div>
+              <div class="task-details-value">2025-02-19 10:00:00</div>
+            </div>
+            <div class="task-details-environment">
+              <div class="task-details-label">
+                <i class="el-icon-setting"></i>
+                <span>环境</span>
+              </div>
+              <div class="task-details-value">
+                中移商业保理平台-云龙测试-测试环境
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="任务详情(2)" name="first">
+        <el-collapse accordion>
+          <el-collapse-item>
+            <template slot="title">
+              一致性 Consistency<i class="header-icon el-icon-info"></i>
+            </template>
+            <div>
+              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+            </div>
+            <div>
+              在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="反馈 Feedback">
+            <div>
+              控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+            </div>
+            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+          </el-collapse-item>
+          <el-collapse-item title="效率 Efficiency">
+            <div>简化流程：设计简洁直观的操作流程；</div>
+            <div>
+              清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+            </div>
+            <div>
+              帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="可控 Controllability">
+            <div>
+              用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+            </div>
+            <div>
+              结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
+      <el-tab-pane label="执行记录(2)" name="second"> </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import pieChart from "./components/pieChart.vue";
+
+export default {
+  components: {
+    pieChart,
+  },
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+  methods: {
+    handleClick(event, tab) {
+      console.log(event, tab);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// .task-page {
+//   /* 可根据需要添加全局样式 */
+// }
+
+.task-header {
+  border-bottom: 1px solid #e3e8f2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+
+.task-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.task-header-title {
+  color: #4f597f;
+  font-size: 16px;
+  margin-left: 8px;
+}
+
+.el-icon-back {
+  background-color: #fff;
+  border: 1px solid #eaeaea;
+  border-radius: 50%;
+  color: #346fff;
+  font-size: 12px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.task-header-button {
+  height: 24px;
+  line-height: 22px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.task-content {
+  display: flex;
+  gap: 24px;
+  padding: 16px 16px;
+}
+
+.task-left-panel {
+  border: 1px solid #f4f5fc;
+  border-radius: 2px;
+  height: 250px;
+  padding: 16px 24px;
+  width: 500px;
+}
+
+.task-right-panel {
+  width: 100%;
+  border: 1px solid #f4f5fc;
+  border-radius: 2px;
+  height: 250px;
+  padding: 16px 24px;
+}
+
+.task-panel-title {
+  color: #4f597f;
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.task-panel-content {
+  display: flex;
+  flex-direction: column;
+  height: 198px;
+}
+
+.task-stats {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 54px;
+}
+
+.task-stats-total-cases,
+.task-stats-step-count,
+.task-stats-success-rate {
+  font-size: 12px;
+  color: #4f597f;
+}
+
+.task-stats-value {
+  font-size: 24px;
+  color: #4f597f;
+  padding-left: 16px;
+}
+
+.task-stats-total-cases {
+  width: 150px;
+}
+
+.task-stats-step-count {
+  width: 280px;
+}
+
+.task-stats-success-rate {
+  width: 330px;
+}
+
+.task-details {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 54px;
+}
+
+.task-details-execution-time,
+.task-details-start-time,
+.task-details-environment {
+  display: flex;
+  align-items: center;
+}
+
+.task-details-label {
+  display: flex;
+  align-items: center;
+  color: #9c9c9c;
+  font-size: 12px;
+  padding-right: 16px;
+}
+
+.task-details-label i {
+  margin-right: 8px;
+}
+
+.task-details-value {
+  color: #4f597f;
+}
+
+.task-details-execution-time {
+  width: 150px;
+}
+
+.task-details-start-time {
+  width: 280px;
+}
+
+.task-details-environment {
+  width: 330px;
+}
+/* 修改 tab 标签的字体大小 */
+::v-deep .el-tabs__nav-wrap::after {
+  width: 100%;
+  height: 1px;
+  background-color: #e0e5f0;
+  border: none; /* 去掉默认的边框 */
+  padding: 0;
+}
+
+.el-tabs {
+  padding: 0 24px;
+}
+
+::v-deep .el-tabs__item {
+  font-size: 12px; /* 字体大小为 12px */
+  font-weight: 500;
+}
+</style>
diff --git a/test-ui/src/views/test/task/edit/taskDetails.vue b/test-ui/src/views/test/task/edit/taskDetails.vue
new file mode 100644
index 0000000..9d1d425
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/taskDetails.vue
@@ -0,0 +1,735 @@
+<template>
+  <div>
+    <div class="spread">
+      <span class="headline" @click="handlecollapse">
+        <span>任务信息</span>
+        <i class="el-icon-arrow-down"></i>
+      </span>
+
+      <div class="mission" v-show="collapse">
+        <div class="mission_left">
+          <div class="min">
+            <div class="execute">执行频率</div>
+            <div class="wrapper">
+              <div class="expression">
+                <!-- 上 -->
+                <div class="expression-top">
+                  <span>crontab表达式</span>
+                  <i class="el-icon-warning-outline"></i>
+                </div>
+                <!-- 中 -->
+                <div class="expression-centre">
+                  <div class="time">
+                    <el-input
+                      style="width: 100px"
+                      v-model="inputItem.value"
+                      v-for="(inputItem, index) in inputGroup"
+                      :key="index"
+                    >
+                      <template slot="suffix">{{ inputItem.label }}</template>
+                    </el-input>
+                  </div>
+                </div>
+                <!-- 下 -->
+                <div class="expression-below">
+                  <span>crontab表达式展示 0 0 10 * * ？</span>
+                </div>
+              </div>
+              <div class="executiontime">
+                <span>最近三次执行时间</span>
+                <div v-for="item in executionTimeList" :key="item.time">
+                  {{ item.time }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="footer">
+            <div>
+              <span>所在分组</span>
+              <el-select v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <span class="way">
+              <span>用例执行方式</span>
+              <template>
+                <el-radio v-model="radio" label="1">备选项</el-radio>
+                <el-radio v-model="radio" label="2">备选项</el-radio>
+              </template>
+            </span>
+            <div class="avatar">
+              <span>创建人</span>
+              <el-avatar
+                :size="14"
+                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+              ></el-avatar>
+              <span>涂卫军</span>
+            </div>
+          </div>
+        </div>
+        <div class="mission_right">
+          <el-form ref="form" :model="form" label-width="120px">
+            <el-form-item label="启动定时任务">
+              <el-switch v-model="form.delivery1"></el-switch>
+            </el-form-item>
+            <el-form-item label="失败用例重试">
+              <el-switch v-model="form.delivery2"></el-switch>
+            </el-form-item>
+            <el-form-item label="最大重试次数">
+              <el-input v-model="form.name" style="width: 100px"></el-input>
+              <span class="restrict">最小1次，最大10次</span>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="selected">
+        <span class="headline" @click="handlecollapse1">
+          <span>已选用例列表</span>
+          <i class="el-icon-arrow-down"></i>
+        </span>
+        <el-row>
+          <el-button type="primary" class="append-bt" @click="usecase"
+            >添加用例</el-button
+          >
+        </el-row>
+      </div>
+      <div class="form-container" v-show="collapse1">
+        <div class="form-container-left">
+          <div class="menu-list-item">
+            <div class="menu-itme-left">
+              <i class="el-icon-menu" style="font-size: 14px"></i>
+              <div class="menu-itme-text">
+                <span class="text-top">全部用例</span>
+              </div>
+            </div>
+          </div>
+          <div class="menu-list-item">
+            <div class="menu-itme-left">
+              <i class="el-icon-menu" style="font-size: 14px"></i>
+              <div class="menu-itme-text">
+                <span class="text-top">中移商业保理平台</span>
+                <span class="text-bottom">指定接口用例</span>
+              </div>
+            </div>
+            <span>
+              <span class="num">2</span>
+              <i
+                class="el-icon-edit icon"
+                style="margin-right: 12px; color: #343434"
+              ></i>
+              <i class="el-icon-delete icon"></i>
+            </span>
+          </div>
+        </div>
+        <div class="table">
+          <div class="table-header">
+            <span>中移商业保理平台</span>
+            <el-input
+              placeholder="请输入内容"
+              v-model="input3"
+              style="width: 400px"
+            >
+              <el-select v-model="select" slot="prepend" placeholder="请选择">
+                <el-option label="餐厅名" value="1"></el-option>
+                <el-option label="订单号" value="2"></el-option>
+                <el-option label="用户电话" value="3"></el-option>
+              </el-select>
+              <el-button slot="append" icon="el-icon-search"></el-button>
+            </el-input>
+          </div>
+          <el-table ref="filterTable" :data="tableData" style="width: 100%">
+            <el-table-column prop="name" label="ID" width="180">
+            </el-table-column>
+            <el-table-column prop="example" label="用例名称">
+              <template slot-scope="scope">
+                <span class="icon--edit">A</span>
+                <span class="icon__pencil">中</span>
+                <span>{{ scope.row.example }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="用例状态">
+              <template slot-scope="scope">
+                <i class="el-icon-success"></i>
+                <span>{{ scope.row.address }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="tag" label="创建人" width="100">
+              <template slot-scope="scope">
+                <el-avatar
+                  :size="14"
+                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                ></el-avatar>
+                <span>{{ scope.row.tag }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" width="180" sortable>
+              <template #header>
+                <span>用例执行优先级</span>
+                <i class="el-icon-warning-outline"></i>
+              </template>
+              <template slot-scope="scope">
+                <span
+                  v-if="!scope.row.isInput"
+                  class="table-input-text"
+                  @click="handleTableInputClick(scope.row)"
+                >
+                  <span>{{ scope.row.date || "未设置，点击输入" }}</span>
+                  <i class="el-icon-warning-outline icon"></i>
+                </span>
+                <el-input-number
+                  v-if="scope.row.isInput"
+                  style="width: 140px"
+                  v-model="scope.row.date"
+                  controls-position="right"
+                  :min="1"
+                  :max="10"
+                  placeholder="未设置，点击输入"
+                  class="table-input"
+                ></el-input-number>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination">
+            <el-pagination
+              background
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div class="selected">
+          <span class="headline" @click="handlecollapse2">
+            <span>关联应用</span>
+            <i class="el-icon-warning-outline"></i>
+            <i class="el-icon-arrow-down"></i>
+          </span>
+          <el-row>
+            <el-button type="primary" class="append-bt">关联应用</el-button>
+          </el-row>
+        </div>
+        <div v-show="collapse2">
+          <el-table ref="filterTable" :data="tableData2" style="width: 100%">
+            <el-table-column prop="name" label="应用名称" align="center">
+            </el-table-column>
+            <el-table-column prop="address" label="实例数" align="center">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <el-dialog :visible.sync="dialogFormVisible">
+      <template #title>
+        <div class="tab-line">
+          <span style="margin-right: 20px">添加用例</span>
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="手动选择" name="first"> </el-tab-pane>
+            <el-tab-pane label="提升覆盖率推荐" name="second"> </el-tab-pane>
+          </el-tabs>
+        </div>
+        <test1 v-if="activeName == 'first'" />
+        <test2 v-if="activeName == 'second'" />
+      </template>
+      <div slot="footer" class="dialog-footer" v-if="activeName == 'first'">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import clickOutside from "./clickOutside.js";
+import test1 from "./test1.vue";
+import Test2 from "./test2.vue";
+import test2 from "./test2.vue";
+
+export default {
+  directives: {
+    clickoutside: clickOutside, // 注册指令
+  },
+  components: {
+    test1,
+    test2,
+  },
+  data() {
+    return {
+      activeName: "first",
+      collapse: true,
+      collapse1: true,
+      collapse2: true,
+      dialogFormVisible: false,
+      input2: "0",
+      radio: "1",
+      inputGroup: [
+        {
+          label: "秒",
+          value: "00",
+        },
+        {
+          label: "分",
+          value: "00",
+        },
+        {
+          label: "时",
+          value: "00",
+        },
+        {
+          label: "日",
+          value: "00",
+        },
+        {
+          label: "月",
+          value: "00",
+        },
+        {
+          label: "周",
+          value: "00",
+        },
+      ],
+      executionTimeList: [
+        {
+          time: "2025-02-18 10:00:00",
+        },
+        {
+          time: "2025-02-19 10:00:00",
+        },
+        {
+          time: "2025-02-20 10:00:00",
+        },
+      ],
+      value: "",
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      form: {
+        delivery1: false,
+        delivery2: false,
+        name: "",
+      },
+      input3: "",
+      tableData: [
+        {
+          date: "",
+          name: "王小虎",
+          example: "授信信息管理",
+          address: "通过",
+          tag: "家",
+          isInput: false,
+        },
+        {
+          date: "",
+          name: "王小虎",
+          example: "授信信息管理",
+          address: "通过",
+          tag: "公司",
+          isInput: false,
+        },
+        {
+          date: "",
+          name: "王小虎",
+          example: "授信信息管理",
+          address: "通过",
+          tag: "家",
+          isInput: false,
+        },
+        {
+          date: "",
+          name: "王小虎",
+          example: "授信信息管理",
+          address: "通过",
+          tag: "公司",
+          isInput: false,
+        },
+      ],
+      tableData2: [
+        {
+          name: "cmcf-scfp",
+          address: "0",
+        },
+        {
+          name: "cmcf-scfp",
+          address: "0",
+        },
+      ],
+      currentPage: 4,
+      select: "",
+    };
+  },
+  methods: {
+    usecase() {
+      this.dialogFormVisible = !this.dialogFormVisible;
+    },
+    handlecollapse() {
+      this.collapse = !this.collapse;
+    },
+    handlecollapse1() {
+      this.collapse1 = !this.collapse1;
+    },
+    handlecollapse2() {
+      this.collapse2 = !this.collapse2;
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleTableInputClick(row) {
+      // this.tableData.forEach((item) => (item.isInput = false)); // 关闭其他输入框
+      row.isInput = true; // 打开当前输入框
+    },
+    handleClickOutside() {
+      this.tableData.forEach((item) => (item.isInput = false));
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.headline {
+  color: #4f597f;
+  font-size: 14px;
+  font-weight: 500;
+  .el-icon-warning-outline {
+    margin: 10px 0 0 16px;
+  }
+  .el-icon-arrow-down {
+    background-color: #f3f4f9;
+    border-radius: 1px;
+    margin: 0 0 0 16px;
+  }
+}
+
+.mission {
+  border: 1px solid #ebf0fa;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 8px;
+  margin: 16px 0;
+}
+.mission_left {
+  display: flex;
+  flex-direction: column;
+  margin-right: 32px;
+}
+.min {
+  display: flex;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  display: flex;
+  padding: 0 12px;
+  position: relative;
+}
+.execute {
+  align-items: center;
+  color: #8e9eb1;
+  display: flex;
+  font-size: 12px;
+  line-height: 20px;
+  margin-right: 16px;
+}
+.wrapper {
+  width: 948px;
+  background-color: #f3f4f9;
+  border-radius: 4px;
+  display: flex;
+  padding: 16px;
+  position: relative;
+}
+.expression {
+  width: 100%;
+  .expression-top {
+    color: #8e9eb1;
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+  }
+  .expression-centre {
+    width: 100%;
+    align-items: flex-start;
+    padding: 12px 0 6px;
+    display: inline-flex;
+    padding-right: 16px;
+  }
+}
+
+::v-deep .time {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .el-input__inner {
+    height: 30px;
+    line-height: 30px;
+    border: none;
+  }
+  .el-input__suffix-inner {
+    line-height: 30px;
+    color: #000;
+  }
+}
+.executiontime {
+  font-size: 12px;
+  color: #9c9c9c;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 20px;
+  padding-left: 16px;
+  width: 200px;
+  border-left: 1px solid #e1e6f0;
+}
+.expression-below {
+  color: #8e9eb1;
+  font-size: 12px;
+  height: 20px;
+  line-height: 20px;
+}
+.footer {
+  display: flex;
+  align-items: center;
+  padding: 12px 12px 0 12px;
+  span {
+    align-items: center;
+    color: #8e9eb1;
+    font-size: 12px;
+    line-height: 20px;
+    margin-right: 16px;
+  }
+}
+.way {
+  padding: 0 12px;
+}
+::v-deep .el-radio {
+  margin-right: 20px;
+}
+::v-deep .el-radio__inner {
+  width: 12px;
+  height: 12px;
+}
+::v-deep .el-radio__label {
+  font-size: 12px;
+}
+::v-deep .footer .avatar {
+  display: flex;
+  align-items: center;
+}
+.mission_right {
+  padding-right: 50px;
+}
+.el-form-item {
+  margin-bottom: 6px;
+}
+::v-deep .el-form-item__label {
+  color: #8e9eb1;
+  font-size: 12px;
+  line-height: 36px;
+}
+.restrict {
+  color: #8e9eb1;
+  font-size: 12px;
+  line-height: 36px;
+  padding-left: 10px;
+}
+// 标题
+.selected {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 8px;
+}
+.append-bt {
+  border-radius: 4px;
+  height: 32px;
+}
+.form-container {
+  display: flex;
+  border: 1px solid #ebf0fa;
+  border-radius: 4px;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  .form-container-left {
+    border-right: 1px solid #e3e8f2;
+    display: flex;
+    flex-direction: column;
+    // width: 280px;
+  }
+}
+.menu-list-item {
+  display: flex;
+  justify-content: space-between;
+  width: 300px;
+  padding: 16px;
+  .num {
+    display: inline-block;
+  }
+  .icon {
+    display: none;
+  }
+  &:hover {
+    background-color: #ebf1ff;
+    .num {
+      display: none;
+    }
+    .icon {
+      display: inline-block;
+    }
+  }
+  .menu-itme-left {
+    display: flex;
+    .menu-itme-text {
+      display: flex;
+      flex-direction: column;
+      margin-left: 8px;
+      .text-top {
+        line-height: 14px;
+        color: #343434;
+      }
+      .text-bottom {
+        margin-top: 14px;
+        color: #9c9c9c;
+      }
+    }
+  }
+}
+.table {
+  width: calc(100% - 300px);
+  padding: 24px 24px 0;
+  .table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+}
+.icon--edit {
+  background-color: #33bc5a;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  color: #fff;
+  border-radius: 2px;
+  margin-right: 10px;
+}
+.icon__pencil {
+  background-color: #fec47b;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  color: #fff;
+  border-radius: 2px;
+  margin-right: 10px;
+}
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+::v-deep .table-input {
+  .el-input__inner {
+    border: none;
+  }
+}
+.table-input-text {
+  &:hover {
+    .icon {
+      display: inline-block;
+    }
+  }
+  .icon {
+    display: none;
+  }
+}
+.el-icon-success {
+  width: 14px;
+  height: 14px;
+  color: rgb(51, 188, 90);
+  margin-right: 10px;
+}
+.footer .avatar {
+  display: flex;
+  align-items: center;
+}
+::v-deep .table .el-table .cell {
+  display: flex;
+  align-items: center;
+  .el-avatar--circle {
+    margin-right: 10px;
+  }
+}
+/* 修改 tab 标签的字体大小 */
+
+::v-deep .el-tabs {
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-tabs__item {
+    font-size: 12px; /* 字体大小为 12px */
+    font-weight: 500;
+  }
+}
+.tab-line {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ebf0fa;
+}
+::v-deep .el-dialog {
+  .el-dialog__body {
+    padding: 10px;
+  }
+}
+</style>
diff --git a/test-ui/src/views/test/task/edit/test1.vue b/test-ui/src/views/test/task/edit/test1.vue
new file mode 100644
index 0000000..7d5e2f2
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/test1.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="80px" class="content">
+      <el-form-item label="选择用例库">
+        <el-select v-model="form.region" placeholder="请选择用例库">
+          <el-option label="中移商业保理平台" value="shanghai"></el-option>
+          <el-option label="中移商业保理平台" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择用例">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="全部接口用例"></el-radio>
+          <el-radio label="目录下全部用例"></el-radio>
+          <el-radio label="指定接口用例"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  padding: 16px;
+}
+</style>
diff --git a/test-ui/src/views/test/task/edit/test2.vue b/test-ui/src/views/test/task/edit/test2.vue
new file mode 100644
index 0000000..6d2fcd6
--- /dev/null
+++ b/test-ui/src/views/test/task/edit/test2.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div class="title">
+      根据未覆盖代码，提供与其关联的用例和无用例覆盖的接口，补充用例并执行，重新观察全量覆盖率数值变化。
+    </div>
+    <div class="container">
+      <div class="example-container">
+        <div class="example-title">
+          <span class="use">应用</span>
+          <span class="real">实例</span>
+        </div>
+        <div
+          class="example-item"
+          v-for="example in exampleList"
+          :key="example.label"
+        >
+          <span class="data-name1">
+            <i class="el-icon-s-order"></i>
+            <span>{{ example.label }}</span>
+          </span>
+          <span class="data-name2">{{ example.value }}</span>
+        </div>
+      </div>
+      <div class="content-container">
+        <div class="form-container">
+          <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="覆盖范围">
+              <el-radio-group v-model="form.resource">
+                <el-radio label="应用"></el-radio>
+                <el-radio label="用例集"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item label="活动区域">
+              <el-select v-model="form.region" placeholder="请选择活动区域">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="活动时间">
+              <el-col :span="11">
+                <el-date-picker
+                  v-model="form.date"
+                  type="datetimerange"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :default-time="['12:00:00']"
+                >
+                </el-date-picker>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="活动名称">
+              <el-input v-model="form.name" :disabled="true"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">生成</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="table-container">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column fixed prop="date" label="日期"> </el-table-column>
+            <el-table-column prop="name" label="姓名"> </el-table-column>
+            <el-table-column prop="province" label="省份"> </el-table-column>
+            <el-table-column fixed="right" label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  @click="handleClick(scope.row)"
+                  type="text"
+                  size="small"
+                  >查看</el-button
+                >
+                <el-button type="text" size="small">编辑</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      exampleList: [
+        {
+          label: "cmcf-scfp",
+          value: "0",
+        },
+      ],
+      form: {
+        name: "985e1a832f5317923eccf1a0caa8b6c6",
+        region: "",
+        date: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1517 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1519 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1516 弄",
+          zip: 200333,
+        },
+      ],
+    };
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  display: flex;
+  background-color: #f0f7ff;
+  border: 1px solid #84b4ff;
+  border-radius: 6px;
+  color: #343434;
+  font-size: 12px;
+  padding: 8px;
+  margin: 16px 0;
+}
+// 内容
+.container {
+  background-color: #fff;
+  border-radius: 2px;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}
+.content-container {
+  width: 100%;
+  height: 450px;
+  overflow-y: scroll;
+  padding-left: 16px;
+}
+.example-container {
+  border-right: 1px solid #e3e8f2;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.example-title {
+  align-items: center;
+  background-color: #fafafa;
+  display: flex;
+  font-weight: 500;
+  height: 40px;
+  padding: 0 24px;
+  color: #343434;
+  font-size: 12px;
+  font-weight: 500;
+  .use {
+    width: 172px;
+  }
+  .real {
+    width: 50px;
+  }
+}
+// 应用下面的内容
+.example-item {
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 20px;
+  .data-name1 {
+    width: 172px;
+    color: #343434;
+    font-size: 12px;
+    .el-icon-s-order {
+      color: #84b4ff;
+      margin-right: 10px;
+      font-size: 18px;
+    }
+  }
+  .data-name2 {
+    width: 50px;
+    color: #343434;
+    font-size: 12px;
+  }
+}
+</style>