From c47cb4a5087a93a691c9c59db62b8f1ea1acbb82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Thu, 7 Dec 2023 21:35:22 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=E5=B7=AE=E5=BC=82=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AF=B9=E6=AF=94=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  1 +
 src/views/monitor/SqlDiffLog.vue | 21 ++++++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f4882f6..cefc95b 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/monitor/SqlDiffLog.vue b/src/views/monitor/SqlDiffLog.vue
index 96c0d31..6af67b9 100644
--- a/src/views/monitor/SqlDiffLog.vue
+++ b/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-input type="textarea" v-model="form.afterData" placeholder="请输入变更后数据" />
+            <el-form-item label="变更后数据">
+              <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>