feat: 修改分支评审代码差异展示

package-lock.json

@@ -3390,6 +3390,11 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -5986,6 +5991,23 @@
       "resolved": "https://registry.npmmirror.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
       "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
     },
+    "diff2html": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmmirror.com/diff2html/-/diff2html-3.4.17.tgz",
+      "integrity": "sha512-B/H+iLRHTsRl2Ffs/7tYJ0Rg4uisXe83inIdNE8trXY83Wn7OCTslJNP7fyaUpSsLbRIzPSNgT7LqFNiIQlDyg==",
+      "requires": {
+        "diff": "5.0.0",
+        "highlight.js": "11.5.1",
+        "hogan.js": "3.0.2"
+      },
+      "dependencies": {
+        "diff": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/diff/-/diff-5.0.0.tgz",
+          "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w=="
+        }
+      }
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmmirror.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -7886,6 +7908,22 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hogan.js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/hogan.js/-/hogan.js-3.0.2.tgz",
+      "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
+      "requires": {
+        "mkdirp": "0.3.0",
+        "nopt": "1.0.10"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.3.0.tgz",
+          "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz",
@@ -10093,6 +10131,14 @@
       "integrity": "sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==",
       "dev": true
     },
+    "nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmmirror.com/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "codemirror": "^5.65.2",
     "codemirror-editor-vue3": "^2.0.6",
     "core-js": "^3.6.5",
+    "diff2html": "^3.4.17",
     "echarts": "^5.3.2",
     "element-plus": "^1.0.2-beta.31",
     "highlight.js": "^11.5.1",

src/components/CodeDifferencePlate.vue

@@ -1,20 +1,12 @@
 <template>
   <div class="container">
-    <ElCollapse v-model="activeNames" v-for="item in data" :key="item.newPath">
-      <ElCollapseItem name="item.newPath">
-        <template v-slot:title><i class="el-icon-s-order"/>{{item.newPath}}</template>
-        <!-- <el-input type="textarea" :autosize="{maxRows: 25}" v-model="item.diff" readonly></el-input> -->
-        <table class="code-area" cellspacing="0"  v-for="msg in item.diff.split('\n')" :key="item.diff.indexOf(msg)">
-          <tr class="normal-line" v-if="getLineType(msg) === 0">{{msg}}</tr>
-          <tr class="delete-line" v-if="getLineType(msg) === 1">{{msg}}</tr>
-          <tr class="insert-line" v-if="getLineType(msg) === 2">{{msg}}</tr>
-        </table>
-      </ElCollapseItem>
-    </ElCollapse>
+    <div v-for="item in data" :key="item.newPath" v-html="toHtml(item.diff)" class="diffPlate"></div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
 
 interface DifferenceMsg {
   a_mode: string;
@@ -33,48 +25,17 @@ export default defineComponent({
     data: Array as PropType<DifferenceMsg[]>,
   },
   setup() {
-    const getLineType = (msg: string) => {
-      if (msg.startsWith('+++') || msg.startsWith('---')) return 3;
-      if (msg.startsWith('+')) return 2;
-      if (msg.startsWith('-')) return 1;
-      if (msg.startsWith('\\') || msg.startsWith('@')) return 3;
-      if (msg.length === 0) return 3;
-      return 0;
-    };
-    const activeNames: string[] = [];
+    const toHtml = (msg: string) => Diff2Html.html(msg, {
+      drawFileList: false,
+    });
     return {
-      activeNames,
-      getLineType,
+      toHtml,
     };
   },
 });
 </script>
 <style lang="scss" scoped>
-::v-deep {
-  .el-collapse {
-    .el-collapse-item__header {
-      font-size: 17px;
-      font-weight: 500;
-    }
-  }
-}
-.el-icon-s-order {
-    margin-right: 5px;
-    color: gray;
-}
-.code-area {
-  font-family: "Lucida Console";
+.diff-plate {
   width: 100%;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  .tr {
-    height: 100%;
-  }
-}
-.delete-line {
-  background-color: #fbe9eb;
-}
-.insert-line {
-  background-color: #ecfdf0;
 }
 </style>

src/views/Project/CodeReviewDetail.vue

@@ -100,7 +100,7 @@ export default {
           commentType: 'Commit',
         },
       ],
-      codeDiffMsg: {},
+      codeDiffMsg: [],
       newComment: {
         codeReviewId: 0,
         creatorId: 0,