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

2026-01-17 22:25:29 +01:00 · 2025-12-17 11:48:02 +08:00 · 2025-12-17 11:48:02 +08:00 · ea4799ba4e
commit ea4799ba4e
parent 9f55cd125d
8 changed files with 138 additions and 106 deletions
--- a/app/src/assets/scss/main/_main.scss
+++ b/app/src/assets/scss/main/_main.scss
@ -222,26 +222,6 @@ html {
    display: flex;
    color: var(--b3-theme-on-surface);
    font-size: 12px;
-
-    & > div {
-      height: 4px;
-      border-radius: var(--b3-border-radius);
-      overflow: hidden;
-      background-color: #fff;
-      width: 64px;
-      align-self: center;
-      margin: 0 8px 0 4px;
-      cursor: pointer;
-      flex-shrink: 0;
-
-      & > div {
-        background-color: var(--b3-theme-primary-light);
-        height: 4px;
-        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
-        animation: stripMove 450ms linear infinite;
-        background-size: 50px 50px;
-      }
-    }
  }

  .fn__space:last-child {
--- a/app/src/assets/scss/util/_function.scss
+++ b/app/src/assets/scss/util/_function.scss
@ -163,6 +163,26 @@
  &__list {
    padding-left: 2em;
  }
+
+  &__progress  {
+    height: 4px;
+    border-radius: var(--b3-border-radius);
+    overflow: hidden;
+    background-color: #fff;
+    width: 64px;
+    align-self: center;
+    margin: 0 8px 0 4px;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    & > div {
+      background-color: var(--b3-theme-primary-light);
+      height: 4px;
+      background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
+      animation: stripMove 450ms linear infinite;
+      background-size: 50px 50px;
+    }
+  }
 }

 .ft {
--- a/app/src/config/appearance.ts
+++ b/app/src/config/appearance.ts
@ -11,7 +11,7 @@ import {loadAssets} from "../util/assets";
 import {resetFloatDockSize} from "../layout/dock/util";
 import {confirmDialog} from "../dialog/confirmDialog";
 import {useShell} from "../util/pathName";
-import {Dialog} from "../dialog";
+import {setStatusBar} from "./util/setStatusBar";

 export const appearance = {
    element: undefined as Element,
@ -181,7 +181,7 @@ export const appearance = {
    <input class="b3-switch fn__flex-center" id="closeButtonBehavior" type="checkbox"${window.siyuan.config.appearance.closeButtonBehavior === 0 ? "" : " checked"}>
 </label>`;
    },
-    _send: (statusBar?: Config.IAppearanceStatusBar) => {
+    _send: () => {
        const themeLight = (appearance.element.querySelector("#themeLight") as HTMLSelectElement).value;
        const themeDark = (appearance.element.querySelector("#themeDark") as HTMLSelectElement).value;
        const modeElementValue = parseInt((appearance.element.querySelector("#mode") as HTMLSelectElement).value);
@ -201,69 +201,17 @@ export const appearance = {
            closeButtonBehavior: (appearance.element.querySelector("#closeButtonBehavior") as HTMLInputElement).checked ? 1 : 0,
            hideStatusBar: (appearance.element.querySelector("#hideStatusBar") as HTMLInputElement).checked,
            statusBar: {
-                msgTaskDatabaseIndexCommitDisabled: statusBar ? statusBar.msgTaskDatabaseIndexCommitDisabled : window.siyuan.config.appearance.statusBar.msgTaskDatabaseIndexCommitDisabled,
-                msgTaskHistoryDatabaseIndexCommitDisabled: statusBar ? statusBar.msgTaskHistoryDatabaseIndexCommitDisabled : window.siyuan.config.appearance.statusBar.msgTaskHistoryDatabaseIndexCommitDisabled,
-                msgTaskAssetDatabaseIndexCommitDisabled: statusBar ? statusBar.msgTaskAssetDatabaseIndexCommitDisabled : window.siyuan.config.appearance.statusBar.msgTaskAssetDatabaseIndexCommitDisabled,
-                msgTaskHistoryGenerateFileDisabled: statusBar ? statusBar.msgTaskHistoryGenerateFileDisabled : window.siyuan.config.appearance.statusBar.msgTaskHistoryGenerateFileDisabled,
+                msgTaskDatabaseIndexCommitDisabled: window.siyuan.config.appearance.statusBar.msgTaskDatabaseIndexCommitDisabled,
+                msgTaskHistoryDatabaseIndexCommitDisabled: window.siyuan.config.appearance.statusBar.msgTaskHistoryDatabaseIndexCommitDisabled,
+                msgTaskAssetDatabaseIndexCommitDisabled: window.siyuan.config.appearance.statusBar.msgTaskAssetDatabaseIndexCommitDisabled,
+                msgTaskHistoryGenerateFileDisabled: window.siyuan.config.appearance.statusBar.msgTaskHistoryGenerateFileDisabled,
            }
        }, () => {
            resetFloatDockSize();
        });
    },
    bindEvent: () => {
-        appearance.element.querySelector("#statusBarSetting").addEventListener("click", () => {
-            const dialog = new Dialog({
-                width: "360px",
-                height: "80vh",
-                title: "\uD83D\uDD07 " + window.siyuan.languages.appearance18,
-                content: `<div class="fn__hr"></div>
-<div class="b3-label">
-    ${window.siyuan.languages.statusBarMsgPushTip}
-    <div class="fn__hr"></div>
-    <div class="b3-tab-bar b3-list b3-list--background">
-        <label class="b3-list-item">
-            <div class="fn__flex-1 ft__on-surface">
-               ${window.siyuan.languages["_taskAction"]["task.database.index.commit"]}
-            </div>
-            <span class="fn__space"></span>
-            <input class="b3-switch fn__flex-center" id="msgTaskDatabaseIndexCommitDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskDatabaseIndexCommitDisabled ? "" : " checked"}>
-        </label>    
-        <label class="b3-list-item">
-            <div class="fn__flex-1 ft__on-surface">
-               ${window.siyuan.languages["_taskAction"]["task.asset.database.index.commit"]}
-            </div>
-            <span class="fn__space"></span>
-            <input class="b3-switch fn__flex-center" id="msgTaskAssetDatabaseIndexCommitDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskAssetDatabaseIndexCommitDisabled ? "" : " checked"}>
-        </label>
-        <label class="b3-list-item">
-            <div class="fn__flex-1 ft__on-surface">
-               ${window.siyuan.languages["_taskAction"]["task.history.database.index.commit"]}
-            </div>
-            <span class="fn__space"></span>
-            <input class="b3-switch fn__flex-center" id="msgTaskHistoryDatabaseIndexCommitDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskHistoryDatabaseIndexCommitDisabled ? "" : " checked"}>
-        </label>
-        <label class="b3-list-item">
-            <div class="fn__flex-1 ft__on-surface">
-               ${window.siyuan.languages["_taskAction"]["task.history.generateFile"]}
-            </div>
-            <span class="fn__space"></span>
-            <input class="b3-switch fn__flex-center" id="msgTaskHistoryGenerateFileDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskHistoryGenerateFileDisabled ? "" : " checked"}>
-        </label>
-    </div>
-</div>`
-            });
-
-            dialog.element.querySelectorAll(".b3-switch").forEach((item) => {
-                item.addEventListener("change", () => {
-                    appearance._send({
-                        msgTaskDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskDatabaseIndexCommitDisabled") as HTMLInputElement).checked,
-                        msgTaskAssetDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskAssetDatabaseIndexCommitDisabled") as HTMLInputElement).checked,
-                        msgTaskHistoryDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskHistoryDatabaseIndexCommitDisabled") as HTMLInputElement).checked,
-                        msgTaskHistoryGenerateFileDisabled: !(dialog.element.querySelector("#msgTaskHistoryGenerateFileDisabled") as HTMLInputElement).checked,
-                    });
-                });
-            });
-        });
+        setStatusBar(appearance.element.querySelector("#statusBarSetting"));
        appearance.element.querySelector("#codeSnippet").addEventListener("click", () => {
            openSnippets();
        });
--- a/app/src/config/util/setStatusBar.ts
+++ b/app/src/config/util/setStatusBar.ts
@ -0,0 +1,61 @@
+import {Dialog} from "../../dialog";
+import {isMobile, objEquals} from "../../util/functions";
+import {fetchPost} from "../../util/fetch";
+
+export const setStatusBar = (element: HTMLElement) => {
+    element.addEventListener("click", () => {
+        const dialog = new Dialog({
+            height: "80vh",
+            width: isMobile() ? "92vw" : "360px",
+            title: "\uD83D\uDD07 " + window.siyuan.languages.appearance18,
+            content: `<div class="fn__hr"></div>
+<div class="b3-label">
+    ${window.siyuan.languages.statusBarMsgPushTip}
+    <div class="fn__hr"></div>
+    <div class="b3-tab-bar b3-list b3-list--background">
+        <label class="b3-list-item">
+            <div class="fn__flex-1 ft__on-surface">
+               ${window.siyuan.languages["_taskAction"]["task.database.index.commit"]}
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-switch fn__flex-center" id="msgTaskDatabaseIndexCommitDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskDatabaseIndexCommitDisabled ? "" : " checked"}>
+        </label>    
+        <label class="b3-list-item">
+            <div class="fn__flex-1 ft__on-surface">
+               ${window.siyuan.languages["_taskAction"]["task.asset.database.index.commit"]}
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-switch fn__flex-center" id="msgTaskAssetDatabaseIndexCommitDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskAssetDatabaseIndexCommitDisabled ? "" : " checked"}>
+        </label>
+        <label class="b3-list-item">
+            <div class="fn__flex-1 ft__on-surface">
+               ${window.siyuan.languages["_taskAction"]["task.history.database.index.commit"]}
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-switch fn__flex-center" id="msgTaskHistoryDatabaseIndexCommitDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskHistoryDatabaseIndexCommitDisabled ? "" : " checked"}>
+        </label>
+        <label class="b3-list-item">
+            <div class="fn__flex-1 ft__on-surface">
+               ${window.siyuan.languages["_taskAction"]["task.history.generateFile"]}
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-switch fn__flex-center" id="msgTaskHistoryGenerateFileDisabled" type="checkbox"${window.siyuan.config.appearance.statusBar.msgTaskHistoryGenerateFileDisabled ? "" : " checked"}>
+        </label>
+    </div>
+</div>`, destroyCallback() {
+                const statusBar = {
+                    msgTaskDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskDatabaseIndexCommitDisabled") as HTMLInputElement).checked,
+                    msgTaskAssetDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskAssetDatabaseIndexCommitDisabled") as HTMLInputElement).checked,
+                    msgTaskHistoryDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskHistoryDatabaseIndexCommitDisabled") as HTMLInputElement).checked,
+                    msgTaskHistoryGenerateFileDisabled: !(dialog.element.querySelector("#msgTaskHistoryGenerateFileDisabled") as HTMLInputElement).checked,
+                };
+                if (objEquals(statusBar, window.siyuan.config.appearance.statusBar)) {
+                    return;
+                }
+                fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
+                    statusBar
+                }));
+            }
+        });
+    });
+};
--- a/app/src/dialog/processSystem.ts
+++ b/app/src/dialog/processSystem.ts
@ -417,30 +417,13 @@ export const refreshFileTree = (cb?: () => void) => {

 let statusTimeout: number;
 export const progressStatus = (data: IWebSocketData) => {
-    const statusElement = document.querySelector("#status") as HTMLElement;
-    if (!statusElement) {
-        return;
-    }
-
-    if (isMobile()) {
-        if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
-            return;
-        }
+    const msgElement = document.querySelector("#status .status__msg");
+    if (msgElement) {
        clearTimeout(statusTimeout);
-        statusElement.innerHTML = data.msg;
-        statusElement.style.bottom = "0";
+        msgElement.innerHTML = data.msg;
        statusTimeout = window.setTimeout(() => {
-            statusElement.style.bottom = "";
+            msgElement.innerHTML = "";
        }, 12000);
-    } else {
-        const msgElement = statusElement.querySelector(".status__msg");
-        if (msgElement) {
-            clearTimeout(statusTimeout);
-            msgElement.innerHTML = data.msg;
-            statusTimeout = window.setTimeout(() => {
-                msgElement.innerHTML = "";
-            }, 12000);
-        }
    }
 };

@ -489,7 +472,7 @@ export const progressBackgroundTask = (tasks: { action: string }[]) => {
    } else {
        backgroundTaskElement.classList.remove("fn__none");
        backgroundTaskElement.setAttribute("data-tasks", JSON.stringify(tasks));
-        backgroundTaskElement.innerHTML = tasks[0].action + "<div><div></div></div>";
+        backgroundTaskElement.innerHTML = tasks[0].action + '<div class="fn__progress"><div></div></div>';
    }
 };

--- a/app/src/mobile/settings/about.ts
+++ b/app/src/mobile/settings/about.ts
@ -75,7 +75,7 @@ export const initAbout = () => {
        </button>
        <div class="fn__hr"></div>
        <button class="b3-button b3-button--outline fn__block" id="initKeyByPW">
-            ${window.siyuan.languages.genKeyByPW}
+            <svg><use xlink:href="#iconKey"></use></svg>${window.siyuan.languages.genKeyByPW}
        </button>
    </div>
    <div class="${window.siyuan.config.repo.key ? "" : "fn__none"}">
--- a/app/src/mobile/settings/appearance.ts
+++ b/app/src/mobile/settings/appearance.ts
@ -1,11 +1,12 @@
 import {fetchPost} from "../../util/fetch";
 import {genLangOptions, genOptions} from "../../util/genOptions";
 import {openModel} from "../menu/model";
+import {setStatusBar} from "../../config/util/setStatusBar";

 export const initAppearance = () => {
    openModel({
        title: window.siyuan.languages.appearance,
-        icon:"iconTheme",
+        icon: "iconTheme",
        html: `<div class="b3-label">
    ${window.siyuan.languages.appearance4}
    <div class="fn__hr"></div>
