🎨 fix https://github.com/siyuan-note/siyuan/issues/9926

app/src/assets/template/mobile/index.tpl

@@ -32,6 +32,7 @@
         <svg data-type="sidebar-tag-tab" class="toolbar__icon"><use xlink:href="#iconTags"></use></svg>
         <svg data-type="sidebar-backlink-tab" class="toolbar__icon"><use xlink:href="#iconLink"></use></svg>
         <svg data-type="sidebar-inbox-tab" class="toolbar__icon"><use xlink:href="#iconInbox"></use></svg>
+        <svg data-menu="true" data-type="sidebar-plugin-tab" class="toolbar__icon"><use xlink:href="#iconPlugin"></use></svg>
         <span class="fn__flex-1"></span>
         <svg class="toolbar__icon"><use xlink:href="#iconRight"></use></svg>
     </div>
@@ -42,6 +43,7 @@
         <div class="fn__flex-column fn__none" data-type="sidebar-tag"></div>
         <div class="fn__flex-column fn__none" data-type="sidebar-backlink"></div>
         <div class="fn__flex-column fn__none" data-type="sidebar-inbox"></div>
+        <div class="fn__flex-column fn__none" data-type="sidebar-plugin"></div>
     </div>
 </div>
 <div id="menu" class="b3-menu b3-menu--fullscreen"></div>

app/src/layout/dock/Custom.ts

