🎨 https://github.com/siyuan-note/siyuan/issues/8070

app/src/assets/scss/mobile.scss

@@ -145,6 +145,7 @@
     flex: 1;
     font-size: 17px;
     min-height: 30px;
+    line-height: 30px;
   }
 }
 

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

@@ -35,6 +35,7 @@
         <svg data-type="sidebar-bookmark-tab" class="toolbar__icon"><use xlink:href="#iconBookmark"></use></svg>
         <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>
         <span class="fn__flex-1"></span>
         <svg class="toolbar__icon"><use xlink:href="#iconRight"></use></svg>
     </div>
@@ -44,6 +45,7 @@
         <div class="fn__flex-column fn__none" data-type="sidebar-bookmark"></div>
         <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>
 </div>
 <div id="menu" class="b3-menu b3-menu--fullscreen"></div>

app/src/dialog/processSystem.ts

@@ -30,6 +30,9 @@ export const lockScreen = () => {
 };
 
 export const kernelError = () => {
+    if (document.querySelector("#errorLog")){
+        return;
+    }
     let iosReStart = "";
     if (window.siyuan.config.system.container === "ios" && window.webkit?.messageHandlers) {
         iosReStart = `<div class="fn__hr"></div><div class="fn__flex"><div class="fn__flex-1"></div><button class="b3-button">${window.siyuan.languages.retry}</button></div>`;

app/src/layout/Model.ts

@@ -63,8 +63,7 @@ export class Model {
             }
         };
         ws.onerror = (err: Event & { target: { url: string, readyState: number } }) => {
-            const logElement = document.getElementById("errorLog");
-            if (err.target.url.endsWith("&type=main") && err.target.readyState === 3 && !logElement) {
+            if (err.target.url.endsWith("&type=main") && err.target.readyState === 3) {
                 kernelError();
             }
         };

app/src/layout/dock/Inbox.ts

@@ -1,5 +1,7 @@
+/// #if !MOBILE
 import {Tab} from "../Tab";
 import {getDockByType, setPanelFocus} from "../util";
+/// #endif
 import {fetchPost} from "../../util/fetch";
 import {updateHotkeyTip} from "../../protyle/util/compatibility";
 import {Model} from "../Model";
@@ -11,6 +13,7 @@ import {replaceFileName} from "../../editor/rename";
 import {escapeHtml} from "../../util/escape";
 import {unicode2Emoji} from "../../emoji";
 import {Constants} from "../../constants";
+import {isMobile} from "../../util/functions";
 
 export class Inbox extends Model {
     private element: Element;
@@ -19,11 +22,41 @@ export class Inbox extends Model {
     private pageCount = 1;
     private data: { [key: string]: IInbox } = {};
 
-    constructor(tab: Tab) {
+    constructor(tab: Tab | Element) {
         super({id: tab.id});
-        this.element = tab.panelElement;
+        if (tab instanceof Element) {
+            this.element = tab;
+        } else {
+            this.element = tab.panelElement;
+        }
+        /// #if MOBILE
+        this.element.innerHTML = `<div class="toolbar toolbar--border toolbar--dark">
+    <div class="fn__space"></div>
+    <div class="toolbar__text">
+        ${window.siyuan.languages.inbox}
+        <span class="fn__space"></span>
+        <span class="inboxSelectCount ft__smaller ft__on-surface"></span>
+    </div>
+    <span class="fn__flex-1"></span>
+    <span class="fn__space"></span>
+    <div class="fn__flex">
+        <input class="fn__flex-center toolbar__icon" data-type="selectall" type="checkbox">  
+        <svg class="toolbar__icon" data-type="refresh"><use xlink:href='#iconRefresh'></use></svg>
+        <svg data-type="more" class="toolbar__icon fn__none"><use xlink:href='#iconMore'></use></svg>
+        <svg data-type="previous" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
+        <svg data-type="next" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconRight'></use></svg>
+    </div>
+    <div class="fn__flex fn__none">
+        <svg data-type="back" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
+        <svg data-type="refreshDetails" class="toolbar__icon"><use xlink:href='#iconRefresh'></use></svg>
+        <svg data-type="move" class="toolbar__icon"><use xlink:href='#iconMove'></use></svg>
+        <svg data-type="delete" class="toolbar__icon"><use xlink:href='#iconTrashcan'></use></svg>
+    </div>
+</div>
+<div class="inbox__details fn__none"></div>
+<div class="fn__flex-1 inbox__list"></div>`;
+        /// #else
         this.element.classList.add("fn__flex-column", "file-tree", "sy__inbox");
-
         this.element.innerHTML = `<div class="block__icons">
     <div class="block__logo">
         <svg><use xlink:href="#iconInbox"></use></svg>
@@ -56,11 +89,14 @@ export class Inbox extends Model {
 </div>
 <div class="inbox__details fn__none"></div>
 <div class="fn__flex-1 inbox__list"></div>`;
+        /// #endif
         const countElement = this.element.querySelector(".inboxSelectCount");
         const detailsElement = this.element.querySelector(".inbox__details");
         const selectAllElement = this.element.querySelector(".block__icons input") as HTMLInputElement;
         this.element.addEventListener("click", (event: MouseEvent) => {
+                /// #if !MOBILE
                 setPanelFocus(this.element);
+                /// #endif
                 let target = event.target as HTMLElement;
                 while (target && !target.isEqualNode(this.element)) {
                     const typeElement = hasClosestByAttribute(target, "data-type", null);
@@ -181,7 +217,9 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
             }
         );
         this.update();
+        /// #if !MOBILE
         setPanelFocus(this.element);
+        /// #endif
     }
 
     private updateAction() {
@@ -296,7 +334,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
 </ul>`;
             return;
         }
-        const refreshElement = this.element.querySelector('[data-type="refresh"] svg');
+        const refreshElement = this.element.querySelector(`[data-type="refresh"]${isMobile() ? "" : " svg"}`);
         if (refreshElement.classList.contains("fn__rotate")) {
             return;
         }
@@ -327,8 +365,8 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
             this.pageCount = response.data.data.pagination.paginationRecordCount;
             this.element.querySelector(".inboxSelectCount").innerHTML = `${this.selectIds.length}/${this.pageCount}`;
 
-            const previousElement = this.element.querySelector('span[data-type="previous"]');
-            const nextElement = this.element.querySelector('span[data-type="next"]');
+            const previousElement = this.element.querySelector('[data-type="previous"]');
+            const nextElement = this.element.querySelector('[data-type="next"]');
             if (response.data.data.pagination.paginationPageCount > this.currentPage) {
                 nextElement.removeAttribute("disabled");
             } else {
@@ -340,7 +378,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
                 previousElement.removeAttribute("disabled");
             }
             const selectCount = this.element.lastElementChild.querySelectorAll(".b3-list-item").length;
-            (this.element.querySelector(".block__icons input") as HTMLInputElement).checked = this.element.lastElementChild.querySelectorAll("input:checked").length === selectCount && selectCount !== 0;
+            this.element.firstElementChild.querySelector("input").checked = this.element.lastElementChild.querySelectorAll("input:checked").length === selectCount && selectCount !== 0;
         });
     }
 }

app/src/mobile/menu/search.ts

@@ -532,7 +532,7 @@ export const popSearch = (config = window.siyuan.storage[Constants.LOCAL_SEARCHD
     });
 
     openModel({
-        title: `<input id="toolbarSearch" placeholder="${window.siyuan.languages.showRecentUpdatedBlocks}" class="b3-text-field fn__block">`,
+        title: `<input id="toolbarSearch" placeholder="${window.siyuan.languages.showRecentUpdatedBlocks}" class="toolbar__title fn__block">`,
         icon: "iconSearch",
         html: `<div class="fn__flex-column" style="height: 100%">
     <div class="toolbar toolbar--border${config.hasReplace ? "" : " fn__none"}">

app/src/mobile/util/initFramework.ts

@@ -9,14 +9,15 @@ import {renderSnippet} from "../../config/util/snippets";
 import {setEmpty} from "./setEmpty";
 import {getIdZoomInByPath, getOpenNotebookCount} from "../../util/pathName";
 import {popMenu} from "../menu";
-import {MobileFiles} from "./MobileFiles";
-import {MobileOutline} from "./MobileOutline";
+import {MobileFiles} from "../dock/MobileFiles";
+import {MobileOutline} from "../dock/MobileOutline";
 import {hasTopClosestByTag} from "../../protyle/util/hasClosest";
-import {MobileBacklinks} from "./MobileBacklinks";
-import {MobileBookmarks} from "./MobileBookmarks";
-import {MobileTags} from "./MobileTags";
+import {MobileBacklinks} from "../dock/MobileBacklinks";
+import {MobileBookmarks} from "../dock/MobileBookmarks";
+import {MobileTags} from "../dock/MobileTags";
 import {activeBlur, hideKeyboardToolbar, initKeyboardToolbar} from "./keyboardToolbar";
 import {syncGuide} from "../../sync/syncGuide";
+import {Inbox} from "../../layout/dock/Inbox";
 
 export const initFramework = () => {
     setInlineStyle();
@@ -26,6 +27,7 @@ export const initFramework = () => {
     let outline: MobileOutline;
     let backlink: MobileBacklinks;
     let bookmark: MobileBookmarks;
+    let inbox: Inbox;
     let tag: MobileTags;
     // 不能使用 getEventName，否则点击返回会展开右侧栏
     const firstToolbarElement = sidebarElement.querySelector(".toolbar--border");
@@ -71,6 +73,8 @@ export const initFramework = () => {
                     } else {
                         tag.update();
                     }
+                } else if (type === "sidebar-inbox-tab" && !inbox) {
+                    inbox = new Inbox(document.querySelector('#sidebar [data-type="sidebar-inbox"]'));
                 }
                 svgElement.classList.add("toolbar__icon--active");
                 sidebarElement.lastElementChild.querySelector(`[data-type="${itemType.replace("-tab", "")}"]`).classList.remove("fn__none");