@ -42,9 +43,25 @@ export const initAppearance = () => {
    <div class="fn__hr"></div>
    <select id="lang" class="b3-select fn__block">${genLangOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
    <div class="b3-label__text">${window.siyuan.languages.language1}</div>
+</div>
+<div class="b3-label">
+    <label class="fn__flex">
+        <div class="fn__flex-1">
+            ${window.siyuan.languages.appearance16}
+            <div class="b3-label__text">${window.siyuan.languages.appearance17}</div>
+        </div>
+        <span class="fn__space"></span>
+        <input class="b3-switch fn__flex-center" id="hideStatusBar" type="checkbox"${window.siyuan.config.appearance.hideStatusBar ? " checked" : ""}>
+    </label>
+    <div class="fn__hr"></div>
+    <button class="b3-button b3-button--outline fn__block" data-action="hideStatusBarSetting">
+       <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
+    </button>
+    <div class="b3-label__text">${window.siyuan.languages.appearance18}</div>
 </div>`,
        bindEvent(modelMainElement: HTMLElement) {
-            modelMainElement.querySelectorAll("select").forEach(item => {
+            setStatusBar(modelMainElement.querySelector('[data-action="hideStatusBarSetting"]'));
+            modelMainElement.querySelectorAll("select, .b3-switch").forEach(item => {
                item.addEventListener("change", () => {
                    const modeElementValue = parseInt((modelMainElement.querySelector("#mode") as HTMLSelectElement).value);
                    fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
@ -54,6 +71,7 @@ export const initAppearance = () => {
                        themeDark: (modelMainElement.querySelector("#themeDark") as HTMLSelectElement).value,
                        themeLight: (modelMainElement.querySelector("#themeLight") as HTMLSelectElement).value,
                        lang: (modelMainElement.querySelector("#lang") as HTMLSelectElement).value,
+                        hideStatusBar: (modelMainElement.querySelector("#hideStatusBar") as HTMLInputElement).checked,
                    }));
                });
            });
--- a/app/src/mobile/util/onMessage.ts
+++ b/app/src/mobile/util/onMessage.ts
@ -2,7 +2,6 @@ import {openMobileFileById} from "../editor";
 import {
    processSync,
    progressLoading,
-    progressStatus,
    reloadSync, setDefRefCount, setRefDynamicText,
    transactionError
 } from "../../dialog/processSystem";
@ -13,9 +12,24 @@ import {setLocalShorthandCount} from "../../util/noRelyPCFunction";
 import {updateControlAlt} from "../../protyle/util/hotKey";
 import {renderSnippet} from "../../config/util/snippets";

+let statusTimeout: number;
+const statusElement = document.querySelector("#status") as HTMLElement;
+
 export const onMessage = (app: App, data: IWebSocketData) => {
    if (data) {
        switch (data.cmd) {
+            case "backgroundtask":
+                if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
+                    return;
+                }
+                if (data.data.tasks.length === 0) {
+                    statusElement.style.bottom = "";
+                } else {
+                    clearTimeout(statusTimeout);
+                    statusElement.innerHTML = `<div class="fn__flex">${data.data.tasks[0].action}<div class="fn__progress"><div></div></div>`;
+                    statusElement.style.bottom = "0";
+                }
+                break;
            case "setAppearance":
                window.location.reload();
                break;
@ -70,7 +84,15 @@ export const onMessage = (app: App, data: IWebSocketData) => {
                transactionError();
                break;
            case"statusbar":
-                progressStatus(data);
+                if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
+                    return;
+                }
+                clearTimeout(statusTimeout);
+                statusElement.innerHTML = data.msg;
+                statusElement.style.bottom = "0";
+                statusTimeout = window.setTimeout(() => {
+                    statusElement.style.bottom = "";
+                }, 12000);
                break;
        }
    }