@@ -7,7 +7,7 @@ export class Custom extends Model {
     public tab: Tab;
     public data: any;
     public type: string;
-    public init: () => void;
+    public init: (custom: Custom) => void;
     public destroy: () => void;
     public beforeDestroy: () => void;
     public resize: () => void;
@@ -22,7 +22,7 @@ export class Custom extends Model {
         beforeDestroy?: () => void,
         resize?: () => void,
         update?: () => void,
-        init: () => void
+        init: (custom: Custom) => void
     }) {
         super({app: options.app, id: options.tab.id});
         if (window.siyuan.config.fileTree.openFilesUseCurrentTab) {
@@ -38,6 +38,6 @@ export class Custom extends Model {
         this.beforeDestroy = options.beforeDestroy;
         this.resize = options.resize;
         this.update = options.update;
-        this.init();
+        this.init(this);
     }
 }

app/src/menus/Menu.ts

@@ -137,6 +137,9 @@ export class Menu {
     }
 
     public fullscreen(position: "bottom" | "all" = "all") {
+        if (this.element.lastElementChild.innerHTML === "") {
+            return;
+        }
         this.element.classList.add("b3-menu--fullscreen");
         this.element.style.zIndex = (++window.siyuan.zIndex).toString();
         this.element.firstElementChild.classList.remove("fn__none");

app/src/mobile/dock/MobileCustom.ts

@@ -0,0 +1,25 @@
+export class MobileCustom {
+    public element: Element;
+    public data: any;
+    public type: string;
+    public init: (custom: MobileCustom) => void;
+    public destroy: () => void;
+    public update: () => void;
+
+    constructor(options: {
+        element: Element,
+        type: string,
+        data: any,
+        destroy?: () => void,
+        update?: () => void,
+        init: (custom: MobileCustom) => void
+    }) {
+        this.element = options.element;
+        this.data = options.data;
+        this.type = options.type;
+        this.init = options.init;
+        this.destroy = options.destroy;
+        this.update = options.update;
+        this.init(this);
+    }
+}

app/src/mobile/util/initFramework.ts

@@ -21,6 +21,39 @@ import {Inbox} from "../../layout/dock/Inbox";
 import {App} from "../../index";
 import {setTitle} from "../../dialog/processSystem";
 import {checkFold} from "../../util/noRelyPCFunction";
+import {MobileCustom} from "../dock/MobileCustom";
+import {Menu} from "../../plugin/Menu";
+import {showMessage} from "../../dialog/message";
+
+let custom: MobileCustom;
+const openDockMenu = (app: App) => {
+    const menu = new Menu("dockMobileMenu");
+    if (menu.isOpen) {
+        return;
+    }
+    app.plugins.forEach((plugin) => {
+        Object.keys(plugin.docks).forEach((dockId) => {
+            menu.addItem({
+                label: plugin.docks[dockId].config.title,
+                icon: plugin.docks[dockId].config.icon,
+                click() {
+                    if (custom?.type === dockId) {
+                        return;
+                    } else {
+                        if (custom) {
+                            custom.destroy();
+                        }
+                        custom = plugin.docks[dockId].mobileModel(document.querySelector('#sidebar [data-type="sidebar-plugin"]'));
+                    }
+                }
+            })
+        });
+    });
+    menu.fullscreen("bottom");
+    if (menu.element.lastElementChild.innerHTML === "") {
+        showMessage(window.siyuan.languages.emptyContent);
+    }
+}
 
 export const initFramework = (app: App, isStart: boolean) => {
     setInlineStyle();
@@ -38,10 +71,16 @@ export const initFramework = (app: App, isStart: boolean) => {
         target: Element
     }) => {
         const svgElement = hasTopClosestByTag(event.target, "svg");
-        if (!svgElement || svgElement.classList.contains("toolbar__icon--active")) {
+        if (!svgElement) {
             return;
         }
         const type = svgElement.getAttribute("data-type");
+        if (svgElement.classList.contains("toolbar__icon--active")) {
+            if (type === "sidebar-plugin-tab") {
+                openDockMenu(app);
+            }
+            return;
+        }
         if (!type) {
             closePanel();
             return;
@@ -51,6 +90,7 @@ export const initFramework = (app: App, isStart: boolean) => {
             if (!itemType) {
                 return;
             }
+            const tabPanelElement = sidebarElement.lastElementChild.querySelector(`[data-type="${itemType.replace("-tab", "")}"]`);
             if (itemType === type) {
                 if (type === "sidebar-outline-tab") {
                     if (!outline) {
@@ -78,12 +118,19 @@ export const initFramework = (app: App, isStart: boolean) => {
                     }
                 } else if (type === "sidebar-inbox-tab" && !inbox) {
                     inbox = new Inbox(app, document.querySelector('#sidebar [data-type="sidebar-inbox"]'));
+                } else if (type === "sidebar-plugin-tab") {
+                    if (!custom) {
+                        tabPanelElement.innerHTML = `<div class="b3-list--empty">${window.siyuan.languages.emptyContent}</div>`;
+                        openDockMenu(app);
+                    } else if (custom.update) {
+                        custom.update();
+                    }
                 }
                 svgElement.classList.add("toolbar__icon--active");
-                sidebarElement.lastElementChild.querySelector(`[data-type="${itemType.replace("-tab", "")}"]`).classList.remove("fn__none");
+                tabPanelElement.classList.remove("fn__none");
             } else {
                 item.classList.remove("toolbar__icon--active");
-                sidebarElement.lastElementChild.querySelector(`[data-type="${itemType.replace("-tab", "")}"]`).classList.add("fn__none");
+                tabPanelElement.classList.add("fn__none");
             }
         });
     });

app/src/plugin/index.ts

@@ -5,10 +5,12 @@ import {isMobile, isWindow} from "../util/functions";
 /// #if !MOBILE
 import {Custom} from "../layout/dock/Custom";
 import {getAllModels} from "../layout/getAll";
-/// #endif
 import {Tab} from "../layout/Tab";
 import {setPanelFocus} from "../layout/util";
 import {getDockByType} from "../layout/tabUtil";
+///#else
+import {MobileCustom} from "../mobile/dock/MobileCustom";
+/// #endif
 import {hasClosestByAttribute} from "../protyle/util/hasClosest";
 import {BlockPanel} from "../block/Panel";
 import {Setting} from "./Setting";
@@ -45,12 +47,14 @@ export class Plugin {
         /// #endif
     } = {};
     public docks: {
-        /// #if !MOBILE
         [key: string]: {
             config: IPluginDockTab,
+            /// #if !MOBILE
             model: (options: { tab: Tab }) => Custom
+            /// #else
+            mobileModel: (element: Element) => MobileCustom
+            /// #endif
         }
-        /// #endif
     } = {};
 
     constructor(options: {
@@ -238,13 +242,25 @@ export class Plugin {
         update?: () => void,
         init: () => void
     }) {
-        /// #if !MOBILE
         const type2 = this.name + options.type;
         if (typeof options.config.index === "undefined") {
             options.config.index = 1000;
         }
         this.docks[type2] = {
             config: options.config,
+            /// #if MOBILE
+            mobileModel: (element) => {
+                const customObj = new MobileCustom({
+                    element,
+                    type: type2,
+                    data: options.data,
+                    init: options.init,
+                    update: options.update,
+                    destroy: options.destroy,
+                });
+                return customObj;
+            },
+            /// #else
             model: (arg: { tab: Tab }) => {
                 const customObj = new Custom({
                     app: this.app,
@@ -265,9 +281,9 @@ export class Plugin {
                 customObj.element.classList.add("sy__" + type2);
                 return customObj;
             }
+            /// #endif
         };
         return this.docks[type2];
-        /// #endif
     }
 
     public addFloatLayer = (options: {