From 96329967ba8d5432154da5d411523b8e7e0b2b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=91=9E=E6=96=8C?= <bin@fit2cloud.com>
Date: Fri, 13 Dec 2024 21:31:58 +0800
Subject: [PATCH] feat: CornJob shell script syntax highlighting (#7357)

---
 frontend/src/views/cronjob/operate/index.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index 3b417ef1e..02b80a01f 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -207,7 +207,18 @@
                     </el-form-item>
 
                     <el-form-item v-if="hasScript()" :label="$t('cronjob.shellContent')" prop="script">
-                        <el-input clearable type="textarea" :rows="5" v-model="dialogData.rowData!.script" />
+                        <codemirror
+                            :autofocus="true"
+                            :indent-with-tab="true"
+                            :tabSize="4"
+                            :lineWrapping="true"
+                            style="width: 100%; margin-top: 5px"
+                            theme="cobalt"
+                            :styleActiveLine="true"
+                            :matchBrackets="true"
+                            :extensions="extensions"
+                            v-model="dialogData.rowData!.script"
+                        />
                     </el-form-item>
 
                     <el-form-item
@@ -440,6 +451,11 @@ import { loadDefaultSpec, specOptions, transObjToSpec, transSpecToObj, weekOptio
 import { storeToRefs } from 'pinia';
 import { GlobalStore } from '@/store';
 import LicenseImport from '@/components/license-import/index.vue';
+import { Codemirror } from 'vue-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+const extensions = [javascript(), oneDark];
 
 const router = useRouter();