增加json-editor-vue

Web/package.json

@@ -46,6 +46,7 @@
 		"install": "^0.13.0",
 		"js-cookie": "^3.0.5",
 		"js-table2excel": "^1.1.2",
+		"json-editor-vue": "^0.18.1",
 		"jsplumb": "^2.15.6",
 		"jwchat": "^2.0.3",
 		"lodash-es": "^4.17.21",

Web/src/components/jsonEditor/index.vue

@@ -0,0 +1,64 @@
+<!--
+// JsonEditor组件，用于编辑类json格式数据，防止配置式数据的错误格式输入
+// 使用示例：
+<template>
+	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+		<el-form-item label="内容" prop="content">
+			<JsonEditor ref="jsonEditorRef" v-model:jsonObj="ruleForm.content"></JsonEditor>
+		</el-form-item>
+	</el-col>
+</template>
+<script lang="ts" setup>
+import JsonEditor from '/@/components/jsonEditor/index.vue';
+</script>
+-->
+
+<template>
+	<!-- 根据 isJsonValid 控制 JsonEditorVue 的显示 -->
+	<JsonEditorVue ref="jsonEditorVueRef" v-show="isJsonValid" v-model="internalJsonObj" mode="text" style="width: 100%; height: 800px" />
+</template>
+
+<script setup lang="ts" name="jsonEditor">
+import { ref, useTemplateRef, watch, onMounted, computed } from 'vue';
+import JsonEditorVue from 'json-editor-vue';
+
+const props = defineProps({
+	jsonObj: {
+		type: null,
+		default: null, // 允许为 null
+		required: false, // 不是必需的
+	},
+});
+const jsonEditorVueRef = useTemplateRef('jsonEditorVueRef');
+const internalJsonObj = ref(props.jsonObj);
+const emit = defineEmits(['update:jsonObj']);
+
+// 计算属性，判断 jsonObj 是否为有效的 JSON 字符串，这里为简易判断，防止输入框失去焦点时，组件频繁隐藏和显示
+const isJsonValid = computed(() => {
+	// try {
+	// 	if (internalJsonObj.value && (internalJsonObj.value.startsWith('{') || internalJsonObj.value.startsWith('[')) && (internalJsonObj.value.endsWith('}') || internalJsonObj.value.endsWith(']'))) {
+	// 		return true;
+	// 	}
+	// } catch {
+	// 	return false;
+	// }
+	return true;
+});
+
+// 监听内部 JSON 对象变化并触发外部更新
+watch(internalJsonObj, () => {
+	emit('update:jsonObj', internalJsonObj.value);
+});
+
+// 监听外部字符串变化并更新内部JSON对象
+watch(
+	() => props.jsonObj,
+	(newVal) => {
+		internalJsonObj.value = newVal;
+	}
+);
+
+onMounted(() => {
+	jsonEditorVueRef.value.jsonEditor.focus();
+});
+</script>