feat: codemirror增加sql支持

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "@codemirror/lang-javascript": "^6.1.7",
+    "@codemirror/lang-sql": "^6.5.4",
     "@codemirror/lang-vue": "^0.1.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.10.1",

src/components/CodeMirror/index.tsx

@@ -4,6 +4,8 @@ import { basicSetup } from 'codemirror'
 import { EditorView } from '@codemirror/view'
 import { EditorState, StateEffect } from '@codemirror/state'
 import { javascript } from '@codemirror/lang-javascript'
+import { sql } from '@codemirror/lang-sql'
+
 import { useId } from '@/hooks'
 
 export const CodeMirrorTsx = defineComponent({
@@ -16,6 +18,10 @@ export const CodeMirrorTsx = defineComponent({
     bodyJson: {
       type: String,
       default: ''
+    },
+    numberOfRows: {
+      type: Number,
+      default: 6
     }
   },
   setup (props, ctx) {
@@ -28,13 +34,22 @@ export const CodeMirrorTsx = defineComponent({
     const view = ref<EditorView>()
 
     const transDoc = () => {
+      if (props.numberOfRows && !props.bodyJson) {
+        return new Array(props.numberOfRows).fill(0).map(item => '\n').join('')
+      }
       return props.bodyType === 'javascript' ? props.bodyJson : JSON.stringify(JSON.parse(props.bodyJson), null, '\t')
     }
 
     const createView = () => {
+      const extensions = [basicSetup]
+      if (props.bodyType === 'javascript') {
+        extensions.push(javascript())
+      } else if (props.bodyType === 'sql') {
+        extensions.push(sql())
+      }
       const editorState = EditorState.create({
         doc: transDoc(),
-        extensions: [basicSetup, javascript()]
+        extensions: extensions
       })
 
       view.value = new EditorView({

src/pages/Iot/model/components/plugins.vue

@@ -49,6 +49,7 @@ import { ref, onMounted, reactive } from 'vue'
 import { ModelCmdController, ModelController } from '@/controller'
 import { useRoute } from 'vue-router'
 import { computed } from '@vue/reactivity'
+import { sql } from '@codemirror/lang-sql'
 
 const placeholder = computed(() => {
   return state.decode
@@ -133,7 +134,7 @@ onMounted(() => {
 const createView = () => {
   const editorState = EditorState.create({
     doc: state.modelPluginBody,
-    extensions: [basicSetup, javascript()]
+    extensions: [basicSetup, javascript(), sql()]
   })
 
   const view = new EditorView({
@@ -142,14 +143,6 @@ const createView = () => {
   })
 }
 
-// codemirror.fromTextArea(
-//   document.getElementById('input'),
-//   {
-//     lineNumbers: true
-//   }
-// )
-// console.log('codemirror:')
-
 </script>
 <style lang='less' scoped >
 </style>

src/pages/schedule/dataLake/dataTool/index.vue

@@ -1,8 +1,19 @@
 <template>
 <a-card title="数据源工具" >
+  <a-row>
+    <a-col></a-col>
+    <a-col></a-col>
+  </a-row>
+  <a-row>
+    <a-col></a-col>
+    <a-col :span="24" >
+      <code-mirror-tsx  style="width: 100%;" body-type="sql" :number-of-rows="20" />
+    </a-col>
+  </a-row>
 </a-card>
 </template>
 <script lang='ts' setup >
+import { CodeMirrorTsx } from '@/components/CodeMirror/index'
 </script>
 <style lang='less' scoped >
 </style>

src/router/index.ts

@@ -304,6 +304,11 @@ const schedule = {
           path: '/dataLake/dataTool',
           name: '数据湖工具',
           component: () => import('@/pages/schedule/dataLake/dataTool/index.vue')
+        },
+        {
+          path: '/dataLake/dataIsland',
+          name: '数据岛',
+          component: () => import('@/pages/schedule/dataLake/dataTool/index.vue')
         }
       ]
     },