opt: json错误提示

nl-vue/src/views/mock/mockconfig/form.vue

@@ -15,7 +15,11 @@
 				</a-col>
 				<a-col :span="12">
 					<a-form-item label="请求方法" name="apiMethod">
-						<a-input v-model:value="formData.apiMethod" placeholder="请输入请求方法：GET, POST, PUT, DELETE" allow-clear />
+						<a-input
+							v-model:value="formData.apiMethod"
+							placeholder="请输入请求方法：GET, POST, PUT, DELETE"
+							allow-clear
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="24">
@@ -26,7 +30,10 @@
 								placeholder="请输入返回的JSON数据"
 								:rows="10"
 								allow-clear
+								:status="jsonError ? 'error' : ''"
 								style="font-family: 'Courier New', monospace"
+								@blur="validateJson"
+								@input="onJsonInput"
 							/>
 							<a-button
 								type="link"
@@ -40,6 +47,10 @@
 								格式化
 							</a-button>
 						</div>
+						<div v-if="jsonError" style="color: #ff4d4f; font-size: 12px; margin-top: 4px; line-height: 1.5">
+							<ExclamationCircleOutlined style="margin-right: 4px" />
+							{{ jsonError }}
+						</div>
 					</a-form-item>
 				</a-col>
 				<a-col :span="24">
@@ -62,7 +73,7 @@
 
 <script setup name="mockConfigForm">
 	import { message } from 'ant-design-vue'
-	import { AlignLeftOutlined } from '@ant-design/icons-vue'
+	import { AlignLeftOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
 	import tool from '@/utils/tool'
 	import { cloneDeep } from 'lodash-es'
 	import mockConfigApi from '@/api/mock/mockConfigApi'
@@ -74,10 +85,12 @@
 	const formData = ref({})
 	const submitLoading = ref(false)
 	const isEnabledOptions = ref([])
+	const jsonError = ref('')
 
 	// 打开抽屉
 	const onOpen = (record) => {
 		open.value = true
+		jsonError.value = ''
 		// 加载是否启用字典（0=否，1=是）
 		isEnabledOptions.value = tool.dictList('IS_USED')
 		if (record) {
@@ -108,8 +121,67 @@
 	const onClose = () => {
 		formRef.value.resetFields()
 		formData.value = {}
+		jsonError.value = ''
 		open.value = false
 	}
+	// 实时验证JSON（输入时）
+	const onJsonInput = () => {
+		// 清空之前的错误，避免输入时频繁提示
+		if (jsonError.value) {
+			jsonError.value = ''
+		}
+	}
+	// 验证JSON格式
+	const validateJson = () => {
+		if (!formData.value.responseJson || formData.value.responseJson.trim() === '') {
+			jsonError.value = ''
+			return true
+		}
+		try {
+			JSON.parse(formData.value.responseJson)
+			jsonError.value = ''
+			return true
+		} catch (e) {
+			// 解析错误信息，提取行号和列号
+			const errorMsg = e.message
+			let errorDetail = 'JSON格式错误'
+
+			// 尝试提取位置信息
+			const positionMatch = errorMsg.match(/position (\d+)/)
+			const lineMatch = errorMsg.match(/line (\d+)/)
+
+			if (positionMatch) {
+				const position = parseInt(positionMatch[1])
+				const lines = formData.value.responseJson.substring(0, position).split('\n')
+				const line = lines.length
+				const column = lines[lines.length - 1].length + 1
+				errorDetail = `JSON格式错误：第 ${line} 行，第 ${column} 列附近`
+			} else if (lineMatch) {
+				errorDetail = `JSON格式错误：第 ${lineMatch[1]} 行附近`
+			}
+
+			// 添加具体错误原因
+			if (errorMsg.includes('Unexpected token')) {
+				const tokenMatch = errorMsg.match(/Unexpected token (.+?) in JSON/)
+				if (tokenMatch) {
+					errorDetail += ` - 意外的字符 "${tokenMatch[1]}"`
+				}
+			} else if (errorMsg.includes('Expected')) {
+				if (errorMsg.includes('comma')) {
+					errorDetail += ' - 缺少逗号'
+				} else if (errorMsg.includes('closing brace')) {
+					errorDetail += ' - 缺少右花括号 }'
+				} else if (errorMsg.includes('closing bracket')) {
+					errorDetail += ' - 缺少右方括号 ]'
+				}
+			} else if (errorMsg.includes('Unterminated string')) {
+				errorDetail += ' - 字符串未闭合'
+			}
+
+			jsonError.value = errorDetail
+			return false
+		}
+	}
 	// 格式化JSON
 	const formatJson = () => {
 		if (!formData.value.responseJson) {
@@ -119,8 +191,10 @@
 		try {
 			const jsonObj = JSON.parse(formData.value.responseJson)
 			formData.value.responseJson = JSON.stringify(jsonObj, null, 2)
+			jsonError.value = ''
 			message.success('格式化成功')
 		} catch (e) {
+			validateJson() // 显示详细错误信息
 			message.error('JSON格式错误，请检查输入')
 		}
 	}
@@ -128,6 +202,14 @@
 	const formRules = {}
 	// 验证并提交数据
 	const onSubmit = () => {
+		// 先验证JSON格式
+		if (formData.value.responseJson && formData.value.responseJson.trim() !== '') {
+			if (!validateJson()) {
+				message.error('JSON格式错误，请修正后再保存')
+				return
+			}
+		}
+
 		formRef.value
 			.validate()
 			.then(() => {
@@ -140,12 +222,12 @@
 					formDataParam.isEnabled = 0
 				}
 				// 提交前压缩JSON（去除格式化的空格和换行），确保后端能正常解析
-				if (formDataParam.responseJson) {
+				if (formDataParam.responseJson && formDataParam.responseJson.trim() !== '') {
 					try {
 						const jsonObj = JSON.parse(formDataParam.responseJson)
 						formDataParam.responseJson = JSON.stringify(jsonObj)
 					} catch (e) {
-						message.error('JSON格式错误，请检查后重试')
+						message.error('JSON格式错误，无法保存')
 						submitLoading.value = false
 						return
 					}