🎨 add count

app/src/assets/scss/_dialog.scss

@@ -122,7 +122,7 @@
   }
 
   &__cardaction .b3-button {
-    margin-top: 8px;
+    margin-top: 16px;
   }
 
   &__cardblock {

app/src/card/makeCard.ts

@@ -5,7 +5,7 @@ import {isMobile} from "../util/functions";
 import {hideMessage, showMessage} from "../dialog/message";
 import {confirmDialog} from "../dialog/confirmDialog";
 
-const genCardItem = (item: { id: string, name: string }) => {
+const genCardItem = (item: ICard) => {
     return `<li style="margin: 0 !important;" data-id="${item.id}" class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}">
 <span class="b3-list-item__text">${item.name}</span>
 <span data-type="add" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.addDeck}">
@@ -20,6 +20,8 @@ const genCardItem = (item: { id: string, name: string }) => {
 <span data-type="delete" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.delete}">
     <svg><use xlink:href="#iconTrashcan"></use></svg>
 </span>
+<span class="b3-list-item__meta">${item.updated}</span>
+<span class="popover__block counter b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.riffCard}">${item.size}</span>
 </li>`;
 };
 
@@ -31,7 +33,7 @@ export const makeCard = (nodeElement: Element[]) => {
         nodeElement.forEach(item => {
             ids.push(item.getAttribute("data-node-id"));
         });
-        response.data.forEach((item: { id: string, name: string }) => {
+        response.data.forEach((item: ICard) => {
             html += genCardItem(item);
         });
         const dialog = new Dialog({
@@ -79,8 +81,8 @@ export const makeCard = (nodeElement: Element[]) => {
                     fetchPost("/api/riff/addRiffCards", {
                         deckID: target.parentElement.getAttribute("data-id"),
                         blockIDs: ids
-                    }, () => {
-                        showMessage(window.siyuan.languages.addDeck);
+                    }, (addResponse) => {
+                        target.parentElement.outerHTML = genCardItem(addResponse.data)
                     });
                     event.stopPropagation();
                     event.preventDefault();
@@ -89,14 +91,14 @@ export const makeCard = (nodeElement: Element[]) => {
                     fetchPost("/api/riff/removeRiffCards", {
                         deckID: target.parentElement.getAttribute("data-id"),
                         blockIDs: ids
-                    }, () => {
-                        showMessage(window.siyuan.languages.removeDeck);
+                    }, (removeResponse) => {
+                        target.parentElement.outerHTML = genCardItem(removeResponse.data)
                     });
                     event.stopPropagation();
                     event.preventDefault();
                     break;
                 } else if (type === "delete") {
-                    confirmDialog(window.siyuan.languages.confirm, window.siyuan.languages.confirmDelete + "?", () => {
+                    confirmDialog(window.siyuan.languages.confirm, `${window.siyuan.languages.confirmDelete} <b>${target.parentElement.querySelector(".b3-list-item__text").textContent}</b>?`, () => {
                         fetchPost("/api/riff/removeRiffDeck", {
                             deckID: target.parentElement.getAttribute("data-id"),
                         }, () => {

app/src/card/openCard.ts

@@ -26,7 +26,7 @@ export const openCard = () => {
         <select class="b3-select fn__flex-1">${decksHTML}</select>
         <div style="margin-left: 8px" class="ft__on-surface ft__smaller fn__flex-center${blocks.length === 0 ? " fn__none" : ""}" data-type="count">${countHTML}</div>
     </div>
-    <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
+    <div class="fn__hr--b"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
     <div class="b3-dialog__cardblock b3-dialog__cardblock--show 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">${window.siyuan.languages.noDueCard}</div>
     <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}" style="flex-wrap: wrap" data-type="action">

app/src/types/index.d.ts

@@ -51,6 +51,12 @@ interface Window {
     hideKeyboardToolbar(): void
 }
 
+interface ICard {
+    id: string
+    updated: string
+    name: string
+    size: number
+}
 interface ISearchOption {
     name?: string
     sort: number,  //  0：按块类型（默认），1：按创建时间升序，2：按创建时间降序，3：按更新时间升序，4：按更新时间降序，5：按内容顺序（仅在按文档分组时），6：按相关度升序，7：按相关度降序