add show crontab next 5 execution times

(cherry picked from commit 9741794f71004822e7d2e9399c932fe66cdff34d)

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

@@ -2,6 +2,7 @@
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { useStyleStore } from '@/stores/style.store';
+import { parseExpression } from 'cron-parser';
 
 function isCronValid(v: string) {
   return isValidCron(v, { allowBlankDay: true, alias: true, seconds: true });
@@ -21,7 +22,7 @@ const helpers = [
   {
     symbol: '*',
     meaning: 'Any value',
-    example: '* * * *',
+    example: '* * * *', 
     equivalent: 'Every minute',
   },
   {
@@ -92,6 +93,18 @@ const helpers = [
   },
 ];
 
+function getLastExecutionTimes(cronExpression: string) {
+  const interval = parseExpression(cronExpression);
+  const times = [];
+  
+  // Get the last five execution 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);
@@ -99,6 +112,16 @@ const cronString = computed(() => {
   return ' ';
 });
 
+
+const executionTimesString = computed(() => {
+  if (isCronValid(cron.value)) {
+    const lastExecutionTimes = getLastExecutionTimes(cron.value);
+    const executionTimesString = lastExecutionTimes.join('<br>'); // 使用 <br> 标签
+    return `Next 5 execution times:<br>${executionTimesString}`; // 在这里也添加 <br> 标签
+  }
+  return ' ';
+});
+
 const cronValidationRules = [
   {
     validator: (value: string) => isCronValid(value),
@@ -123,6 +146,8 @@ const cronValidationRules = [
       {{ cronString }}
     </div>
 
+    <div v-html="executionTimesString" class="cron-execution-string"></div>
+
     <n-divider />
 
     <div flex justify-center>
@@ -187,6 +212,13 @@ const cronValidationRules = [
   margin: 5px 0 15px;
 }
 
+.cron-execution-string{
+  text-align: center;
+  font-size: 14px;
+  opacity: 0.8;
+  margin: 5px 0 15px;
+}
+
 pre {
   overflow: auto;
   padding: 10px 0;