From 3ebe53e918442bc0092600dbfd1982fc5ddf3d35 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 22 Apr 2023 19:22:12 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8081

---
 app/src/history/diff.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/src/history/diff.ts b/app/src/history/diff.ts
index 974eb5600..1f43f3116 100644
--- a/app/src/history/diff.ts
+++ b/app/src/history/diff.ts
@@ -144,10 +144,10 @@ export const showDiff = (data: { id: string, time: string }[]) => {
             } else if (target.classList.contains("block__icon")) {
                 if (target.getAttribute("data-direct") === "left") {
                     target.setAttribute("data-direct", "right")
-                    genHTML(right, left, dialog);
+                    genHTML(right, left, dialog, "right");
                 } else {
                     target.setAttribute("data-direct", "left")
-                    genHTML(left, right, dialog);
+                    genHTML(left, right, dialog, "left");
                 }
                 event.preventDefault();
                 event.stopPropagation();
@@ -156,20 +156,25 @@ export const showDiff = (data: { id: string, time: string }[]) => {
             target = target.parentElement;
         }
     });
-    genHTML(left, right, dialog);
+    genHTML(left, right, dialog, "left");
 };
 
-const genHTML = (left: string, right: string, dialog: Dialog) => {
+const genHTML = (left: string, right: string, dialog: Dialog, direct:string) => {
     leftEditor = undefined;
     rightEditor = undefined;
+    const isPhone = isMobile();
     fetchPost("/api/repo/diffRepoSnapshots", {left, right}, (response) => {
         const headElement = dialog.element.querySelector(".b3-dialog__header");
         headElement.innerHTML = `<div style="padding: 0;min-height: auto;" class="block__icons">
     <span class="fn__flex-1"></span>
+    <code class="fn__code${isPhone ? " fn__none" : ''}">${left.substring(0, 7)}</code>
+    ${isPhone ? "" : '<span class="fn__space"></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="block__icon block__icon--show" data-direct="${direct}"><svg><use xlink:href="#iconForward"></use></svg></span>
     <span class="fn__space"></span>
+    <code class="fn__code${isPhone ? " fn__none" : ''}">${right.substring(0, 7)}</code>
+    ${isPhone ? "" : '<span class="fn__space"></span>'}
     ${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}
     <span class="fn__flex-1"></span>
 </div>`