Merge pull request #928 from nagisa77/codex/add-content-change-details-rendering

feat(frontend): render diff for content changes

frontend_nuxt/components/PostChangeLogItem.vue

@@ -2,7 +2,10 @@
   <div :id="`change-log-${log.id}`" class="change-log-container">
     <div class="change-log-text">
       <span class="change-log-user">{{ log.username }}</span>
-      <span v-if="log.type === 'CONTENT'">变更了文章内容</span>
+      <span v-if="log.type === 'CONTENT'">
+        变更了文章内容
+        <div class="content-diff" v-html="diffHtml"></div>
+      </span>
       <span v-else-if="log.type === 'TITLE'">变更了文章标题</span>
       <span v-else-if="log.type === 'CATEGORY'">变更了文章分类</span>
       <span v-else-if="log.type === 'TAG'">变更了文章标签</span>
@@ -24,7 +27,20 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { html } from 'diff2html'
+import { createTwoFilesPatch } from 'diff'
+import 'diff2html/bundles/css/diff2html.min.css'
 const props = defineProps({ log: Object })
+const diffHtml = computed(() => {
+  if (props.log.type === 'CONTENT') {
+    const oldContent = props.log.oldContent ?? ''
+    const newContent = props.log.newContent ?? ''
+    const diff = createTwoFilesPatch('old', 'new', oldContent, newContent)
+    return html(diff, { inputFormat: 'diff', showFiles: false, matching: 'lines' })
+  }
+  return ''
+})
 </script>
 
 <style scoped>
@@ -42,4 +58,8 @@ const props = defineProps({ log: Object })
   font-size: 12px;
   opacity: 0.6;
 }
+
+.content-diff {
+  margin-top: 8px;
+}
 </style>

frontend_nuxt/package-lock.json

@@ -10,6 +10,8 @@
         "@nuxt/image": "^1.11.0",
         "@stomp/stompjs": "^7.0.0",
         "cropperjs": "^1.6.2",
+        "diff": "^8.0.2",
+        "diff2html": "^3.4.52",
         "echarts": "^5.6.0",
         "flatpickr": "^4.6.13",
         "highlight.js": "^11.11.1",
@@ -7218,6 +7220,41 @@
       "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
       "license": "Apache-2.0"
     },
+    "node_modules/diff2html": {
+      "version": "3.4.52",
+      "resolved": "https://registry.npmjs.org/diff2html/-/diff2html-3.4.52.tgz",
+      "integrity": "sha512-qhMg8/I3sZ4zm/6R/Kh0xd6qG6Vm86w6M+C9W+DuH1V8ACz+1cgEC8/k0ucjv6AGqZWzHm/8G1gh7IlrUqCMhg==",
+      "license": "MIT",
+      "dependencies": {
+        "diff": "^7.0.0",
+        "hogan.js": "3.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "highlight.js": "11.9.0"
+      }
+    },
+    "node_modules/diff2html/node_modules/diff": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
+      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/diff2html/node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -8291,6 +8328,49 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/hogan.js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+      "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
+      "dependencies": {
+        "mkdirp": "0.3.0",
+        "nopt": "1.0.10"
+      },
+      "bin": {
+        "hulk": "bin/hulk"
+      }
+    },
+    "node_modules/hogan.js/node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC"
+    },
+    "node_modules/hogan.js/node_modules/mkdirp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+      "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
+      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+      "license": "MIT/X11",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/hogan.js/node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "license": "MIT",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",

frontend_nuxt/package.json

@@ -16,6 +16,8 @@
     "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",
     "cropperjs": "^1.6.2",
+    "diff": "^8.0.2",
+    "diff2html": "^3.4.52",
     "echarts": "^5.6.0",
     "flatpickr": "^4.6.13",
     "highlight.js": "^11.11.1",