✨ fix https://github.com/siyuan-note/siyuan/issues/7578

app/src/assets/scss/base.scss

@@ -33,7 +33,7 @@
 @import "business/card";
 
 /*
-.status: 3
+.status: 2
 
 // 需小于 .block__popover
 // 需小于 ctrl+p https://github.com/siyuan-note/siyuan/issues/7174

app/src/assets/scss/component/_menu.scss

@@ -14,6 +14,31 @@
     display: none;
   }
 
+  &--fullscreen {
+    top: 35px;
+    left: 0;
+    width: 100%;
+    border: 0;
+    box-shadow: none;
+    bottom: 0;
+    right: 0;
+    max-height: none;
+
+    .b3-menu__submenu {
+      top: 54px;
+      left: 0;
+      bottom: 0;
+      max-height: none;
+      right: 0;
+      box-shadow: none;
+      border: 0;
+    }
+
+    .b3-menu__item--show > .b3-menu__submenu--row {
+      width: 100%;
+    }
+  }
+
   &--list {
     overflow: auto;
     max-height: 70vh;
@@ -27,6 +52,20 @@
     }
   }
 
+  &__title {
+    padding: 8px;
+    line-height: 30px;
+    font-size: 18px;
+    color: var(--b3-theme-on-surface);
+    text-align: center;
+
+    svg {
+      height: 30px;
+      width: 20px;
+      float: left;
+    }
+  }
+
   &__item {
     padding: 0 8px;
     border-radius: 4px;
@@ -56,10 +95,12 @@
 
         &--row {
           display: flex;
+          box-sizing: border-box;
           flex-wrap: wrap;
           flex-direction: row;
           width: 312px;
           padding: 4px;
+          align-content: flex-start;
 
           .b3-menu__icon {
             display: none;
@@ -97,7 +138,7 @@
     &--readonly {
       cursor: auto;
       color: var(--b3-theme-on-surface);
-      max-width: 320px;
+      max-width: 374px;
       white-space: normal;
       word-break: break-all;
       line-height: 16px;

app/src/assets/scss/mobile.scss

@@ -352,7 +352,6 @@
   width: 100%;
   box-sizing: border-box;
   background-color: var(--b3-theme-background);
-  z-index: 221;
   @extend .fn__ellipsis;
 }
 

app/src/menus/Menu.ts

@@ -12,8 +12,21 @@ export class Menu {
         this.wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
 
         this.element = document.getElementById("commonMenu");
-        this.element.addEventListener(isMobile() ? getEventName() : "mouseover", (event) => {
+        this.element.addEventListener(isMobile() ? "click" : "mouseover", (event) => {
             const target = event.target as Element;
+            if (isMobile()) {
+                const titleElement = hasClosestByClassName(target, "b3-menu__title");
+                if (titleElement) {
+                    const lastShowElements = this.element.querySelectorAll(".b3-menu__item--show");
+                    if (lastShowElements.length > 0) {
+                        lastShowElements[lastShowElements.length - 1].classList.remove("b3-menu__item--show");
+                    } else {
+                        this.remove();
+                    }
+                    return;
+                }
+            }
+
             const itemElement = hasClosestByClassName(target, "b3-menu__item");
             if (!itemElement) {
                 return;
@@ -35,7 +48,9 @@ export class Menu {
                 return;
             }
             itemElement.classList.add("b3-menu__item--show");
-            this.showSubMenu(subMenuElement);
+            if (!this.element.classList.contains("b3-menu--fullscreen")) {
+                this.showSubMenu(subMenuElement);
+            }
         });
     }
 
@@ -102,6 +117,15 @@ export class Menu {
         this.element.classList.remove("fn__none");
         setPosition(this.element, options.x - (isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h, options.w);
     }
+
+    public fullscreen () {
+        this.element.classList.add("b3-menu--fullscreen");
+        this.element.insertAdjacentHTML("afterbegin", `<div class="b3-menu__title">
+<svg><use xlink:href="#iconLeft"></use></svg>
+${window.siyuan.languages.back}
+</div>`);
+        this.popup({x: 0, y: 0});
+    }
 }
 
 export class MenuItem {

app/src/mobile/util/keyboardToolbar.ts

@@ -2,13 +2,27 @@ import {listIndent, listOutdent} from "../../protyle/wysiwyg/list";
 import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../../protyle/util/hasClosest";
 import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
 import {Constants} from "../../constants";
-import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
+import {focusByRange, getEditorRange, getSelectionPosition} from "../../protyle/util/selection";
 import {removeBlock} from "../../protyle/wysiwyg/remove";
 import {hintSlash} from "../../protyle/hint/extend";
 
 let renderKeyboardToolbarTimeout: number;
 let showKeyboardToolbarUtil = false;
 
+const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => {
+    protyle.hint.splitChar = "/";
+    protyle.hint.lastIndex = -1;
+    const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement
+    utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false)
+    protyle.hint.bindUploadEvent(protyle, utilElement);
+    utilElement.addEventListener("click", (event) => {
+        const btnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
+        if (btnElement) {
+            protyle.hint.fill(decodeURIComponent(btnElement.getAttribute("data-value")), protyle);
+        }
+    })
+}
+
 const renderKeyboardToolbarUtil = () => {
     const toolbarElement = document.getElementById("keyboardToolbar");
     const keyboardHeight = (parseInt(toolbarElement.getAttribute("data-keyboardheight")) + 42) + "px"
@@ -233,17 +247,7 @@ export const initKeyboardToolbar = () => {
             removeBlock(protyle, nodeElement, range);
             return;
         } else if (type === "add") {
-            protyle.hint.splitChar = "/";
+            renderSlashMenu(protyle, toolbarElement);
-            protyle.hint.lastIndex = -1;
-            const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement
-            utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false)
-            protyle.hint.bindUploadEvent(protyle, utilElement);
-            utilElement.addEventListener("click", (event) => {
-                const btnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
-                if (btnElement) {
-                    protyle.hint.fill(decodeURIComponent(btnElement.getAttribute("data-value")), protyle);
-                }
-            })
             renderKeyboardToolbarUtil();
             return;
         } else if (type === "more") {
@@ -251,7 +255,7 @@ export const initKeyboardToolbar = () => {
                 x: 0,
                 y: 0
             });
-            focusByRange(range);
+            hideKeyboardToolbar();
             return;
         } else if (type === "block") {
             protyle.gutter.renderMenu(protyle, nodeElement);

app/src/protyle/breadcrumb/index.ts

@@ -155,7 +155,6 @@ export class Breadcrumb {
         }
         fetchPost("/api/block/getTreeStat", {id: id || protyle.block.id}, (response) => {
             window.siyuan.menus.menu.remove();
-
             if (!protyle.contentElement.classList.contains("fn__none") && !protyle.disabled) {
                 let uploadHTML = "";
                 uploadHTML = '<input class="b3-form__upload" type="file" multiple="multiple"';
@@ -378,7 +377,11 @@ export class Breadcrumb {
 <div class="fn__flex">${window.siyuan.languages.image}<span class="fn__space fn__flex-1"></span>${response.data.imageCount}</div>
 <div class="fn__flex">${window.siyuan.languages.ref}<span class="fn__space fn__flex-1"></span>${response.data.refCount}</div>`,
             }).element);
-            window.siyuan.menus.menu.popup(position);
+            if (isMobile()) {
+                window.siyuan.menus.menu.fullscreen();
+            } else {
+                window.siyuan.menus.menu.popup(position);
+            }
         });
     }