✨ https://github.com/siyuan-note/siyuan/issues/6858

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "compare": "Compare",
   "switchTab": "Switcher",
   "recentDocs": "Recently opened documents",
   "autoLaunch": "Automatic launch at boot",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "comparar": "Comparar",
   "switchTab": "Conmutador",
   "recentDocs": "Documentos abiertos recientemente",
   "autoLaunch": "Inicio automático al arrancar",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "comparer": "Comparer",
   "switchTab": "Commutateur",
   "recentDocs": "Documents récemment ouverts",
   "autoLaunch": "Lancement automatique au démarrage",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "compare": "比較",
   "switchTab": "頁簽切換",
   "recentDocs": "最近打开的文档",
   "autoLaunch": "開機自動啟動",

app/src/assets/scss/_dialog.scss

@@ -103,4 +103,11 @@
       min-height: 18px;
     }
   }
+
+  &__diff {
+    width: 200px;
+    border-right: 1px solid var(--b3-border-color);
+    padding: 8px 0;
+    overflow: auto;
+  }
 }

app/src/history/diff.ts

@@ -1,3 +1,83 @@
-export const showDiff = () => {
+import {fetchPost} from "../util/fetch";
+import {Dialog} from "../dialog";
 
+const genItem = (data: [], type: "add" | "update" | "remove") => {
+    if (!data || data.length === 0) {
+        return `<li style="padding-left: 44px;" class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`
+    }
+    let html = "";
+    data.forEach((item: { id: string, path: string }) => {
+        html += `<li style="padding-left: 44px;" class="b3-list-item" data-id="${item.id}"><span class="b3-list-item__text">${item.path}</span></li>`;
+    })
+    return html;
+}
+
+const renderCompare = (element: HTMLElement) => {
+    fetchPost("/api/repo/openRepoSnapshotDoc", {id: element.getAttribute("data-id")}, (response) => {
+
+    })
+}
+
+export const showDiff = (ids: string) => {
+    const idArray = ids.split(",");
+    if (idArray.length !== 2) {
+        return;
+    }
+    fetchPost("/api/repo/diffRepoSnapshots", {left: idArray[0], right: idArray[1]}, (response) => {
+        const dialog = new Dialog({
+            title: window.siyuan.languages.compare,
+            content: `<div class="fn__flex" style="height: 100%">
+    <div class="b3-dialog__diff">
+        <ul class="b3-list b3-list--background">
+            <li class="b3-list-item">
+                <span style="padding-right: 4px" class="b3-list-item__toggle b3-list-item__toggle--hl">
+                    <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
+                </span>
+                <span class="b3-list-item__text">${window.siyuan.languages.addAttr}</span>
+            </li>
+            <ul class="fn__none">${genItem(response.data.adds, "add")}</ul>
+        </ul>
+        <ul class="b3-list b3-list--background">
+            <li class="b3-list-item">
+                <span style="padding-right: 4px" class="b3-list-item__toggle b3-list-item__toggle--hl">
+                    <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
+                </span>
+                <span class="b3-list-item__text">${window.siyuan.languages.update}</span>
+            </li>
+            <ul class="fn__none">${genItem(response.data.updates, "add")}</ul>
+        </ul>
+        <ul class="b3-list b3-list--background">
+            <li class="b3-list-item">
+                <span style="padding-right: 4px" class="b3-list-item__toggle b3-list-item__toggle--hl">
+                    <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>
+                </span>
+                <span class="b3-list-item__text">${window.siyuan.languages.remove}</span>
+            </li>
+            <ul class="fn__none">${genItem(response.data.removes, "add")}</ul>
+        </ul>
+    </div>
+    <div class="fn__flex-1"></div>
+</div>`,
+            width: "80vw",
+            height: "80vh",
+        });
+        dialog.element.addEventListener("click", (event) => {
+            let target = event.target as HTMLElement;
+            while (target && target !== dialog.element) {
+                if (target.classList.contains("b3-list-item") && !target.dataset.id) {
+                    target.nextElementSibling.classList.toggle("fn__none");
+                    target.querySelector("svg").classList.toggle("b3-list-item__arrow--open");
+                    break;
+                } else if (target.classList.contains("b3-list-item") && target.dataset.id) {
+                    if (target.classList.contains("b3-list-item--focus")) {
+                        return;
+                    }
+                    dialog.element.querySelector(".b3-dialog__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
+                    target.classList.add("b3-list-item--focus");
+                    renderCompare(target)
+                }
+                target = target.parentElement;
+            }
+        });
+    });
 }

app/src/history/history.ts

@@ -9,6 +9,7 @@ import * as dayjs from "dayjs";
 import {fetchPost} from "../util/fetch";
 import {escapeHtml} from "../util/escape";
 import {isMobile} from "../util/functions";
+import {showDiff} from "./diff";
 
 let historyEditor: Protyle;
 const renderDoc = (element: HTMLElement, currentPage: number) => {
@@ -596,7 +597,7 @@ export const openHistory = () => {
                 });
                 break;
             } else if (type === "compare") {
-               showDiff()
+                showDiff(target.getAttribute("data-ids"));
                 break;
             }
             target = target.parentElement;