feat(): 增加codemirror在线代码编辑器

package.json

@@ -39,6 +39,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
+    "codemirror": "^5.65.16",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
     "element-ui": "2.15.13",
@@ -53,6 +54,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",

src/assets/font/font.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "JetBrainsMono-Medium";
+  src: '@/assets/font/JetBrains/JetBrainsMono-Medium.ttf';
+  font-weight: normal;
+  font-style: normal;
+}

src/main.js

@@ -2,6 +2,9 @@ import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 
+// 在 main.js 中引入
+import '@/assets/font/font.css'
+
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 

src/views/ruleEngine/engineConfig/index.vue

@@ -1,14 +1,85 @@
 <template>
   <div>
-    规则配置
+    <div class="code-edit">
+      <codemirror ref="codeMirror" :value="code" :options="cmOptions" />
+    </div>
   </div>
 </template>
 
 <script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/mode/clike/clike';
+// cm-setting.js
+// 组件样式
+import 'codemirror/lib/codemirror.css';
+// 主题
+import 'codemirror/theme/eclipse.css';
+// import 'codemirror/theme/monokai.css';
+
+// html代码高亮
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+
+// 语言模式
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/xml/xml.js';
+// 代码展开折叠
+import 'codemirror/addon/fold/foldcode.js';
+import 'codemirror/addon/fold/foldgutter.js';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/fold/brace-fold.js';
 export default {
+  components: {
+    codemirror,
+  },
+  props: {
+    readOnly: {
+      default: false,
+      type: Boolean
+    }
+  },
   name: "EngineConfig",
   data() {
-    return {}
+    return {
+      codemirror: null,
+      code: 'package com.ruoyi;\n' +
+        '\n' +
+        'import org.mybatis.spring.annotation.MapperScan;\n' +
+        'import org.springframework.boot.SpringApplication;\n' +
+        'import org.springframework.boot.autoconfigure.SpringBootApplication;\n' +
+        'import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;\n' +
+        '\n' +
+        '/**\n' +
+        ' * 启动程序\n' +
+        ' *\n' +
+        ' * @author ruoyi\n' +
+        ' */\n' +
+        '@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})\n' +
+        'public class RuoYiApplication {\n' +
+        '    public static void main (String[] args) {\n' +
+        '        SpringApplication.run(RuoYiApplication.class, args);\n' +
+        '    }\n' +
+        '}\n',
+      cmOptions: {
+        autoRefresh: true, // 重点是这句，为true
+        value: '', // 初始内容
+        mode: 'text/x-java', //实现Java代码高亮
+        tabSize: 4, // tab的空格宽度
+        styleActiveLine: true, // 设置光标所在行高亮true/false
+        lineNumbers: true, //显示行号
+        contentHeight: 800,
+        theme: 'eclipse', //设置主题cobalt/monokai
+        // json: true,
+        readOnly: this.readOnly, // 设置为只读true/false;也可设置为"nocursor"失去焦点
+        lineWrapping: false,
+        foldGutter: true,
+        gutters: [
+          'CodeMirror-lint-markers', //代码错误检测
+          'CodeMirror-linenumbers',
+          'CodeMirror-foldgutter', //展开折叠
+        ],
+      },
+    }
   },
   created() {
   },
@@ -16,6 +87,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 
+.CodeMirror {
+  font-family: 'JetBrainsMono-Medium', monospace;
+  height: auto;
+}
+
+.CodeMirror-lines {
+  line-height: 1.5; /* 这里的1.5是示例，表示行间距是字体大小的1.5倍 */
+}
 </style>