♻️ fix https://github.com/siyuan-note/siyuan/issues/5315

app/src/config/appearance.ts

@@ -8,20 +8,10 @@ import * as Pickr from "@simonwep/pickr";
 import {isBrowser} from "../util/functions";
 import {fetchPost} from "../util/fetch";
 import {loadAssets} from "../util/assets";
+import {genOptions} from "../util/genOptions";
 
 export const appearance = {
     element: undefined as Element,
-    _genOptions(data: string[] | { label: string, name: string }[], key: string) {
-        let html = "";
-        data.forEach((item: string | { label: string, name: string }) => {
-            if (typeof item === "string") {
-                html += `<option value="${item}" ${key === item ? "selected" : ""}>${item}</option>`;
-            } else {
-                html += `<option value="${item.name}" ${key === item.name ? "selected" : ""}>${item.label}</option>`;
-            }
-        });
-        return html;
-    },
     genHTML: () => {
         return `<label class="fn__flex b3-label">
     <div class="fn__flex-1">
@@ -48,7 +38,7 @@ export const appearance = {
         </div>
         <span class="fn__space"></span>
         <select class="b3-select fn__flex-center fn__size200" id="themeLight">
-          ${appearance._genOptions(window.siyuan.config.appearance.lightThemes, window.siyuan.config.appearance.themeLight)}
+          ${genOptions(window.siyuan.config.appearance.lightThemes, window.siyuan.config.appearance.themeLight)}
         </select>
     </div>
     <div class="fn__hr"></div>
@@ -58,7 +48,7 @@ export const appearance = {
         </div>
         <span class="fn__space"></span>
         <select class="b3-select fn__flex-center fn__size200" id="themeDark">
-           ${appearance._genOptions(window.siyuan.config.appearance.darkThemes, window.siyuan.config.appearance.themeDark)}
+           ${genOptions(window.siyuan.config.appearance.darkThemes, window.siyuan.config.appearance.themeDark)}
         </select>
     </div>
 </div>
@@ -73,7 +63,7 @@ export const appearance = {
     </div>
     <span class="fn__space"></span>
     <select class="b3-select fn__flex-center fn__size200" id="icon">
-        ${appearance._genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon)}
+        ${genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon)}
     </select>
 </label>
 <label class="b3-label fn__flex"><div class="fn__block">
@@ -85,7 +75,7 @@ export const appearance = {
         <div class="fn__flex-center fn__flex-1 ft__on-surface">${window.siyuan.languages.appearance2}</div>
         <span class="fn__space"></span>
         <select id="codeBlockThemeLight" class="b3-select fn__size200">
-            ${appearance._genOptions(Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE, window.siyuan.config.appearance.codeBlockThemeLight)}
+            ${genOptions(Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE, window.siyuan.config.appearance.codeBlockThemeLight)}
         </select>
     </div>
     <div class="fn__hr"></div>
@@ -93,7 +83,7 @@ export const appearance = {
         <div class="fn__flex-center fn__flex-1 ft__on-surface">${window.siyuan.languages.appearance3}</div>
         <span class="fn__space"></span>
         <select id="codeBlockThemeDark" class="b3-select fn__size200">
-            ${appearance._genOptions(Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE, window.siyuan.config.appearance.codeBlockThemeDark)}
+            ${genOptions(Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE, window.siyuan.config.appearance.codeBlockThemeDark)}
         </select>
     </div>
 </div></label>
@@ -103,7 +93,7 @@ export const appearance = {
         <div class="b3-label__text">${window.siyuan.languages.language1}</div>
     </div>
     <span class="fn__space"></span>
-    <select id="lang" class="b3-select fn__flex-center fn__size200">${appearance._genOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
+    <select id="lang" class="b3-select fn__flex-center fn__size200">${genOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
 </label>
 <div class="b3-label${isBrowser() ? " fn__none" : ""}">
     <div class="fn__block fn__flex">

app/src/config/repos.ts

@@ -2,10 +2,12 @@ import {confirmDialog} from "../dialog/confirmDialog";
 import {needSubscribe} from "../util/needSubscribe";
 import {fetchPost} from "../util/fetch";
 import {isMobile} from "../util/functions";
+/// #if !MOBILE
+import {exportLayout} from "../layout/util";
+/// #endif
 import {Dialog} from "../dialog";
 import {showMessage} from "../dialog/message";
 import {exitSiYuan} from "../dialog/processSystem";
-import {exportLayout} from "../layout/util";
 
 const getCloudList = (reload = false) => {
     const listElement = repos.element.querySelector("#reposCloudSyncList");
@@ -435,9 +437,13 @@ ${passwordHTML}
                                     fetchPost("/api/backup/downloadCloudBackup", {}, () => {
                                         fetchPost("/api/backup/recoverLocalBackup", {}, () => {
                                             setTimeout(() => {
+                                                /// #if !MOBILE
                                                 exportLayout(false, () => {
                                                     exitSiYuan();
                                                 });
+                                                /// #else
+                                                window.location.reload();
+                                                /// #endif
                                             }, 7000);
                                             return;
                                         });

app/src/menus/index.ts

@@ -1,21 +1,21 @@
-import {initNavigationMenu, initFileMenu} from "./navigation";
-import {hasTopClosestByTag} from "../protyle/util/hasClosest";
-import {initTabMenu} from "./tab";
+/// #if !MOBILE
 import {getInstanceById} from "../layout/util";
 import {Tab} from "../layout/Tab";
 import {initSearchMenu} from "./search";
 import {initDockMenu} from "./dock";
+import {initNavigationMenu, initFileMenu} from "./navigation";
+import {initTabMenu} from "./tab";
+/// #endif
 import {Menu} from "./Menu";
-import {isMobile} from "../util/functions";
+import {hasTopClosestByTag} from "../protyle/util/hasClosest";
+
 
 export class Menus {
     public menu: Menu;
 
     constructor() {
         this.menu = new Menu();
-        if (isMobile()) {
-            return;
-        }
+        /// #if !MOBILE
         window.addEventListener("contextmenu", (event) => {
             let target = event.target as HTMLElement;
             while (target && !target.parentElement.isEqualNode(document.querySelector("body"))) {
@@ -68,6 +68,7 @@ export class Menus {
                 target = target.parentElement;
             }
         }, false);
+        /// #endif
     }
 
     private getDir(target: HTMLElement) {

app/src/mobile/settings/appearance.ts

@@ -1,7 +1,7 @@
 import {closePanel} from "../util/closePanel";
 import {fetchPost} from "../../util/fetch";
 import {setInlineStyle} from "../../util/assets";
-import {appearance} from "../../config/appearance";
+import {genOptions} from "../../util/genOptions";
 
 export const initAppearance = (modelElement: HTMLElement, modelMainElement: HTMLElement) => {
     closePanel();
@@ -21,12 +21,12 @@ export const initAppearance = (modelElement: HTMLElement, modelMainElement: HTML
     ${window.siyuan.languages.theme}
     <div class="fn__hr"></div>
     <select class="b3-select fn__block" id="themeLight">
-      ${appearance._genOptions(window.siyuan.config.appearance.lightThemes, window.siyuan.config.appearance.themeLight)}
+      ${genOptions(window.siyuan.config.appearance.lightThemes, window.siyuan.config.appearance.themeLight)}
     </select>
     <div class="b3-label__text b3-typography">${window.siyuan.languages.theme11}</div>
     <div class="fn__hr"></div>
     <select class="b3-select fn__block" id="themeDark">
-       ${appearance._genOptions(window.siyuan.config.appearance.darkThemes, window.siyuan.config.appearance.themeDark)}
+       ${genOptions(window.siyuan.config.appearance.darkThemes, window.siyuan.config.appearance.themeDark)}
     </select>
     <div class="b3-label__text b3-typography">${window.siyuan.languages.theme12}</div>
 </div>
@@ -34,14 +34,14 @@ export const initAppearance = (modelElement: HTMLElement, modelMainElement: HTML
     ${window.siyuan.languages.icon}
     <div class="fn__hr"></div>
     <select class="b3-select fn__block" id="icon">
-        ${appearance._genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon)}
+        ${genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon)}
     </select>
     <div class="b3-label__text b3-typography">${window.siyuan.languages.theme2}</div>
 </div>
 <div class="b3-label">
     ${window.siyuan.languages.language}
     <div class="fn__hr"></div>
-    <select id="lang" class="b3-select fn__block">${appearance._genOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
+    <select id="lang" class="b3-select fn__block">${genOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
     <div class="b3-label__text b3-typography">${window.siyuan.languages.language1}</div>
 </div>
 <div class="b3-label">

app/src/protyle/index.ts

@@ -18,12 +18,12 @@ import {onTransaction} from "./wysiwyg/transaction";
 import {fetchPost} from "../util/fetch";
 /// #if !MOBILE
 import {Title} from "./header/Title";
+import {updatePanelByEditor} from "../editor/util";
+import {setPanelFocus} from "../layout/util";
 /// #endif
 import {Background} from "./header/Background";
 import {getDisplayName} from "../util/pathName";
 import {onGet} from "./util/onGet";
-import {updatePanelByEditor} from "../editor/util";
-import {setPanelFocus} from "../layout/util";
 
 class Protyle {
 
@@ -95,10 +95,12 @@ class Protyle {
                                 size: Constants.SIZE_GET,
                             }, getResponse => {
                                 onGet(getResponse, this.protyle);
+                                /// #if !MOBILE
                                 if (data.cmd === "heading2doc") {
                                     // 文档标题互转后，需更新大纲
                                     updatePanelByEditor(this.protyle, false, false, true);
                                 }
+                                /// #endif
                                 // 文档标题互转后，编辑区会跳转到开头 https://github.com/siyuan-note/siyuan/issues/2939
                                 setTimeout(() => {
                                     this.protyle.contentElement.scrollTop = scrollTop;
@@ -160,14 +162,17 @@ class Protyle {
         }, getResponse => {
             onGet(getResponse, this.protyle, options.action);
             if (this.protyle.model) {
+                /// #if !MOBILE
                 if (options.action?.includes(Constants.CB_GET_FOCUS)) {
                     setPanelFocus(this.protyle.model.element.parentElement.parentElement);
                 }
                 updatePanelByEditor(this.protyle, false);
+                /// #endif
             }
 
             // 需等待 getDoc 完成后再执行，否则在无页签的时候 updatePanelByEditor 会执行2次
             // 只能用 focusin，否则点击表格无法执行
+            /// #if !MOBILE
             this.protyle.wysiwyg.element.addEventListener("focusin", () => {
                 if (this.protyle && this.protyle.model) {
                     let needUpdate = true;
@@ -189,6 +194,7 @@ class Protyle {
                     });
                 }
             });
+            /// #endif
             // 需等渲染完后再回调，用于定位搜索字段 https://github.com/siyuan-note/siyuan/issues/3171
             if (mergedOptions.after) {
                 mergedOptions.after(this);

app/src/util/assets.ts

@@ -2,8 +2,10 @@ import {Constants} from "../constants";
 import {addScript} from "../protyle/util/addScript";
 import {addStyle} from "../protyle/util/addStyle";
 import {setCodeTheme} from "../protyle/ui/setCodeTheme";
-import {isMobile} from "./functions";
+/// #if !MOBILE
 import {getAllModels} from "../layout/getAll";
+/// #endif
+import {isMobile} from "./functions";
 
 export const loadAssets = (data: IAppearance) => {
     const defaultStyleElement = document.getElementById("themeDefaultStyle");
@@ -33,11 +35,11 @@ export const loadAssets = (data: IAppearance) => {
     } else if (styleElement) {
         styleElement.remove();
     }
-    if (!isMobile()) {
+    /// #if !MOBILE
     getAllModels().graph.forEach(item => {
         item.searchGraph(false);
     });
-    }
+    /// #endif
     setCodeTheme();
 
     const themeScriptElement = document.getElementById("themeScript");

app/src/util/genOptions.ts

@@ -0,0 +1,11 @@
+export const genOptions = (data: string[] | { label: string, name: string }[], key: string) => {
+    let html = "";
+    data.forEach((item: string | { label: string, name: string }) => {
+        if (typeof item === "string") {
+            html += `<option value="${item}" ${key === item ? "selected" : ""}>${item}</option>`;
+        } else {
+            html += `<option value="${item.name}" ${key === item.name ? "selected" : ""}>${item.label}</option>`;
+        }
+    });
+    return html;
+}