diff --git a/test-ui/package.json b/test-ui/package.json
index 7d5afe2..fe1176c 100644
--- a/test-ui/package.json
+++ b/test-ui/package.json
@@ -35,6 +35,7 @@
     "axios": "1.7.8",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
+    "cron-parser": "^2.0.4",
     "crypto-js": "4.2.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
diff --git a/test-ui/src/views/test/task/edit/taskDetails.vue b/test-ui/src/views/test/task/edit/taskDetails.vue
index 8cf8e60..a88def3 100644
--- a/test-ui/src/views/test/task/edit/taskDetails.vue
+++ b/test-ui/src/views/test/task/edit/taskDetails.vue
@@ -21,17 +21,17 @@
 <!--                    <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>-->
-                    <el-input v-model="form.crontab"/>
+                    <el-input v-model="form.crontab" @input="updateExecutionTimes" placeholder="请输入crontab表达式" />
                   </div>
                 </div>
                 <!-- 下 -->
                 <div class="expression-below">
-                  <span>crontab表达式展示 0 0 10 * * ？</span>
+                  <span>crontab表达式展示 0 1 10 * * ?</span>
                 </div>
               </div>
               <div class="executiontime">
                 <span>最近三次执行时间</span>
-                <div v-for="item in executionTimeList" :key="item.time">
+                <div v-for="(item, index) in executionTimeList" :key="index">
                   {{ item.time }}
                 </div>
               </div>
@@ -100,6 +100,7 @@
 </template>
 
 <script>
+import cronParser from "cron-parser";
 import caseTable from "./caseTable.vue";
 import {delTaskCase} from "@/api/test/taskCase";
 
@@ -116,6 +117,14 @@ export default {
     }
   },
   watch: {
+    'form.crontab': {
+      handler(newVal) {
+        if (newVal) {
+          this.updateExecutionTimes();
+        }
+      },
+      immediate: true, // 立即触发一次
+    },
     task: {
       handler(val) {
         if (val !== this.form) {
@@ -180,6 +189,7 @@ export default {
       ],
       value: "",
       form: {
+        crontab: '', // 用户输入的crontab表达式
         delivery1: false,
         delivery2: false,
         name: "",
@@ -187,6 +197,42 @@ export default {
     };
   },
   methods: {
+    // 根据crontab表达式更新执行时间
+    updateExecutionTimes() {
+      const crontab = this.form.crontab.trim();
+      if (!crontab) {
+        this.executionTimeList = [];
+        return;
+      }
+
+      try {
+        // 解析crontab表达式
+        const interval = cronParser.parseExpression(crontab);
+        const times = [];
+
+        // 获取最近三次执行时间
+        for (let i = 0; i < 3; i++) {
+          const nextTime = interval.next().toDate(); // 获取 Date 对象
+          const formattedTime = this.formatDate(nextTime); // 格式化时间
+          times.push({ time: formattedTime });
+        }
+
+        this.executionTimeList = times;
+      } catch (error) {
+        console.error('无效的crontab表达式:', error);
+        this.executionTimeList = [{ time: '无效的crontab表达式' }];
+      }
+    },
+    // 格式化日期为 YYYY-MM-DD HH:mm:ss
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
     getCaseList() {
       this.$emit("getData");
     },