Crontab：add show crontab next 5 execution times

package.json

@@ -41,8 +41,8 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
-    "@types/markdown-it": "^13.0.7",
     "@types/figlet": "^1.5.8",
+    "@types/markdown-it": "^13.0.7",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -53,6 +53,7 @@
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
     "country-code-lookup": "^0.1.0",
+    "cron-parser": "^4.9.0",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",

src/tools/crontab-generator/crontab-generator.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
+import { parseExpression } from 'cron-parser';
 import { useStyleStore } from '@/stores/style.store';
 
 function isCronValid(v: string) {
@@ -92,13 +93,31 @@ const helpers = [
   },
 ];
 
+function getLastExecutionTimes(cronExpression: string) {
+  const interval = parseExpression(cronExpression);
+  const times = [];
+  for (let i = 0; i < 5; i++) {
+    times.push(interval.next().toJSON());
+  }
+  return times;
+}
+
 const cronString = computed(() => {
   if (isCronValid(cron.value)) {
     return cronstrue.toString(cron.value, cronstrueConfig);
   }
   return ' ';
 });
 
+const executionTimesString = computed(() => {
+  if (isCronValid(cron.value)) {
+    const lastExecutionTimes = getLastExecutionTimes(cron.value);
+    const executionTimesString = lastExecutionTimes.join('\n');
+    return `Next 5 execution times:\n${executionTimesString}`;
+  }
+  return ' ';
+});
+
 const cronValidationRules = [
   {
     validator: (value: string) => isCronValid(value),
@@ -123,6 +142,10 @@ const cronValidationRules = [
       {{ cronString }}
     </div>
 
+    <div class="cron-execution-string">
+      {{ executionTimesString }}
+    </div>
+
     <n-divider />
 
     <div flex justify-center>
@@ -187,6 +210,14 @@ const cronValidationRules = [
   margin: 5px 0 15px;
 }
 
+.cron-execution-string{
+  text-align: center;
+  font-size: 14px;
+  opacity: 0.8;
+  margin: 5px 0 15px;
+  white-space: pre-wrap;
+}
+
 pre {
   overflow: auto;
   padding: 10px 0;