🎨 https://github.com/siyuan-note/siyuan/issues/8081

app/src/history/diff.ts

@@ -10,7 +10,7 @@ import {isMobile} from "../util/functions";
 
 const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
     if (!data || data.length === 0) {
-        return `<li style="padding-left: 44px;" class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
+        return `<li style="padding-left: 40px;" class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
     }
     let html = "";
     data.forEach((item: { title: string, fileID: string }, index) => {
@@ -18,7 +18,7 @@ const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
         if (data2) {
             id2 = `data-id2="${data2[index].fileID}"`;
         }
-        html += `<li style="padding-left: 44px;" class="b3-list-item" ${id2} data-id="${item.fileID}">
+        html += `<li style="padding-left: 40px;" class="b3-list-item" ${id2} data-id="${item.fileID}">
     <span class="b3-list-item__text">${escapeHtml(item.title)}</span>
 </li>`;
     });
@@ -75,6 +75,7 @@ const renderCompare = (element: HTMLElement) => {
             leftElement.lastElementChild.classList.remove("fn__none");
             onGet(response, leftEditor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
         }
+        textElement.previousElementSibling.textContent = dayjs(response.data.updated).format("YYYY-MM-DD HH:mm")
     });
     const id2 = element.getAttribute("data-id2");
     if (id2) {
@@ -90,6 +91,7 @@ const renderCompare = (element: HTMLElement) => {
                 rightElement.lastElementChild.classList.remove("fn__none");
                 onGet(response, rightEditor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
             }
+            textElement.previousElementSibling.textContent = dayjs(response.data.updated).format("YYYY-MM-DD HH:mm")
         });
     } else {
         rightElement.classList.add("fn__none");
@@ -100,19 +102,78 @@ export const showDiff = (data: { id: string, time: string }[]) => {
     if (data.length !== 2) {
         return;
     }
-    let left;
+    let left: string;
-    let right;
+    let right: string;
-    if (data[0].time > data[1].time) {
+    if (data[0].time < data[1].time) {
         left = data[1].id;
         right = data[0].id;
     } else {
         left = data[0].id;
         right = data[1].id;
     }
+
+    const dialog = new Dialog({
+        title: window.siyuan.languages.compare,
+        content: "",
+        width: isMobile() ? "92vw" : "80vw",
+        height: "80vh",
+        destroyCallback() {
+            leftEditor = undefined;
+            rightEditor = undefined;
+        }
+    });
+    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");
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            } else if (target.classList.contains("b3-list-item") && target.dataset.id) {
+                if (target.classList.contains("b3-list-item--focus")) {
+                    return;
+                }
+                dialog.element.querySelector(".history__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
+                target.classList.add("b3-list-item--focus");
+                renderCompare(target);
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            } else if (target.classList.contains("block__icon")) {
+                if (target.getAttribute("data-direct") === "left") {
+                    target.setAttribute("data-direct", "right")
+                    genHTML(right, left, dialog);
+                } else {
+                    target.setAttribute("data-direct", "left")
+                    genHTML(left, right, dialog);
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            target = target.parentElement;
+        }
+    });
+    genHTML(left, right, dialog);
+};
+
+const genHTML = (left: string, right: string, dialog: Dialog) => {
+    leftEditor = undefined;
+    rightEditor = undefined;
     fetchPost("/api/repo/diffRepoSnapshots", {left, right}, (response) => {
-        const dialog = new Dialog({
+        const headElement = dialog.element.querySelector(".b3-dialog__header");
-            title: window.siyuan.languages.compare,
+        headElement.innerHTML = `<div style="padding: 0;min-height: auto;" class="block__icons">
-            content: `<div class="fn__flex" style="height: 100%;${isMobile() ? "flex-direction: column;" : ""}">
+    <span class="fn__flex-1"></span>
+    ${dayjs(response.data.left.created).format("YYYY-MM-DD HH:mm")}
+    <span class="fn__space"></span>
+    <span class="block__icon block__icon--show" data-direct="left"><svg><use xlink:href="#iconForward"></use></svg></span>
+    <span class="fn__space"></span>
+    ${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}
+    <span class="fn__flex-1"></span>
+</div>`
+        headElement.nextElementSibling.innerHTML = `<div class="fn__flex" style="height: 100%;${isMobile() ? "flex-direction: column;" : ""}">
     <div class="history__diff"${isMobile() ? 'style="flex:1;width:auto"' : ""}>
         <ul class="b3-list b3-list--background">
             <li class="b3-list-item">
@@ -154,31 +215,6 @@ export const showDiff = (data: { id: string, time: string }[]) => {
             <div class="fn__flex-1"></div>
         </div>
     </div>
-</div>`,
+</div>`;
-            width: isMobile() ? "92vw" : "80vw",
-            height: "80vh",
-            destroyCallback() {
-                leftEditor = undefined;
-                rightEditor = undefined;
-            }
-        });
-        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(".history__diff .b3-list-item--focus")?.classList.remove("b3-list-item--focus");
-                    target.classList.add("b3-list-item--focus");
-                    renderCompare(target);
-                }
-                target = target.parentElement;
-            }
-        });
     });
-};
+}