diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
index c2041ef2d..a83374b9a 100644
--- a/app/src/card/openCard.ts
+++ b/app/src/card/openCard.ts
@@ -49,7 +49,7 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
     </div>
     <div class="b3-dialog__cardblock b3-dialog__cardblock--hide fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
     <div class="b3-dialog__cardempty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">
-        <div>🎉</div>
+        <div>🔮</div>
         ${window.siyuan.languages.noDueCard}
     </div>
     <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}">
@@ -110,8 +110,12 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
     dialog.element.addEventListener("click", (event) => {
         const viewElement = hasClosestByAttribute(event.target as HTMLElement, "data-type", "view");
         if (viewElement) {
-            // TODO 文档卡
-            viewCards(selectElement.value, selectElement.options[selectElement.selectedIndex].text);
+            if (selectElement) {
+                viewCards(selectElement.value, selectElement.options[selectElement.selectedIndex].text);
+            } else {
+                viewCards(countElement.previousElementSibling.getAttribute("data-id"),
+                    countElement.previousElementSibling.textContent, undefined, true);
+            }
             event.preventDefault();
             event.stopPropagation();
             return;
diff --git a/app/src/card/viewCards.ts b/app/src/card/viewCards.ts
index 9c3e35dad..1e371250a 100644
--- a/app/src/card/viewCards.ts
+++ b/app/src/card/viewCards.ts
@@ -11,10 +11,13 @@ import {Constants} from "../constants";
 import {onGet} from "../protyle/util/onGet";
 import {genCardItem} from "./makeCard";
 
-export const viewCards = (deckID: string, title: string, sourceElement?: HTMLElement) => {
+export const viewCards = (deckID: string, title: string, sourceElement?: HTMLElement, isDoc = false) => {
     let pageIndex = 1;
     let edit: Protyle;
-    fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (response) => {
+    fetchPost(isDoc ? "/api/riff/getTreeRiffCards" : "/api/riff/getRiffCards", {
+        id: deckID,
+        page: pageIndex
+    }, (response) => {
         const dialog = new Dialog({
             content: `<div class="fn__flex-column" style="height: 100%">
     <div class="fn__flex b3-form__space--small">
@@ -73,7 +76,7 @@ export const viewCards = (deckID: string, title: string, sourceElement?: HTMLEle
                     if (pageIndex <= 1) {
                         previousElement.setAttribute("disabled", "disabled");
                     }
-                    fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (cardsResponse) => {
+                    fetchPost("/api/riff/getRiffCards", {id: deckID, page: pageIndex}, (cardsResponse) => {
                         if (pageIndex === cardsResponse.data.pageCount) {
                             nextElement.setAttribute("disabled", "disabled");
                         } else if (cardsResponse.data.pageCount > 1) {
@@ -92,7 +95,7 @@ export const viewCards = (deckID: string, title: string, sourceElement?: HTMLEle
                     }
                     pageIndex++;
                     previousElement.removeAttribute("disabled");
-                    fetchPost("/api/riff/getRiffCards", {deckID, page: pageIndex}, (cardsResponse) => {
+                    fetchPost("/api/riff/getRiffCards", {id: deckID, page: pageIndex}, (cardsResponse) => {
                         if (pageIndex === cardsResponse.data.pageCount) {
                             nextElement.setAttribute("disabled", "disabled");
                         } else if (cardsResponse.data.pageCount > 1) {
diff --git a/app/src/menus/navigation.ts b/app/src/menus/navigation.ts
index 79ffa3a63..6053ee000 100644
--- a/app/src/menus/navigation.ts
+++ b/app/src/menus/navigation.ts
@@ -26,6 +26,8 @@ import {deleteFiles} from "../editor/deleteFile";
 import {getDockByType} from "../layout/util";
 import {Files} from "../layout/dock/Files";
 import {openNewWindowById} from "../window/openNewWindow";
+import {openCardByData} from "../card/openCard";
+import {escapeHtml} from "../util/escape";
 
 const initMultiMenu = (selectItemElements: NodeListOf<Element>) => {
     const fileItemElement = Array.from(selectItemElements).find(item => {
@@ -295,7 +297,15 @@ export const initFileMenu = (notebookId: string, pathString: string, liElement:
                 });
             }
         }).element);
-
+        window.siyuan.menus.menu.append(new MenuItem({
+            label: window.siyuan.languages.riffCard,
+            icon: "iconRiffCard",
+            click: () => {
+                fetchPost("/api/riff/getTreeRiffDueCards", {rootID: id}, (response) => {
+                    openCardByData(response.data, `<span data-id="${id}" class="fn__flex-center">${escapeHtml(name)}</span>`);
+                });
+            }
+        }).element);
         /// #if !MOBILE
         window.siyuan.menus.menu.append(new MenuItem({
             label: window.siyuan.languages.search,
diff --git a/app/src/protyle/header/Title.ts b/app/src/protyle/header/Title.ts
index 226aa4404..adfbffe4f 100644
--- a/app/src/protyle/header/Title.ts
+++ b/app/src/protyle/header/Title.ts
@@ -361,7 +361,7 @@ export class Title {
                 icon: "iconRiffCard",
                 click: () => {
                     fetchPost("/api/riff/getTreeRiffDueCards", {rootID: protyle.block.rootID}, (response) => {
-                        openCardByData(response.data, `<span class="fn__flex-center">${escapeHtml(this.editElement.textContent)}</span>`);
+                        openCardByData(response.data, `<span data-id="${protyle.block.rootID}"  class="fn__flex-center">${escapeHtml(this.editElement.textContent)}</span>`);
                     });
                 }
             }).element);