Ver código fonte

feat: codemirror

luoyali 1 ano atrás
pai
commit
ba6da1c944

+ 10 - 3
package.json

@@ -20,6 +20,10 @@
     "lint:lint-staged": "lint-staged"
   },
   "dependencies": {
+    "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-python": "^6.1.6",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@element-plus/icons-vue": "^2.3.1",
     "@logicflow/core": "^1.2.26",
     "@logicflow/extension": "^1.2.26",
@@ -33,6 +37,7 @@
     "async": "^3.2.4",
     "axios": "^1.4.0",
     "canvas": "^2.11.2",
+    "codemirror": "^6.0.1",
     "colord": "^2.9.3",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
@@ -40,6 +45,7 @@
     "everright-filter": "^1.1.1",
     "js-md5": "^0.7.3",
     "json-editor-vue3": "^1.0.8",
+    "json-lint": "^0.1.0",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
@@ -58,6 +64,7 @@
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.4.26",
     "vue-clipboard3": "^2.0.0",
+    "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.2.2",
     "vue-ls": "^4.2.0",
     "vue-router": "^4.2.1",
@@ -72,6 +79,7 @@
     "@ckeditor/ckeditor5-build-decoupled-document": "^35.4.0",
     "@ckeditor/ckeditor5-build-inline": "^35.4.0",
     "@ckeditor/ckeditor5-vue": "^4.0.1",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/js-md5": "^0.7.0",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
@@ -109,9 +117,8 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.6.5",
-		"@originjs/vite-plugin-commonjs": "^1.0.3"
-	},
+    "vue-tsc": "^1.6.5"
+  },
   "engines": {
     "node": ">=16.0.0"
   }

+ 14 - 5
src/components/CodeMirrorEditor/index.vue

@@ -3,7 +3,7 @@ import { watch, ref, toRefs, computed } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import { python } from '@codemirror/lang-python'
-import { oneDark } from '@codemirror/theme-one-dark'
+// import { oneDark } from '@codemirror/theme-one-dark'
 const code = ref('')
 const props = defineProps({
 	modelValue: {
@@ -30,21 +30,30 @@ const emit = defineEmits(['update:modelValue'])
 const { modelValue, language, disabled, style } = toRefs(props)
 const fullScreen = ref(false)
 const lang = { javascript, python }[language.value]
-const extensions = [lang(), oneDark]
+// const extensions = [lang(), oneDark]
+const extensions = [lang()]
 watch(
 	() => modelValue.value,
 	val => {
 		code.value = val
+	},
+	{
+		immediate: true,
+		deep: true
+	}
+)
+watch(
+	() => code.value,
+	val => {
+		emit('update:modelValue', val)
 	}
 )
-watch(code.value, val => {
-	emit('update:modelValue', val)
-})
 const comStyle = computed(() => ({ ...style.value, ...{ height: fullScreen.value ? '100%' : '400px' } }))
 </script>
 <template>
 	<Codemirror
 		v-model="code"
+		:mode="'application/json'"
 		:disabled="disabled"
 		placeholder="暂无数据..."
 		:style="comStyle"

+ 84 - 0
src/components/CodeMirrorEditor/json.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { watch, ref, toRefs, computed, onMounted } from 'vue'
+import * as jsonlint from 'json-lint'
+window['jsonlint'] = jsonlint
+import CodeMirror from 'codemirror'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/rubyblue.css'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/json-lint'
+
+// 折叠
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/fold/foldcode'
+import 'codemirror/addon/fold/foldgutter'
+import 'codemirror/addon/fold/brace-fold'
+import 'codemirror/addon/fold/comment-fold'
+
+const code = ref('')
+const jsonEditor = ref()
+const myCodeRef = ref()
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false,
+		default: ''
+	}
+})
+
+const emit = defineEmits(['update:modelValue'])
+const { modelValue } = toRefs(props)
+
+watch(
+	() => modelValue.value,
+	val => {
+		code.value = val
+		const editorValue = jsonEditor.value.getValue()
+		if (val !== editorValue) {
+			jsonEditor.value.setValue(JSON.stringify(this.value, null, 2))
+		}
+	},
+	{
+		immediate: true,
+		deep: true
+	}
+)
+
+watch(
+	() => code.value,
+	val => {
+		emit('update:modelValue', val)
+	}
+)
+
+onMounted(() => {
+	jsonEditor.value = CodeMirror.fromTextArea(myCodeRef.value, {
+		lineNumbers: true, // 是否显示行数
+		mode: 'application/json', // 接受的类型,json xml....
+		gutters: ['CodeMirror-lint-markers'], // 样式的宽度
+		theme: 'rubyblue', // 主题
+		lint: true
+	})
+	jsonEditor.value.setValue(JSON.stringify(this.value, null, 2))
+	jsonEditor.value.on('change', fm => {
+		const test1 = fm.getValue()
+		console.log(test1)
+	})
+})
+</script>
+
+<template>
+	<div class="json-editor">
+		<textarea ref="myCode" class="textarea"></textarea>
+	</div>
+</template>
+
+<style lang="scss">
+.CodeMirror {
+	height: 100vh;
+	overflow: hidden;
+}
+</style>

+ 7 - 3
src/views/flow/create/components/FlowDesign.vue

@@ -48,7 +48,7 @@ const copyJson = async () => {
 watch(
 	() => form.value.processConfig,
 	value => {
-		jsonFormat.value = form.value.processConfig
+		jsonFormat.value = JSON.stringify(form.value.processConfig)
 	},
 	{
 		// 初始化立即执行
@@ -85,8 +85,12 @@ defineExpose({
 
 		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
 
-		<el-dialog v-model="drawer" size="600px" :append-to-body="true" :modal="false" :with-header="false">
-			<code-mirror-editor v-model="fetchTxtFileData" :style="{ width: '47vw' }"></code-mirror-editor>
+		<el-dialog v-model="drawer" size="600px" :append-to-body="true" title="查看JSON">
+			<code-mirror-editor v-model="jsonFormat"></code-mirror-editor>
+			<template #footer>
+				<el-button type="primary">复制 JSON</el-button>
+				<el-button>关 闭</el-button>
+			</template>
 		</el-dialog>
 	</div>
 </template>