Browse Source

perf: 优化JSON查看 转用 vs code 编辑

lanceJiang 8 months ago
parent
commit
cfdf85a6f8

+ 0 - 7
package.json

@@ -21,11 +21,6 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-qrcode": "2",
-    "@codemirror/lang-cpp": "^6.0.2",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@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",
@@ -39,7 +34,6 @@
     "async": "^3.2.4",
     "axios": "^1.7.5",
     "canvas": "^2.11.2",
-    "codemirror": "^6.0.1",
     "colord": "^2.9.3",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
@@ -71,7 +65,6 @@
     "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",

+ 0 - 71
src/components/CodeMirrorEditor/index.vue

@@ -1,71 +0,0 @@
-<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 { json } from '@codemirror/lang-json'
-// 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 = json()
-// 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)
-	}
-)
-const comStyle = computed(() => ({ ...style.value, ...{ height: fullScreen.value ? '100%' : '400px' } }))
-</script>
-<template>
-	<Codemirror
-		v-model="code"
-		:mode="'application/json'"
-		: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>

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

@@ -1,84 +0,0 @@
-<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>

+ 2 - 2
src/views/flow/create/components/FlowDesign.vue

@@ -1,6 +1,5 @@
 <script setup name="FlowDesign">
 import { onMounted, ref } from 'vue'
-import CodeMirrorEditor from '@/components/CodeMirrorEditor/index.vue'
 import { ElMessageBox } from 'element-plus'
 
 import ScWorkflow from '@/components/scWorkflow'
@@ -9,6 +8,7 @@ import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
 import { copyText } from '@/utils'
 import { getNodeKey } from '@/utils/workflow'
+import MonacoEditor from '@/components/MonacoEditor'
 const flowStore = useFlowStore()
 const { modelContent } = storeToRefs(flowStore)
 
@@ -95,7 +95,7 @@ defineExpose({
 		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
 
 		<el-dialog v-if="drawer" v-model="drawer" class="le-dialog" size="600px" :append-to-body="true" title="查看JSON" destroy-on-close>
-			<code-mirror-editor v-model="jsonFormat"></code-mirror-editor>
+			<MonacoEditor v-model="jsonFormat" height="400px" />
 			<template #footer>
 				<el-button type="primary" @click="copyJson">复制 JSON</el-button>
 				<el-button @click="sureImportJson">导入JSON</el-button>