✨差异日志新增对比功能

package.json

@@ -37,6 +37,7 @@
     "qrcodejs2-fixes": "^0.0.2",
     "qs": "^6.11.0",
     "sortablejs": "^1.15.0",
+    "v-code-diff": "^1.8.0",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vue-cropper": "1.0.2",

src/views/monitor/SqlDiffLog.vue

@@ -114,21 +114,25 @@
 
           <el-col :lg="24">
             <el-form-item label="执行sql语句" prop="sql">
-              <el-input type="textarea" v-model="form.sql" placeholder="请输入执行sql语句" />
+              <code class="hljs" v-html="highlightedCode(form.sql)"></code>
+              <!-- <el-input type="textarea" v-model="form.sql" placeholder="请输入执行sql语句" /> -->
             </el-form-item>
           </el-col>
 
           <el-col :lg="24">
             <el-form-item label="变更前数据" prop="beforeData">
-              <el-input type="textarea" v-model="form.beforeData" placeholder="请输入变更前数据" />
+              <code class="hljs" v-html="highlightedCode(form.beforeData)"></code>
             </el-form-item>
           </el-col>
 
           <el-col :lg="24">
-            <el-form-item label="变更后数据" prop="afterData">
+            <el-form-item label="变更后数据">
-              <el-input type="textarea" v-model="form.afterData" placeholder="请输入变更后数据" />
+              <code class="hljs" v-html="highlightedCode(form.afterData)"></code>
             </el-form-item>
           </el-col>
+          <el-col :lg="24">
+            <code-diff :old-string="form.beforeData" :new-string="form.afterData" language="json" output-format="side-by-side" />
+          </el-col>
 
           <el-col :lg="12">
             <el-form-item label="操作用户名" prop="userName">
@@ -158,6 +162,10 @@
 
 <script setup name="sqldifflog">
 import { listSqlDiffLog, delSqlDiffLog } from '@/api/monitor/sqldifflog.js'
+import { CodeDiff } from 'v-code-diff'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/default.css' // 这里有多个样式，自己可以根据需要切换
+
 const { proxy } = getCurrentInstance()
 const ids = ref([])
 const loading = ref(false)
@@ -319,6 +327,9 @@ function handleExport() {
       await proxy.downFile('/monitor/SqlDiffLog/export', { ...queryParams })
     })
 }
-
+function highlightedCode(code) {
+  const result = hljs.highlightAuto(code)
+  return result.value || '&nbsp;'
+}
 handleQuery()
 </script>