feat: CornJob shell script syntax highlighting

liuruibin · Dec 13, 2024 · 16cf163 · 16cf163
1 parent 0d988bb
commit 16cf163
Showing 1 changed file with 17 additions and 1 deletion.
diff --git 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();