🎨 fix https://github.com/siyuan-note/siyuan/issues/7951

app/src/assets/scss/business/_card.scss

@@ -17,14 +17,19 @@
 
   &__empty {
     display: flex;
-    justify-content: center;
-    flex-direction: column;
     flex: 1;
     text-align: center;
     background-color: var(--b3-theme-background);
     font-size: 16px;
+    box-sizing: border-box;
+    flex-direction: column;
+    justify-content: center;
+    color: var(--b3-theme-on-surface);
     align-items: center;
-    padding: 16px;
+
+    &--space {
+      padding: 16px;
+    }
 
     & > div {
       font-size: 64px;

app/src/boot/globalShortcut.ts

@@ -424,6 +424,7 @@ export const globalShortcut = () => {
                 window.siyuan.ctrlIsPressed = false;
             }
         }
+
         if (!event.altKey && event.shiftKey && !isCtrl(event)) {
             if (event.key === "Shift") {
                 window.siyuan.shiftIsPressed = true;
@@ -431,6 +432,7 @@ export const globalShortcut = () => {
                 window.siyuan.shiftIsPressed = false;
             }
         }
+
         if (event.altKey && !event.shiftKey && !isCtrl(event)) {
             if (event.key === "Alt") {
                 window.siyuan.altIsPressed = true;
@@ -443,6 +445,7 @@ export const globalShortcut = () => {
             dialogArrow(switchDialog.element, event);
             return;
         }
+
         const isTabWindow = isWindow();
         if (event.ctrlKey && !event.metaKey && event.key === "Tab") {
             if (switchDialog && switchDialog.element.parentElement) {
@@ -549,6 +552,20 @@ export const globalShortcut = () => {
             event.preventDefault();
             return;
         }
+
+        if (event.key === "ArrowUp" || event.key === "ArrowDown" ) {
+            const viewCardsDialog = window.siyuan.dialogs.find(item => {
+                if (item.element.getAttribute("data-key") === "viewCards") {
+                    return true;
+                }
+            });
+            if (viewCardsDialog) {
+                viewCardsDialog.element.dispatchEvent(new CustomEvent("click", {detail: event.key.toLowerCase()}));
+                event.preventDefault();
+                return;
+            }
+        }
+
         /// #if !BROWSER
         if (matchHotKey("⌘=", event) && !hasClosestByClassName(target, "pdf__outer")) {
             Constants.SIZE_ZOOM.find((item, index) => {

app/src/card/openCard.ts

@@ -52,7 +52,7 @@ export const openCardByData = (cardsData: { cards: ICard[], unreviewedCount: num
         </div>`}
     </div>
     <div class="card__block fn__flex-1${blocks.length === 0 ? " fn__none" : ""}${window.siyuan.config.flashcard.mark ? " card__block--hidemark" : ""}${window.siyuan.config.flashcard.superBlock ? " card__block--hidesb" : ""}${window.siyuan.config.flashcard.list ? " card__block--hideli" : ""}" data-type="render"></div>
-    <div class="card__empty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
+    <div class="card__empty card__empty--space${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
         <div>🔮</div>
         ${window.siyuan.languages.noDueCard}
     </div>
@@ -372,7 +372,7 @@ const newRound = (countElement: Element, editor: Protyle, actionElements: NodeLi
     emptyElement.innerHTML = `<div>♻️ </div>
 <span>${window.siyuan.languages.continueReview2.replace("${count}", unreviewedCount)}</span>
 <div class="fn__hr"></div>
-<button data-type="newround" class="b3-button">${window.siyuan.languages.continueReview1}</button>`;
+<button data-type="newround" class="b3-button fn__size200">${window.siyuan.languages.continueReview1}</button>`;
     emptyElement.classList.remove("fn__none");
     actionElements[0].classList.add("fn__none");
     actionElements[1].classList.add("fn__none");

app/src/card/viewCards.ts

@@ -78,7 +78,29 @@ export const viewCards = (deckID: string, title: string, deckType: "Tree" | "" |
             nextElement.removeAttribute("disabled");
         }
         dialog.element.style.zIndex = "200";
+        dialog.element.setAttribute("data-key", "viewCards");
         dialog.element.addEventListener("click", (event) => {
+            if (typeof event.detail === "string") {
+                let currentElement = listElement.querySelector(".b3-list-item--focus");
+                if (currentElement) {
+                    currentElement.classList.remove("b3-list-item--focus");
+                    if (event.detail === "arrowup") {
+                        currentElement = currentElement.previousElementSibling || currentElement.parentElement.lastElementChild;
+                    } else if (event.detail === "arrowdown") {
+                        currentElement = currentElement.nextElementSibling || currentElement.parentElement.firstElementChild;
+                    }
+                    const currentRect = currentElement.getBoundingClientRect();
+                    const parentRect = currentElement.parentElement.getBoundingClientRect();
+                    if (currentRect.top < parentRect.top || currentRect.bottom > parentRect.bottom) {
+                        currentElement.scrollIntoView(currentRect.top < parentRect.top);
+                    }
+                    getArticle(edit, currentElement.getAttribute("data-id"));
+                    currentElement.classList.add("b3-list-item--focus");
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
             let target = event.target as HTMLElement;
             while (target && !dialog.element.isSameNode(target)) {
                 const type = target.getAttribute("data-type");