feat: codemirror

package.json

@@ -85,7 +85,6 @@
     "@vue/test-utils": "^2.3.2",
     "autoprefixer": "^10.4.16",
     "better-sqlite3": "^8.2.0",
-    "codemirror": "^5.60.0",
     "connect-multiparty": "^2.2.0",
     "conventional-changelog-cli": "^4.1.0",
     "eslint": "^8.40.0",

src/components/CodeMirrorEditor/index.vue

@@ -0,0 +1,61 @@
+<script setup>
+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'
+const code = ref('')
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false,
+		default: ''
+	},
+	language: {
+		type: String,
+		default: 'javascript'
+	},
+	disabled: {
+		type: [String, Boolean],
+		default: false
+	},
+	style: {
+		type: [Object],
+		default: () => ({
+			height: '400px'
+		})
+	}
+})
+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]
+watch(
+	() => modelValue.value,
+	val => {
+		code.value = 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"
+		:disabled="disabled"
+		placeholder="暂无数据..."
+		:style="comStyle"
+		:autofocus="true"
+		:indent-with-tab="true"
+		:tab-size="2"
+		:full-screen="true"
+		:extensions="extensions"
+		@ready="() => {}"
+		@change="() => {}"
+		@focus="() => {}"
+		@blur="() => {}"
+	></Codemirror>
+</template>

src/views/flow/create/components/FlowDesign.vue

@@ -1,6 +1,8 @@
 <script setup name="FlowDesign">
 import { onMounted, ref, watch } from 'vue'
-import JsonEditorVue from 'json-editor-vue3'
+// import JsonEditorVue from 'json-editor-vue3'
+import CodeMirrorEditor from '@/components/CodeMirrorEditor/index.vue'
+
 import ScWorkflow from '@/components/scWorkflow'
 import useFlowStore from '@/store/modules/flow'
 import useClipboard from 'vue-clipboard3'
@@ -10,6 +12,7 @@ const flowStore = useFlowStore()
 const { modelContent } = storeToRefs(flowStore)
 const { toClipboard } = useClipboard()
 
+const fetchTxtFileData = ref('你好 世界!')
 const formRef = ref()
 const drawer = ref(false)
 const jsonFormat = ref({})
@@ -82,15 +85,9 @@ defineExpose({
 
 		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
 
-		<el-drawer v-model="drawer" size="500px" class="drawer" :append-to-body="true" :modal="false" :with-header="false">
-			<div style="height: 100vh">
-				<div style="padding: 1px; background-color: #3883fa">
-					<el-button type="primary" plain @click="copyParseJson"> 复制 JSON </el-button>
-					<el-button type="primary" plain @click="drawer = false"> 关闭弹窗 </el-button>
-				</div>
-				<json-editor-vue v-model="form.processConfig" class="editor" language="zh-CN" current-mode="view" />
-			</div>
-		</el-drawer>
+		<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>
 	</div>
 </template>