:art: https://github.com/siyuan-note/siyuan/issues/7518

app/src/assets/scss/mobile.scss

@@ -222,7 +222,7 @@
   border-radius: 4px;
 }
 
-#keyboardToolbar {
+.keyboard {
   position: fixed;
   bottom: 0;
   width: 100%;
@@ -232,7 +232,23 @@
   z-index: 212;
   display: flex;
   border-top: 1px solid var(--b3-theme-surface-lighter);
-  overflow: auto;
+  overflow: hidden;
+
+  &__dynamic {
+    overflow: auto;
+    display: flex;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__split {
+    width: 1px;
+    height: 70%;
+    background: var(--b3-border-color);
+    align-self: center;
+  }
 
   button {
     background: transparent;
@@ -242,8 +258,7 @@
     svg {
       height: 16px;
       width: 16px;
-      padding: 5px;
-      margin: 3px;
+      padding: 12px;
       color: var(--b3-theme-on-surface);
     }
   }

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

@@ -55,24 +55,7 @@
 <div id="commonMenu" class="b3-menu fn__none"></div>
 <div id="message" class="b3-snackbars"></div>
 <div id="status" class="status status--hide"></div>
-<div id="keyboardToolbar" class="fn__none">
-    <span class="fn__flex-1"></span>
-    <button data-type="indent"><svg><use xlink:href="#iconIndent"></use></svg></button>
-    <button data-type="outdent"><svg><use xlink:href="#iconOutdent"></use></svg></button>
-
-    <button data-type="up"><svg><use xlink:href="#iconUp"></use></svg></button>
-    <button data-type="down"><svg><use xlink:href="#iconDown"></use></svg></button>
-
-    <button data-type="before"><svg><use xlink:href="#iconBefore"></use></svg></button>
-    <button data-type="after"><svg><use xlink:href="#iconAfter"></use></svg></button>
-
-    <button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
-
-    <button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
-    <button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
-    <span class="fn__flex-1"></span>
-    <button data-type="done"><svg><use xlink:href="#iconRedo"></use></svg></button>
-</div>
+<div id="keyboardToolbar" class="keyboard"></div>
 <div id="transactionTip" class="fn__none"></div>
 </body>
 </html>

app/src/dialog/processSystem.ts

@@ -193,24 +193,18 @@ export const transactionError = (data: { code: number, data: string }) => {
     });
 };
 
-let progressStatusTimeoutId: number;
 export const progressStatus = (data: IWebSocketData) => {
     const statusElement = document.querySelector("#status") as HTMLElement;
     if (!statusElement) {
         return;
     }
     if (isMobile()) {
-        clearTimeout(progressStatusTimeoutId);
+        if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
+            return;
+        }
         statusElement.innerHTML = data.msg;
         statusElement.classList.remove("status--hide");
-        if (document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
-            statusElement.style.bottom = "0";
-        } else {
-            statusElement.style.bottom = "30px";
-        }
-        progressStatusTimeoutId = window.setTimeout(() => {
-            statusElement.style.bottom = "";
-        }, 6000);
+        statusElement.style.bottom = "0";
         return;
     }
     const msgElement = statusElement.querySelector(".status__msg");

app/src/mobile/util/showKeyboardToolbar.ts

@@ -6,13 +6,12 @@ import {Constants} from "../../constants";
 import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
 
 export const showKeyboardToolbar = (bottom = 0) => {
-    if (getSelection().rangeCount > 0) {
-        const range = getSelection().getRangeAt(0);
-        if (!window.siyuan.mobile.editor ||
-            !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) {
-            return;
-        }
-    } else {
+    if (getSelection().rangeCount === 0) {
+        return;
+    }
+    const range = getSelection().getRangeAt(0);
+    if (!window.siyuan.mobile.editor ||
+        !window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) {
         return;
     }
     const toolbarElement = document.getElementById("keyboardToolbar");
@@ -36,6 +35,28 @@ export const showKeyboardToolbar = (bottom = 0) => {
     }, Constants.TIMEOUT_TRANSITION);
 };
 
+export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => {
+    const toolbarElement = document.getElementById("keyboardToolbar");
+    toolbarElement.innerHTML = `<div class="keyboard__dynamic">
+    <button data-type="indent"><svg><use xlink:href="#iconIndent"></use></svg></button>
+    <button data-type="outdent"><svg><use xlink:href="#iconOutdent"></use></svg></button>
+    
+    <button data-type="up"><svg><use xlink:href="#iconUp"></use></svg></button>
+    <button data-type="down"><svg><use xlink:href="#iconDown"></use></svg></button>
+    
+    <button data-type="before"><svg><use xlink:href="#iconBefore"></use></svg></button>
+    <button data-type="after"><svg><use xlink:href="#iconAfter"></use></svg></button>
+    
+    <button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
+    
+    <button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
+    <button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
+</div>
+<span class="fn__flex-1"></span>
+<span class="keyboard__split"></span>
+<button data-type="done"><svg style="width: 36px"><use xlink:href="#iconRedo"></use></svg></button>`
+}
+
 export const hideKeyboardToolbar = () => {
     const toolbarElement = document.getElementById("keyboardToolbar");
     toolbarElement.classList.add("fn__none");

app/src/protyle/wysiwyg/index.ts

@@ -51,6 +51,8 @@ import {getAllModels} from "../../layout/getAll";
 import {pushBack} from "../../util/backForward";
 import {openAsset, openBy, openFileById} from "../../editor/util";
 import {openGlobalSearch} from "../../search/util";
+/// #else
+import {renderKeyboardToolbar} from "../../mobile/util/showKeyboardToolbar";
 /// #endif
 import {BlockPanel} from "../../block/Panel";
 import {isCtrl, openByMobile} from "../util/compatibility";
@@ -1895,11 +1897,16 @@ export class WYSIWYG {
             setTimeout(() => {
                 // 选中后，在选中的文字上点击需等待 range 更新
                 const newRange = getEditorRange(this.element);
+                /// #if !MOBILE
                 if (newRange.toString().replace(Constants.ZWSP, "") !== "") {
                     protyle.toolbar.render(protyle, newRange);
+
                 } else {
                     hideElements(["toolbar"], protyle);
                 }
+                /// #else
+                renderKeyboardToolbar(protyle, newRange);
+                /// #endif
                 if (!protyle.wysiwyg.element.querySelector(".protyle-wysiwyg--select")) {
                     countSelectWord(newRange, protyle.block.rootID);
                 }