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

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "riffCard": "闪卡",
   "compare": "比较",
   "switchTab": "页签切换",
   "recentDocs": "最近打开的文档",

app/src/menus/commonMenuItem.ts

@@ -38,6 +38,96 @@ const bindAttrInput = (inputElement: HTMLInputElement, confirmElement: Element)
     });
 };
 
+const genCardItem = (item: { id: string, name: string }) => {
+    return `<li data-id="${item.id}" class="b3-list-item 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.addAttr}">
+    <svg><use xlink:href="#iconAdd"></use></svg>
+</span>
+<span data-type="remove" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.remove}">
+    <svg><use xlink:href="#iconMin"></use></svg>
+</span>
+</li>`
+}
+export const openDiffCard = (nodeElement: Element[]) => {
+    const range = getEditorRange(nodeElement[0]);
+    fetchPost("/api/riff/getRiffDecks", {}, (response) => {
+        let html = ''
+        const ids: string[] = []
+        nodeElement.forEach(item => {
+            ids.push(item.getAttribute("data-node-id"))
+        })
+        response.data.forEach((item: { id: string, name: string }) => {
+            html += genCardItem(item)
+        })
+        const dialog = new Dialog({
+            width: isMobile() ? "80vw" : "50vw",
+            height: "70vh",
+            title: window.siyuan.languages.riffCard,
+            content: `<div class="b3-dialog__content fn__flex-column" style="box-sizing: border-box">
+    <div class="fn__flex">
+        <input class="b3-text-field fn__flex-1">
+        <span class="fn__space"></span>
+        <button data-type="create" class="b3-button b3-button--outline" style="width: 100px">
+            <svg><use xlink:href="#iconAdd"></use></svg>
+            ${window.siyuan.languages.addAttr}
+        </button>
+    </div>
+    <div class="fn__hr"></div>
+    <ul class="b3-list b3-list--background fn__flex-1">${html}</ul>
+</div>`,
+            destroyCallback() {
+                focusByRange(range);
+            }
+        });
+        dialog.element.addEventListener("click", (event) => {
+            let target = event.target as HTMLElement;
+            while (target && !target.isSameNode(dialog.element)) {
+                const type = target.getAttribute("data-type");
+                if (type === "create") {
+                    let msgId = ""
+                    const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
+                    if (inputElement.value) {
+                        if (msgId) {
+                            hideMessage(msgId);
+                        }
+                        fetchPost("/api/riff/createRiffDeck", {name: inputElement.value}, (response) => {
+                            dialog.element.querySelector(".b3-list").insertAdjacentHTML("beforeend", genCardItem(response.data))
+                            inputElement.value = '';
+                        })
+                    } else {
+                        msgId = showMessage(window.siyuan.languages._kernel[142])
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
+                } else if (type === "add") {
+                    fetchPost("/api/riff/addRiffCards", {
+                        deckID: target.parentElement.getAttribute("data-id"),
+                        blockIDs: ids
+                    }, () => {
+
+                    })
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
+                } else if (type === "remove") {
+                    fetchPost("/api/riff/removeRiffCards", {
+                        deckID: target.parentElement.getAttribute("data-id"),
+                        blockIDs: ids
+                    }, () => {
+
+                    })
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
+                }
+                target = target.parentElement;
+            }
+        })
+    })
+};
+
 export const openWechatNotify = (nodeElement: Element) => {
     const id = nodeElement.getAttribute("data-node-id");
     const range = getEditorRange(nodeElement);
@@ -805,7 +895,7 @@ export const movePathToMenu = (paths: string[]) => {
         icon: "iconMove",
         accelerator: window.siyuan.config.keymap.general.move.custom,
         click() {
-            movePathTo((toPath, toNotebook) =>{
+            movePathTo((toPath, toNotebook) => {
                 moveToPath(paths, toNotebook[0], toPath[0]);
             }, paths);
         }

app/src/protyle/gutter/index.ts

@@ -7,7 +7,7 @@ import {
 import {getIconByType} from "../../editor/getIcon";
 import {iframeMenu, setFold, tableMenu, videoMenu, zoomOut} from "../../menus/protyle";
 import {MenuItem} from "../../menus/Menu";
-import {copySubMenu, openAttr, openWechatNotify} from "../../menus/commonMenuItem";
+import {copySubMenu, openAttr, openDiffCard, openWechatNotify} from "../../menus/commonMenuItem";
 import {copyPlainText, updateHotkeyTip, writeText} from "../util/compatibility";
 import {
     transaction,
@@ -1427,8 +1427,14 @@ export class Gutter {
                     openWechatNotify(nodeElement);
                 }
             }).element);
-            window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
         }
+        window.siyuan.menus.menu.append(new MenuItem({
+            label: window.siyuan.languages.riffCard,
+            click() {
+                openDiffCard([nodeElement]);
+            }
+        }).element);
+        window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
         let updateHTML = nodeElement.getAttribute("updated") || "";
         if (updateHTML) {
             updateHTML = `${window.siyuan.languages.modifiedAt} ${dayjs(updateHTML).format("YYYY-MM-DD HH:mm:ss")}<br>`;