feat: Monaco Editor代码编辑器 - CODE/SQL节点高亮+Juggle变量自动补全(需求17)

Author: pythonHuang

JuggleNet6.Frontend/package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
+    "@monaco-editor/loader": "^1.7.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.2",
@@ -18,6 +19,7 @@
     "docx": "^9.6.1",
     "element-plus": "^2.13.6",
     "file-saver": "^2.0.5",
+    "monaco-editor": "^0.55.1",
     "pinia": "^3.0.4",
     "vue": "^3.5.30",
     "vue-router": "^4.6.4"

JuggleNet6.Frontend/package.json

@@ -0,0 +1,100 @@
+<template>
+  <div ref="containerRef" :style="{ width: width, height: height, border: '1px solid #ddd', borderRadius: '4px' }"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import loader from '@monaco-editor/loader'
+
+const props = withDefaults(defineProps<{
+  modelValue?: string
+  language?: string
+  theme?: string
+  width?: string
+  height?: string
+  readOnly?: boolean
+}>(), {
+  modelValue: '',
+  language: 'javascript',
+  theme: 'vs-dark',
+  width: '100%',
+  height: '300px',
+  readOnly: false
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', val: string): void }>()
+
+const containerRef = ref<HTMLElement>()
+let monacoEditor: any = null
+
+onMounted(async () => {
+  // 配置 Monaco loader 使用 CDN（可自行更换为本地路径）
+  loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs' } })
+
+  await nextTick()
+  const monaco = await loader.init()
+
+  monacoEditor = monaco.editor.create(containerRef.value!, {
+    value: props.modelValue,
+    language: props.language,
+    theme: props.theme,
+    readOnly: props.readOnly,
+    automaticLayout: true,
+    minimap: { enabled: false },
+    fontSize: 13,
+    lineNumbers: 'on',
+    scrollBeyondLastLine: false,
+    wordWrap: 'on',
+    tabSize: 2,
+    // 代码提示：$var / $static 对象
+    suggestOnTriggerCharacters: true
+  })
+
+  // 注册 Juggle JS 变量提示
+  monaco.languages.registerCompletionItemProvider('javascript', {
+    provideCompletionItems: (model: any, position: any) => {
+      const word = model.getWordUntilPosition(position)
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: word.startColumn,
+        endColumn: word.endColumn
+      }
+      return {
+        suggestions: [
+          { label: '$var.getVariableValue', kind: monaco.languages.CompletionItemKind.Function,
+            insertText: "$var.getVariableValue('${1:varName}')", insertTextRules: 4,
+            documentation: '获取流程变量值', range },
+          { label: '$var.setVariableValue', kind: monaco.languages.CompletionItemKind.Function,
+            insertText: "$var.setVariableValue('${1:varName}', ${2:value})", insertTextRules: 4,
+            documentation: '设置流程变量值', range },
+          { label: '$static.getVariableValue', kind: monaco.languages.CompletionItemKind.Function,
+            insertText: "$static.getVariableValue('${1:varCode}')", insertTextRules: 4,
+            documentation: '获取全局静态变量', range },
+          { label: '$static.setVariableValue', kind: monaco.languages.CompletionItemKind.Function,
+            insertText: "$static.setVariableValue('${1:varCode}', ${2:value})", insertTextRules: 4,
+            documentation: '设置全局静态变量', range },
+          { label: 'JSON.parse', kind: monaco.languages.CompletionItemKind.Function,
+            insertText: 'JSON.parse(${1:str})', insertTextRules: 4, range },
+          { label: 'JSON.stringify', kind: monaco.languages.CompletionItemKind.Function,
+            insertText: 'JSON.stringify(${1:obj})', insertTextRules: 4, range }
+        ]
+      }
+    }
+  })
+
+  monacoEditor.onDidChangeModelContent(() => {
+    emit('update:modelValue', monacoEditor.getValue())
+  })
+})
+
+watch(() => props.modelValue, (newVal) => {
+  if (monacoEditor && monacoEditor.getValue() !== newVal) {
+    monacoEditor.setValue(newVal)
+  }
+})
+
+onBeforeUnmount(() => {
+  monacoEditor?.dispose()
+})
+</script>

JuggleNet6.Frontend/src/components/MonacoEditor.vue

@@ -494,9 +494,13 @@
             </div>
             <div class="prop-item">
               <label>脚本内容</label>
-              <el-input v-model="selectedNode.codeConfig.script" type="textarea" :rows="10"
-                placeholder="// 示例：&#10;var name = $var.getVariableValue('input_name')&#10;$var.setVariableValue('output_result', 'Hello, ' + name)"
-                class="code-editor" />
+              <MonacoEditor
+                v-model="selectedNode.codeConfig.script"
+                language="javascript"
+                theme="vs-dark"
+                height="240px"
+                style="border-radius:4px;overflow:hidden"
+              />
             </div>
           </template>
 
@@ -519,8 +523,13 @@
             </div>
             <div class="prop-item">
               <label>SQL 语句</label>
-              <el-input v-model="selectedNode.mysqlConfig.sql" type="textarea" :rows="5"
-                placeholder="SELECT * FROM table WHERE id = ${input_id}" class="code-editor" />
+              <MonacoEditor
+                v-model="selectedNode.mysqlConfig.sql"
+                language="sql"
+                theme="vs-dark"
+                height="160px"
+                style="border-radius:4px;overflow:hidden"
+              />
             </div>
             <div class="prop-item" v-if="selectedNode.mysqlConfig.operationType === 'QUERY'">
               <label>查询结果写入</label>
@@ -876,6 +885,7 @@ import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import request from '../../utils/request'
+import MonacoEditor from '../../components/MonacoEditor.vue'
 
 // VueFlow
 import { VueFlow, Position } from '@vue-flow/core'