Improve spaced repetition interface

fix #10331

Author: TCOTC

app/src/card/newCardTab.ts

@@ -1,6 +1,6 @@
 import {Tab} from "../layout/Tab";
 import {Custom} from "../layout/dock/Custom";
-import {bindCardEvent, genCardHTML} from "./openCard";
+import {bindCardEvent, genCardHTML, initCardComponent} from "./openCard";
 import {fetchPost} from "../util/fetch";
 import {Protyle} from "../protyle";
 import {setPanelFocus} from "../layout/util";
@@ -37,23 +37,30 @@ export const newCardModel = (options: {
         });
     };
 
-    const renderCardsAndBindEvents = async (element: HTMLElement, data: any, cardsData: ICardData, index?: number) => {
+    const renderCardsAndBindEvents = async (element: HTMLElement, data: any, cardsData: ICardData, index?: number, isUpdate?: boolean) => {
         element.innerHTML = genCardHTML({
             id: data.id,
             cardType: data.cardType,
             cardsData,
             isTab: true,
         });
 
-        editor = await bindCardEvent({
+        const cardOptions = {
             app: options.app,
             element: element,
             id: data.id,
             title: data.title,
             cardType: data.cardType,
             cardsData,
             index,
-        });
+        };
+
+        if (isUpdate) {
+            const initResult = await initCardComponent(cardOptions);
+            editor = initResult.editor;
+        } else {
+            editor = await bindCardEvent(cardOptions);
+        }
 
         customObj.editors.push(editor);
     };
@@ -91,7 +98,7 @@ export const newCardModel = (options: {
         },
         async update() {
             const cardsData = await fetchCardsData();
-            await renderCardsAndBindEvents(this.element, this.data, cardsData);
+            await renderCardsAndBindEvents(this.element, this.data, cardsData ,undefined, true);
         }
     });
     customObj.element.addEventListener("click", () => {

app/src/card/openCard.ts

@@ -227,7 +227,7 @@ const getEditor = (id: string, protyle: IProtyle, element: Element, currentCard:
 
 };
 
-export const bindCardEvent = async (options: {
+export const initCardComponent = async (options: {
     app: App,
     element: Element,
     title?: string,
@@ -303,6 +303,33 @@ export const bindCardEvent = async (options: {
     };
 
     countElement.innerHTML = genCardCount(options.cardsData, index);
+    
+    return {
+        editor,
+        index,
+        actionElements,
+        countElement,
+        filterElement,
+        fetchNewRound
+    };
+};
+
+export const bindCardEvent = async (options: {
+    app: App,
+    element: Element,
+    title?: string,
+    cardsData: ICardData
+    cardType: TCardType,
+    id?: string,
+    dialog?: Dialog,
+    index?: number
+}) => {
+    // 初始化卡片组件
+    const initResult = await initCardComponent(options);
+    const { editor, actionElements, countElement, filterElement, fetchNewRound } = initResult;
+    let index = initResult.index;
+    
+    // 绑定点击事件
     options.element.addEventListener("click", (event: MouseEvent) => {
         const target = event.target as HTMLElement;
         let type = "";