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

app/src/assets/scss/business/_history.scss

@@ -1,4 +1,9 @@
 .history {
+  &__action {
+    overflow: auto;
+    border-bottom: 1px solid var(--b3-border-color);
+  }
+
   &__text {
     background-color: var(--b3-theme-background);
     padding: 16px;

app/src/history/doc.ts

@@ -15,7 +15,6 @@ let isLoading = false;
 const renderDoc = (element: HTMLElement, currentPage: number, id: string) => {
     const previousElement = element.querySelector('[data-type="docprevious"]');
     const nextElement = element.querySelector('[data-type="docnext"]');
-    element.setAttribute("data-page", currentPage.toString());
     if (currentPage > 1) {
         previousElement.removeAttribute("disabled");
     } else {
@@ -23,8 +22,9 @@ const renderDoc = (element: HTMLElement, currentPage: number, id: string) => {
     }
     const opElement = element.querySelector('.b3-select[data-type="opselect"]') as HTMLSelectElement;
     const listElement = element.querySelector(".b3-list--background");
+    element.querySelector('.protyle-title__input').classList.add("fn__none");
     element.querySelector('.history__text[data-type="docPanel"]').classList.add("fn__none");
-    element.querySelector('.history__text[data-type="mdPanel"]').classList.remove("fn__none");
+    element.querySelector('.history__text[data-type="mdPanel"]').classList.add("fn__none");
     fetchPost("/api/history/searchHistory", {
         query: id,
         page: currentPage,
@@ -36,7 +36,16 @@ const renderDoc = (element: HTMLElement, currentPage: number, id: string) => {
         } else {
             nextElement.setAttribute("disabled", "disabled");
         }
-        nextElement.nextElementSibling.nextElementSibling.textContent = `${currentPage}/${response.data.pageCount || 1}`;
+        const pageNumElement = element.querySelector('[data-type="jumpRepoPage"]')
+        if (response.data.pageCount > 1) {
+            pageNumElement.removeAttribute("disabled");
+        } else {
+            pageNumElement.setAttribute("disabled", "disabled");
+        }
+        pageNumElement.setAttribute("data-totalpage", response.data.pageCount.toString());
+        pageNumElement.textContent = currentPage.toString();
+        const pageInfoElement = nextElement.nextElementSibling.nextElementSibling;
+        pageInfoElement.textContent = window.siyuan.languages.pageCountAndHistoryCount.replace("${x}", response.data.pageCount).replace("${y}", response.data.totalCount);
         if (response.data.histories.length === 0) {
             listElement.innerHTML = `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
             return;
@@ -61,40 +70,38 @@ export const openDocHistory = (options: {
     notebookId: string,
     pathString: string
 }) => {
-    const contentHTML = `<div class="fn__flex fn__flex-1 history__panel">
+    const contentHTML = `<div class="history__action">
+    <div class="block__icons">
+        <span data-type="docprevious" class="block__icon block__icon--show b3-tooltips b3-tooltips__e" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href="#iconLeft"></use></svg></span>
+        <button class="b3-button b3-button--text ft__selectnone" data-type="jumpRepoPage" disabled>1</button>
+        <span data-type="docnext" class="block__icon block__icon--show b3-tooltips b3-tooltips__e" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href="#iconRight"></use></svg></span>
+        <span class="fn__space"></span>
+        <span class="ft__on-surface fn__flex-shrink ft__selectnone">${window.siyuan.languages.pageCountAndHistoryCount}</span>
+        <span class="fn__space"></span>
+        <div class="fn__flex-1"></div>
+        <select data-type="opselect" class="b3-select">
+            <option value="all" selected>${window.siyuan.languages.allOp}</option>
+            <option value="update">${window.siyuan.languages.historyUpdate}</option>
+            <option value="format">${window.siyuan.languages.historyFormat}</option>
+            <option value="sync">${window.siyuan.languages.historySync}</option>
+            <option value="replace">${window.siyuan.languages.historyReplace}</option>
+            <option value="outline">${window.siyuan.languages.historyOutline}</option>
+        </select>
+    </div>
+</div>
+<div class="fn__flex fn__flex-1 history__panel">
     <ul class="b3-list b3-list--background history__side" ${isMobile() ? "" : `style="width: ${window.siyuan.storage[Constants.LOCAL_HISTORY].sideDocWidth}"`}>
         <li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>
     </ul>
     <div class="history__resize"></div>
     <div class="fn__flex-1 fn__flex-column">
-        <div class="protyle-title__input ft__center ft__breakword"></div>
+        <div class="protyle-title__input fn__none ft__center ft__breakword"></div>
         <textarea class="fn__flex-1 history__text fn__none" readonly data-type="mdPanel"></textarea>
         <div class="fn__flex-1 history__text fn__none" style="padding: 0" data-type="docPanel"></div>
     </div>
 </div>`;
     const dialog = new Dialog({
-        title:`<div class="block__icons">
-            ${isMobile() ? "" : options.pathString}
-            <span class="fn__space"></span>
-            <div class="fn__flex-1"></div>
-            <select data-type="opselect" class="b3-select">
-                <option value="all" selected>${window.siyuan.languages.allOp}</option>
-                <option value="clean">${window.siyuan.languages.historyClean}</option>
-                <option value="update">${window.siyuan.languages.historyUpdate}</option>
-                <option value="delete">${window.siyuan.languages.historyDelete}</option>
-                <option value="format">${window.siyuan.languages.historyFormat}</option>
-                <option value="sync">${window.siyuan.languages.historySync}</option>
-                <option value="replace">${window.siyuan.languages.historyReplace}</option>
-                <option value="outline">${window.siyuan.languages.historyOutline}</option>
-            </select>
-            <span class="fn__space"></span>
-            <span data-type="docprevious" class="block__icon block__icon--show b3-tooltips b3-tooltips__s" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href="#iconLeft"></use></svg></span>
-            <span class="fn__space"></span>
-            <span data-type="docnext" class="block__icon block__icon--show b3-tooltips b3-tooltips__s" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href="#iconRight"></use></svg></span>
-            <span class="fn__space"></span>
-            <span>1/1</span>
-            ${isMobile() ? '<span class="fn__space"></span><span data-type="close" class="block__icon block__icon--show"><svg><use xlink:href="#iconClose"></use></svg></span>' : ""}
-        </div>`,
+        title: options.pathString,
         content: contentHTML,
         width: isMobile() ? "100vw" : "90vw",
         height: isMobile() ? "100vh" : "80vh",
@@ -127,13 +134,13 @@ export const openDocHistory = (options: {
         typewriterMode: false,
     });
     disabledProtyle(historyEditor.protyle);
+    const pageNumElement = dialog.element.querySelector('[data-type="jumpRepoPage"]')
+    const titleElement = dialog.element.querySelector(".protyle-title__input")
     dialog.element.addEventListener("click", (event) => {
         let target = event.target as HTMLElement;
         while (target && !target.isEqualNode(dialog.element)) {
             const type = target.getAttribute("data-type");
-            if (type === "close") {
-                dialog.destroy();
-            } else if (type === "rollback" && !isLoading) {
+            if (type === "rollback" && !isLoading) {
                 getHistoryPath(target.parentElement, opElement.value, options.id, (item) => {
                     const dataPath = item.path;
                     isLoading = false;
@@ -168,7 +175,8 @@ export const openDocHistory = (options: {
                                 action: [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML],
                             });
                         }
-                        dialog.element.querySelector(".protyle-title__input").textContent = item.title;
+                        titleElement.textContent = item.title;
+                        titleElement.classList.remove("fn__none")
                         isLoading = false;
                     });
                     target.parentElement.querySelector(".b3-list-item--focus")?.classList.remove("b3-list-item--focus");
@@ -178,11 +186,24 @@ export const openDocHistory = (options: {
                 event.preventDefault();
                 break;
             } else if ((type === "docprevious" || type === "docnext") && target.getAttribute("disabled") !== "disabled") {
-                const currentPage = parseInt(dialog.element.getAttribute("data-page"));
+                const currentPage = parseInt(pageNumElement.textContent);
                 renderDoc(dialog.element, type === "docprevious" ? currentPage - 1 : currentPage + 1, options.id);
                 event.stopPropagation();
                 event.preventDefault();
                 break;
+            } else if (type === "jumpRepoPage") {
+                const totalPage = parseInt(target.getAttribute("data-totalpage") || "1");
+                confirmDialog(
+                    window.siyuan.languages.jumpToPage.replace("${x}", totalPage),
+                    `<input class="b3-text-field fn__block" type="number" min="1" max="${totalPage}" value="${pageNumElement.textContent}">`,
+                    (confirmD) => {
+                        const inputElement = confirmD.element.querySelector(".b3-text-field") as HTMLInputElement;
+                        if (inputElement.value === "") {
+                            return;
+                        }
+                        renderDoc(dialog.element, Math.max(1, Math.min(parseInt(inputElement.value), totalPage)), options.id);
+                    }
+                );
             }
             target = target.parentElement;
         }

app/src/history/history.ts

@@ -354,7 +354,7 @@ export const openHistory = (app: App) => {
     </div>
     <div class="fn__flex-1 fn__flex" id="historyContainer">
         <div data-type="doc" class="history__repo fn__block" data-init="true">
-            <div style="overflow:auto;border-bottom: 1px solid var(--b3-border-color);">
+            <div class="history__action">
                 <div class="block__icons">
                     <span data-type="docprevious" class="block__icon block__icon--show b3-tooltips b3-tooltips__e" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
                     <button class="b3-button b3-button--text ft__selectnone" data-type="jumpHistoryPage" data-totalpage="1">1</button>
@@ -409,7 +409,7 @@ export const openHistory = (app: App) => {
             <li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>
         </ul>
         <div data-type="repo" class="fn__none history__repo">
-            <div style="overflow: auto"">
+            <div class="history__action">
                 <div class="block__icons">
                     <span data-type="previous" class="block__icon block__icon--show b3-tooltips b3-tooltips__e" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
                     <button class="b3-button b3-button--text ft__selectnone" data-type="jumpRepoPage" data-totalpage="1">1</button>
@@ -839,9 +839,9 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
                 if (totalPage > 1) {
                     confirmDialog(
                         window.siyuan.languages.jumpToPage.replace("${x}", totalPage),
-                        `<input style="width: 100%;" class="b3-text-field fn__flex-center" type="number" min="1" max="${totalPage}" value="${currentPage}">`,
-                        (dialog: Dialog) => {
-                            const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
+                        `<input class="b3-text-field fn__block" type="number" min="1" max="${totalPage}" value="${currentPage}">`,
+                        (confirmD) => {
+                            const inputElement = confirmD.element.querySelector(".b3-text-field") as HTMLInputElement;
                             if (inputElement.value === "") {
                                 return;
                             }
@@ -858,9 +858,9 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
                 if (totalPage > 1) {
                     confirmDialog(
                         window.siyuan.languages.jumpToPage.replace("${x}", totalPage),
-                        `<input style="width: 100%;" class="b3-text-field fn__flex-center" type="number" min="1" max="${totalPage}" value="${currentPage}">`,
-                        (dialog: Dialog) => {
-                            const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
+                        `<input class="b3-text-field fn__block" type="number" min="1" max="${totalPage}" value="${currentPage}">`,
+                        (confirmD) => {
+                            const inputElement = confirmD.element.querySelector(".b3-text-field") as HTMLInputElement;
                             if (inputElement.value === "") {
                                 return;
                             }