🎨 https://github.com/siyuan-note/siyuan/issues/5066 tab

app/src/boot/onGetConfig.ts

@@ -85,7 +85,7 @@ const hasKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "edito
     return match;
 };
 
-export const onGetConfig = (isStart: boolean, app:App) => {
+export const onGetConfig = (isStart: boolean, app: App) => {
     const matchKeymap1 = matchKeymap(Constants.SIYUAN_KEYMAP.general, "general");
     const matchKeymap2 = matchKeymap(Constants.SIYUAN_KEYMAP.editor.general, "editor", "general");
     const matchKeymap3 = matchKeymap(Constants.SIYUAN_KEYMAP.editor.insert, "editor", "insert");
@@ -135,7 +135,7 @@ export const onGetConfig = (isStart: boolean, app:App) => {
     fetchPost("/api/system/getEmojiConf", {}, response => {
         window.siyuan.emojis = response.data as IEmoji[];
         try {
-            JSONToLayout(isStart);
+            JSONToLayout(app, isStart);
             openChangelog();
         } catch (e) {
             resetLayout();

app/src/card/newCardTab.ts

@@ -14,7 +14,7 @@ export const newCardModel = (options: {
 }) => {
     let editor: Protyle;
     const custom = new Custom({
-        type: "card",
+        type: "siyuan-card",
         tab: options.tab,
         data: options.data,
         init() {

app/src/card/openCard.ts

@@ -12,6 +12,7 @@ import {MenuItem} from "../menus/Menu";
 import {escapeHtml} from "../util/escape";
 /// #if !MOBILE
 import {openFile} from "../editor/util";
+import {newCardModel} from "./newCardTab";
 /// #endif
 import {getDisplayName, movePathTo} from "../util/pathName";
 
@@ -21,9 +22,9 @@ export const genCardHTML = (options: {
     blocks: ICard[],
     isTab: boolean
 }) => {
-    let iconsHTML:string;
+    let iconsHTML: string;
     /// #if MOBILE
-    iconsHTML=`<div class="toolbar toolbar--border">
+    iconsHTML = `<div class="toolbar toolbar--border">
     <svg class="toolbar__icon"><use xlink:href="#iconRiffCard"></use></svg>
     <span class="fn__flex-1 fn__flex-center toolbar__text">${window.siyuan.languages.riffCard}</span>
     <div data-type="count" class="${options.blocks.length === 0 ? "fn__none" : ""}">1/${options.blocks.length}</span></div>
@@ -31,7 +32,7 @@ export const genCardHTML = (options: {
     <svg class="toolbar__icon" data-type="close"><use xlink:href="#iconCloseRound"></use></svg>
 </div>`;
     /// #else
-    iconsHTML=`<div class="block__icons">
+    iconsHTML = `<div class="block__icons">
         ${options.isTab ? '<div class="fn__flex-1"></div>' : `<div class="block__icon block__icon--show">
             <svg><use xlink:href="#iconRiffCard"></use></svg>
         </div>
@@ -205,11 +206,16 @@ export const bindCardEvent = (options: {
             if (sticktabElement) {
                 openFile({
                     position: "right",
-                    customData:{
+                    custom: {
-                        cardType: filterElement.getAttribute("data-cardtype") as TCardType,
+                        icon: "iconRiffCard",
-                        id: filterElement.getAttribute("data-id"),
+                        title: window.siyuan.languages.spaceRepetition,
-                        title: options.title
+                        data: {
-                    }
+                            cardType: filterElement.getAttribute("data-cardtype") as TCardType,
+                            id: filterElement.getAttribute("data-id"),
+                            title: options.title
+                        },
+                        fn: newCardModel
+                    },
                 });
                 if (options.dialog) {
                     options.dialog.destroy();

app/src/editor/util.ts

@@ -26,7 +26,6 @@ import {countBlockWord, countSelectWord} from "../layout/status";
 import {showMessage} from "../dialog/message";
 import {objEquals} from "../util/functions";
 import {resize} from "../protyle/util/resize";
-import {newCardModel} from "../card/newCardTab";
 import {Search} from "../search";
 
 export const openFileById = async (options: {
@@ -96,9 +95,9 @@ export const openFile = (options: IOpenFileOptions) => {
             }
             return;
         }
-    } else if (options.customData) {
+    } else if (options.custom) {
         const custom = allModels.custom.find((item) => {
-            if (objEquals(item.data, options.customData)) {
+            if (objEquals(item.data, options.custom.data)) {
                 if (!pdfIsLoading(item.parent.parent.element)) {
                     item.parent.parent.switchTab(item.parent.headElement);
                     item.parent.parent.showHeading();
@@ -384,14 +383,14 @@ const newTab = (options: IOpenFileOptions) => {
                 }
             });
         }
-    } else if (options.customData) {
+    } else if (options.custom) {
         tab = new Tab({
-            icon: "iconRiffCard",
+            icon: options.custom.icon,
-            title: window.siyuan.languages.spaceRepetition,
+            title: options.custom.title,
             callback(tab) {
-                tab.addModel(newCardModel({
+                tab.addModel(options.custom.fn({
                     tab,
-                    data: options.customData
+                    data: options.custom.data
                 }));
                 setPanelFocus(tab.panelElement.parentElement.parentElement);
             }

app/src/index.ts

@@ -166,7 +166,7 @@ export class App {
             getLocalStorage(() => {
                 fetchGet(`/appearance/langs/${window.siyuan.config.appearance.lang}.json?v=${Constants.SIYUAN_VERSION}`, (lauguages) => {
                     window.siyuan.languages = lauguages;
-                    window.siyuan.menus = new Menus();
+                    window.siyuan.menus = new Menus(siyuanApp);
                     bootSync();
                     fetchPost("/api/setting/getCloudUser", {}, userResponse => {
                         window.siyuan.user = userResponse.data;

app/src/layout/Wnd.ts

@@ -34,8 +34,10 @@ import {isWindow} from "../util/functions";
 import {hideAllElements} from "../protyle/ui/hideElements";
 import {focusByOffset, getSelectionOffset} from "../protyle/util/selection";
 import {Custom} from "./dock/Custom";
+import {App} from "../index";
 
 export class Wnd {
+    private app: App;
     public id: string;
     public parent?: Layout;
     public element: HTMLElement;
@@ -43,8 +45,9 @@ export class Wnd {
     public children: Tab[] = [];
     public resize?: TDirection;
 
-    constructor(resize?: TDirection, parentType?: TLayout) {
+    constructor(app: App, resize?: TDirection, parentType?: TLayout) {
         this.id = genUUID();
+        this.app = app;
         this.resize = resize;
         this.element = document.createElement("div");
         this.element.classList.add("fn__flex-1", "fn__flex");
@@ -223,7 +226,7 @@ export class Wnd {
             /// #if !BROWSER
             if (!oldTab) { // 从主窗口拖拽到页签新窗口
                 if (wnd instanceof Wnd) {
-                    JSONToCenter(tabData, wnd);
+                    JSONToCenter(app, tabData, wnd);
                     oldTab = wnd.children[wnd.children.length - 1];
                     ipcRenderer.send(Constants.SIYUAN_SEND_WINDOWS, {cmd: "closetab", data: tabData.id});
                     it.querySelector("li[data-clone='true']").remove();
@@ -332,7 +335,7 @@ export class Wnd {
             let oldTab = getInstanceById(tabData.id) as Tab;
             /// #if !BROWSER
             if (!oldTab) { // 从主窗口拖拽到页签新窗口
-                JSONToCenter(tabData, this);
+                JSONToCenter(app, tabData, this);
                 oldTab = this.children[this.children.length - 1];
                 ipcRenderer.send(Constants.SIYUAN_SEND_WINDOWS, {cmd: "closetab", data: tabData.id});
                 getCurrentWindow().focus();
@@ -596,7 +599,7 @@ export class Wnd {
             }).element);
         });
         window.siyuan.menus.menu.element.setAttribute("data-name", "tabList");
-        const rect  = target.getBoundingClientRect();
+        const rect = target.getBoundingClientRect();
         window.siyuan.menus.menu.popup({
             x: rect.left + rect.width,
             y: rect.top + rect.height,
@@ -738,7 +741,7 @@ export class Wnd {
                     return;
                 }
                 /// #endif
-                const wnd = new Wnd();
+                const wnd = new Wnd(this.app);
                 window.siyuan.layout.centerLayout.addWnd(wnd);
                 wnd.addTab(newCenterEmptyTab());
             }
@@ -844,7 +847,7 @@ export class Wnd {
             // 场景：没有打开的文档，点击标签面板打开
             return this;
         }
-        const wnd = new Wnd(direction);
+        const wnd = new Wnd(this.app, direction);
         if (direction === this.parent.direction) {
             this.parent.addWnd(wnd, this.id);
         } else if (this.parent.children.length === 1) {

app/src/layout/dock/Custom.ts

@@ -5,21 +5,23 @@ import {Model} from "../Model";
 export class Custom extends Model {
     private element: Element;
     public data: any;
+    public type: string;
     public init: () => void;
     public destroy: () => void;
     public resize: () => void;
     public update: () => void;
 
     constructor(options: {
+        type: string,
         tab: Tab,
         data: any,
         destroy?: () => void,
         resize?: () => void,
         update?: () => void,
-        type: string,   // 同一类型的唯一标识
         init: () => void
     }) {
         super({id: options.tab.id});
+        this.type = options.type;
         if (window.siyuan.config.fileTree.openFilesUseCurrentTab) {
             options.tab.headElement.classList.add("item--unupdate");
         }

app/src/layout/util.ts

@@ -36,6 +36,7 @@ import {openHistory} from "../history/history";
 import {Custom} from "./dock/Custom";
 import {newCardModel} from "../card/newCardTab";
 import {openRecentDocs} from "../business/openRecentDocs";
+import {App} from "../index";
 
 export const setPanelFocus = (element: Element) => {
     if (element.classList.contains("layout__tab--active") || element.classList.contains("layout__wnd--active")) {
@@ -237,7 +238,7 @@ const JSONToDock = (json: any) => {
     window.siyuan.layout.bottomDock = new Dock({position: "Bottom", data: json.bottom});
 };
 
-export const JSONToCenter = (json: ILayoutJSON, layout?: Layout | Wnd | Tab | Model, isStart = false) => {
+export const JSONToCenter = (app: App, json: ILayoutJSON, layout?: Layout | Wnd | Tab | Model, isStart = false) => {
     let child: Layout | Wnd | Tab | Model;
     if (json.instance === "Layout") {
         if (!layout) {
@@ -258,7 +259,7 @@ export const JSONToCenter = (json: ILayoutJSON, layout?: Layout | Wnd | Tab | Mo
             (layout as Layout).addLayout(child);
         }
     } else if (json.instance === "Wnd") {
-        child = new Wnd(json.resize, (layout as Layout).type);
+        child = new Wnd(app, json.resize, (layout as Layout).type);
         (layout as Layout).addWnd(child);
         if (json.width) {
             child.element.classList.remove("fn__flex-1");
@@ -338,15 +339,27 @@ export const JSONToCenter = (json: ILayoutJSON, layout?: Layout | Wnd | Tab | Mo
             config: json.config
         }));
     } else if (json.instance === "Custom") {
-        (layout as Tab).addModel(newCardModel({
+        if (json.customModelType === "siyuan-card") {
-            tab: (layout as Tab),
+            (layout as Tab).addModel(newCardModel({
-            data: json.data
+                tab: (layout as Tab),
-        }));
+                data: json.customModelData
+            }));
+        } else {
+            app.plugins.find(item => {
+                if (item.models[json.customModelType]) {
+                    (layout as Tab).addModel(item.models[json.customModelType]({
+                        tab: (layout as Tab),
+                        data: json.customModelData
+                    }));
+                    return true;
+                }
+            });
+        }
     }
     if (json.children) {
         if (Array.isArray(json.children)) {
             json.children.forEach((item: any, index: number) => {
-                JSONToCenter(item, layout ? child : window.siyuan.layout.layout, isStart);
+                JSONToCenter(app, item, layout ? child : window.siyuan.layout.layout, isStart);
                 if (item.instance === "Tab" && index === (json.children as ILayoutJSON[]).length - 1) {
                     const activeTabElement = (child as Wnd).headersElement.querySelector('[data-init-active="true"]') as HTMLElement;
                     if (activeTabElement) {
@@ -361,13 +374,13 @@ export const JSONToCenter = (json: ILayoutJSON, layout?: Layout | Wnd | Tab | Mo
                 }
             });
         } else {
-            JSONToCenter(json.children, child, isStart);
+            JSONToCenter(app, json.children, child, isStart);
         }
     }
 };
 
-export const JSONToLayout = (isStart: boolean) => {
+export const JSONToLayout = (app: App, isStart: boolean) => {
-    JSONToCenter(window.siyuan.config.uiLayout.layout, undefined, isStart);
+    JSONToCenter(app, window.siyuan.config.uiLayout.layout, undefined, isStart);
     JSONToDock(window.siyuan.config.uiLayout);
     // 启动时不打开页签，需要移除没有钉住的页签
     if (window.siyuan.config.fileTree.closeTabsOnStart && isStart) {
@@ -472,7 +485,8 @@ export const layoutToJSON = (layout: Layout | Wnd | Tab | Model, json: any) => {
         json.config = layout.config;
     } else if (layout instanceof Custom) {
         json.instance = "Custom";
-        json.data = layout.data;
+        json.customModelType = layout.type;
+        json.customModelData = layout.data;
     }
 
     if (layout instanceof Layout || layout instanceof Wnd) {
@@ -568,7 +582,7 @@ export const resizeTabs = () => {
     }, 200);
 };
 
-export const copyTab = (tab: Tab) => {
+export const copyTab = (app: App, tab: Tab) => {
     return new Tab({
         icon: tab.icon,
         docIcon: tab.docIcon,
@@ -620,10 +634,23 @@ export const copyTab = (tab: Tab) => {
                     config: tab.model.config
                 });
             } else if (tab.model instanceof Custom) {
-                model = newCardModel({
+                const custom = tab.model as Custom;
-                    tab,
+                if (custom.type === "siyuan-card") {
-                    data: tab.model.data
+                    model = newCardModel({
-                });
+                        tab,
+                        data: custom.data
+                    });
+                } else {
+                    app.plugins.find(item => {
+                        if (item.models[custom.type]) {
+                            model = item.models[custom.type]({
+                                tab,
+                                data: custom.data
+                            });
+                            return true;
+                        }
+                    });
+                }
             } else if (!tab.model && tab.headElement) {
                 const initData = JSON.parse(tab.headElement.getAttribute("data-initdata") || "{}");
                 model = new Editor({

app/src/menus/index.ts

@@ -8,12 +8,13 @@ import {initTabMenu} from "./tab";
 /// #endif
 import {Menu} from "./Menu";
 import {hasTopClosestByTag} from "../protyle/util/hasClosest";
+import {App} from "../index";
 
 
 export class Menus {
     public menu: Menu;
 
-    constructor() {
+    constructor(app: App) {
         this.menu = new Menu();
         /// #if !MOBILE
         window.addEventListener("contextmenu", (event) => {
@@ -23,7 +24,7 @@ export class Menus {
                 const dataType = target.getAttribute("data-type");
                 if (dataType === "tab-header") {
                     this.unselect();
-                    initTabMenu((getInstanceById(target.getAttribute("data-id")) as Tab)).popup({
+                    initTabMenu(app, (getInstanceById(target.getAttribute("data-id")) as Tab)).popup({
                         x: event.clientX,
                         y: event.clientY
                     });

app/src/menus/tab.ts

@@ -6,6 +6,7 @@ import {copyTab, resizeTabs} from "../layout/util";
 import {openNewWindow} from "../window/openNewWindow";
 /// #endif
 import {copySubMenu} from "./commonMenuItem";
+import {App} from "../index";
 
 const closeMenu = (tab: Tab) => {
     const allTabs: Tab[] = [];
@@ -115,12 +116,12 @@ const closeMenu = (tab: Tab) => {
     window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
 };
 
-const splitSubMenu = (tab: Tab) => {
+const splitSubMenu = (app: App, tab: Tab) => {
     const subMenus: IMenu[] = [{
         icon: "iconSplitLR",
         label: window.siyuan.languages.splitLR,
         click: () => {
-            tab.parent.split("lr").addTab(copyTab(tab));
+            tab.parent.split("lr").addTab(copyTab(app, tab));
         }
     }];
     if (tab.parent.children.length > 1) {
@@ -140,7 +141,7 @@ const splitSubMenu = (tab: Tab) => {
         icon: "iconSplitTB",
         label: window.siyuan.languages.splitTB,
         click: () => {
-            tab.parent.split("tb").addTab(copyTab(tab));
+            tab.parent.split("tb").addTab(copyTab(app, tab));
         }
     });
 
@@ -160,12 +161,12 @@ const splitSubMenu = (tab: Tab) => {
     return subMenus;
 };
 
-export const initTabMenu = (tab: Tab) => {
+export const initTabMenu = (app: App, tab: Tab) => {
     window.siyuan.menus.menu.remove();
     closeMenu(tab);
     window.siyuan.menus.menu.append(new MenuItem({
         label: window.siyuan.languages.split,
-        submenu: splitSubMenu(tab)
+        submenu: splitSubMenu(app, tab)
     }).element);
     const model = tab.model;
     let rootId: string;

app/src/mobile/index.ts

@@ -64,7 +64,7 @@ class App {
             getLocalStorage(() => {
                 fetchGet(`/appearance/langs/${window.siyuan.config.appearance.lang}.json?v=${Constants.SIYUAN_VERSION}`, (lauguages) => {
                     window.siyuan.languages = lauguages;
-                    window.siyuan.menus = new Menus();
+                    window.siyuan.menus = new Menus(siyuanApp);
                     document.title = window.siyuan.languages.siyuanNote;
                     bootSync();
                     loadAssets(confResponse.data.conf.appearance);

app/src/plugin/API.ts

@@ -6,6 +6,8 @@ import {MenuItem} from "../menus/Menu";
 import {Menu as SiyuanMenu} from "../menus/Menu";
 import {fetchGet, fetchPost, fetchSyncPost} from "../util/fetch";
 import {isMobile} from "../util/functions";
+import {Custom} from "../layout/dock/Custom";
+import {openFile} from "../editor/util";
 
 export class Menu {
     private menu: SiyuanMenu;
@@ -73,8 +75,9 @@ export const API = {
     fetchPost,
     fetchSyncPost,
     fetchGet,
-    Plugin: Plugin,
+    isMobile,
+    openTab: openFile,
+    Plugin,
     Dialog,
     Menu,
-    isMobile
 };

app/src/plugin/index.ts

@@ -2,12 +2,15 @@ import {App} from "../index";
 import {EventBus} from "./EventBus";
 import {fetchPost} from "../util/fetch";
 import {isMobile, isWindow} from "../util/functions";
+import {Custom} from "../layout/dock/Custom";
+import {Tab} from "../layout/Tab";
 
 export class Plugin {
     public i18n: IObject;
     public eventBus: EventBus;
     public data: any;
     public name: string;
+    public models: { [key: string]: (options: { tab: Tab, data: any }) => Custom } = {};
 
     constructor(options: {
         app: App,
@@ -89,4 +92,24 @@ export class Plugin {
             });
         });
     }
+
+    public createTab(options: {
+        type: string,
+        destroy?: () => void,
+        resize?: () => void,
+        update?: () => void,
+        init: () => void
+    }) {
+        const type2 = this.name + options.type;
+        this.models[type2] = (arg: { data: any, tab: Tab }) => new Custom({
+            tab: arg.tab,
+            type: type2,
+            data: arg.data,
+            init: options.init,
+            destroy: options.destroy,
+            resize: options.resize,
+            update: options.update,
+        });
+        return this.models[type2];
+    }
 }

app/src/types/index.d.ts

@@ -291,11 +291,8 @@ declare interface ILayoutJSON extends ILayoutOptions {
     rootId?: string
     active?: boolean
     pin?: boolean
-    data?: {
+    customModelData?: any
-        cardType: TCardType,
+    customModelType?: string
-        id: string,
-        title?: string
-    }
     config?: ISearchOption
     children?: ILayoutJSON[] | ILayoutJSON
 }
@@ -310,7 +307,13 @@ declare interface IDockTab {
 
 declare interface IOpenFileOptions {
     searchData?: ISearchOption, // 搜索必填
-    customData?: any, // card 必填
+    // card 和自定义页签 必填
+    custom?: {
+        title: string,
+        icon: string,
+        data?: any
+        fn?: (options: { tab: import("../layout/Tab").Tab, data: any }) => import("../layout/Model").Model,
+    }
     assetPath?: string, // asset 必填
     fileName?: string, // file 必填
     rootIcon?: string, // 文档图标

app/src/window/index.ts

@@ -131,7 +131,7 @@ class App {
             getLocalStorage(() => {
                 fetchGet(`/appearance/langs/${window.siyuan.config.appearance.lang}.json?v=${Constants.SIYUAN_VERSION}`, (lauguages) => {
                     window.siyuan.languages = lauguages;
-                    window.siyuan.menus = new Menus();
+                    window.siyuan.menus = new Menus(siyuanApp);
                     fetchPost("/api/setting/getCloudUser", {}, userResponse => {
                         window.siyuan.user = userResponse.data;
                         loadPlugins(siyuanApp);

app/src/window/init.ts

@@ -11,7 +11,7 @@ import {getSearch} from "../util/functions";
 import {initWindow} from "../boot/onGetConfig";
 import {App} from "../index";
 
-export const init = (app:App) => {
+export const init = (app: App) => {
     webFrame.setZoomFactor(window.siyuan.storage[Constants.LOCAL_ZOOM]);
     globalShortcut(app);
     fetchPost("/api/system/getEmojiConf", {}, response => {
@@ -19,13 +19,13 @@ export const init = (app:App) => {
 
         const layout = JSON.parse(sessionStorage.getItem("layout") || "{}");
         if (layout.layout) {
-            JSONToCenter(layout.layout);
+            JSONToCenter(app, layout.layout);
             window.siyuan.layout.centerLayout = window.siyuan.layout.layout;
             return;
         }
         const tabJSON = JSON.parse(getSearch("json"));
         tabJSON.active = true;
-        JSONToCenter({
+        JSONToCenter(app, {
             direction: "lr",
             resize: "lr",
             size: "auto",