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

app/src/config/about.ts

@@ -6,7 +6,7 @@ import {isBrowser} from "../util/functions";
 import {fetchPost} from "../util/fetch";
 import {setAccessAuthCode} from "./util/setAccessAuthCode";
 import {exportLayout} from "../layout/util";
-import {exitSiYuan} from "../dialog/processSystem";
+import {exitSiYuan, processSync} from "../dialog/processSystem";
 import {openByMobile, writeText} from "../protyle/util/compatibility";
 import {showMessage} from "../dialog/message";
 import {Dialog} from "../dialog";
@@ -297,6 +297,7 @@ export const about = {
                 fetchPost("/api/repo/resetRepo", {}, () => {
                     window.siyuan.config.repo.key = "";
                     window.siyuan.config.sync.enabled = false;
+                    processSync();
                     importKeyElement.parentElement.classList.remove("fn__none");
                     importKeyElement.parentElement.nextElementSibling.classList.add("fn__none");
                 });

app/src/config/account.ts

@@ -8,6 +8,7 @@ import {needSubscribe} from "../util/needSubscribe";
 import {syncGuide} from "../sync/syncGuide";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
 import {getEventName} from "../protyle/util/compatibility";
+import {processSync} from "../dialog/processSystem";
 
 export const account = {
     element: undefined as Element,
@@ -202,6 +203,7 @@ ${window.siyuan.languages.account8}`;
                     account.bindEvent(element);
                     showMessage(window.siyuan.languages.refreshUser, 3000);
                     account.onSetaccount();
+                    processSync()
                 });
             });
             element.querySelector("#logout").addEventListener("click", () => {
@@ -211,6 +213,7 @@ ${window.siyuan.languages.account8}`;
                         element.innerHTML = account.genHTML();
                         account.bindEvent(element);
                         account.onSetaccount();
+                        processSync()
                     });
                 });
             });
@@ -221,6 +224,7 @@ ${window.siyuan.languages.account8}`;
                         element.innerHTML = account.genHTML();
                         account.bindEvent(element);
                         account.onSetaccount();
+                        processSync()
                     });
                 });
             });
@@ -368,6 +372,7 @@ ${window.siyuan.languages.account8}`;
     },
     _afterLogin(userResponse: IWebSocketData, element: Element) {
         window.siyuan.user = userResponse.data;
+        processSync()
         if (element.classList.contains("account") && !needSubscribe("")) {
             const dialogElement = hasClosestByClassName(element, "b3-dialog--open");
             if (dialogElement) {
@@ -395,21 +400,21 @@ ${window.siyuan.languages.account8}`;
         let html = "";
         if (window.siyuan.config.account.displayVIP && window.siyuan.user) {
             if (window.siyuan.user.userSiYuanProExpireTime === -1) {
-                html = `<div class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.account12}">${Constants.SIYUAN_IMAGE_VIP}</div>`;
+                html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.account12}">${Constants.SIYUAN_IMAGE_VIP}</div>`;
             } else if (window.siyuan.user.userSiYuanProExpireTime > 0) {
                 if (window.siyuan.user.userSiYuanSubscriptionPlan === 2) {
-                    html = `<div class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.account3}"><svg><use xlink:href="#iconVIP"></use></svg></div>`;
+                    html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.account3}"><svg><use xlink:href="#iconVIP"></use></svg></div>`;
                 } else {
-                    html = `<div class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.account10}"><svg class="ft__secondary"><use xlink:href="#iconVIP"></use></svg></div>`;
+                    html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.account10}"><svg class="ft__secondary"><use xlink:href="#iconVIP"></use></svg></div>`;
                 }
             }
         }
         if (!window.siyuan.user || (window.siyuan.user && window.siyuan.user.userSiYuanSubscriptionStatus === -1)) {
-            html = `<div class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.freeSub}"><svg class="ft__error"><use xlink:href="#iconVIP"></use></svg></div>`;
+            html = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.freeSub}"><svg class="ft__error"><use xlink:href="#iconVIP"></use></svg></div>`;
         }
         if (window.siyuan.config.account.displayTitle && window.siyuan.user) {
             window.siyuan.user.userTitles.forEach(item => {
-                html += `<div class="toolbar__item fn__a b3-tooltips b3-tooltips__se" aria-label="${item.name}：${item.desc}">${item.icon}</div>`;
+                html += `<div class="toolbar__item fn__a b3-tooltips b3-tooltips__sw" aria-label="${item.name}：${item.desc}">${item.icon}</div>`;
             });
         }
         document.getElementById("toolbarVIP").innerHTML = html;

app/src/config/repos.ts

@@ -3,6 +3,7 @@ import {fetchPost} from "../util/fetch";
 import {showMessage} from "../dialog/message";
 import {bindSyncCloudListEvent, getSyncCloudList} from "../sync/syncGuide";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
+import {processSync} from "../dialog/processSystem";
 
 const renderProvider = (provider: number) => {
     if (provider === 0) {
@@ -328,12 +329,8 @@ export const repos = {
                 return;
             }
             fetchPost("/api/sync/setSyncEnable", {enabled: switchElement.checked}, (response) => {
-                if (response.code === 1) {
-                    showMessage(response.msg);
-                    switchElement.checked = false;
-                } else {
                 window.siyuan.config.sync.enabled = switchElement.checked;
-                }
+                processSync();
             });
         });
         const switchConflictElement = repos.element.querySelector("#generateConflictDoc") as HTMLInputElement;

app/src/dialog/processSystem.ts

@@ -12,6 +12,7 @@ import {confirmDialog} from "./confirmDialog";
 import {getCurrentWindow} from "@electron/remote";
 import {escapeHtml} from "../util/escape";
 import {getWorkspaceName} from "../util/noRelyPCFunction";
+import {needSubscribe} from "../util/needSubscribe";
 
 export const lockScreen = () => {
     /// #if BROWSER
@@ -315,9 +316,20 @@ export const downloadProgress = (data: { id: string, percent: number }) => {
     }
 };
 
-export const processSync = (data: IWebSocketData) => {
+export const processSync = (data?: IWebSocketData) => {
     const iconElement = document.querySelector("#barSync")
     const useElement = iconElement.querySelector("use")
+    if (!data) {
+        if (!window.siyuan.config.sync.enabled || (0 === window.siyuan.config.sync.provider && needSubscribe(""))) {
+            iconElement.classList.add("toolbar__item--active");
+            iconElement.setAttribute("aria-label", window.siyuan.languages["_kernel"]["53"]);
+            useElement.setAttribute("xlink:href", "#iconCloudOff")
+        } else {
+            iconElement.classList.remove("toolbar__item--active");
+            useElement.setAttribute("xlink:href", "#iconCloud")
+        }
+        return;
+    }
     if (data.code === 0) {  // syncing
         iconElement.classList.add("toolbar__item--active");
         useElement.setAttribute("xlink:href", "#iconCloudSync")

app/src/mobile/util/menu.ts

@@ -9,7 +9,7 @@ import {mountHelp, newDailyNote, newNotebook} from "../../util/mount";
 import {repos} from "../../config/repos";
 import * as md5 from "blueimp-md5";
 import {showMessage} from "../../dialog/message";
-import {exitSiYuan, lockScreen} from "../../dialog/processSystem";
+import {exitSiYuan, lockScreen, processSync} from "../../dialog/processSystem";
 import {confirmDialog} from "../../dialog/confirmDialog";
 import {openHistory} from "../../history/history";
 import {Dialog} from "../../dialog";
@@ -62,6 +62,7 @@ const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) =
             window.siyuan.user = null;
             closePanel();
             document.getElementById("menuAccount").innerHTML = `<svg class="b3-list-item__graphic"><use xlink:href="#iconAccount"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.login}</span>`;
+            processSync()
         });
     });
     modelMainElement.querySelector("#deactivateUser").addEventListener(getEventName(), () => {
@@ -70,6 +71,7 @@ const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) =
                 window.siyuan.user = null;
                 closePanel();
                 document.getElementById("menuAccount").innerHTML = `<svg class="b3-list-item__graphic"><use xlink:href="#iconAccount"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.login}</span>`;
+                processSync()
             });
         });
     });
@@ -92,6 +94,7 @@ const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) =
             } else {
                 menuAccountElement.innerHTML = `<svg class="b3-list-item__graphic"><use xlink:href="#iconAccount"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.login}</span>`;
             }
+            processSync()
         });
     });
 };
@@ -171,6 +174,7 @@ ${accountHTML}
     <svg class="b3-list-item__graphic"><use xlink:href="#iconQuit"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.safeQuit}</span>
 </div>`;
     // 只能用 click，否则无法上下滚动 https://github.com/siyuan-note/siyuan/issues/6628
+    processSync()
     menuElement.addEventListener("click", (event) => {
         let target = event.target as HTMLElement;
         while (target && !target.isEqualNode(menuElement)) {
@@ -416,6 +420,7 @@ ${accountHTML}
                                 fetchPost("/api/repo/resetRepo", {}, () => {
                                     window.siyuan.config.repo.key = "";
                                     window.siyuan.config.sync.enabled = false;
+                                    processSync();
                                     importKeyElement.parentElement.classList.remove("fn__none");
                                     importKeyElement.parentElement.nextElementSibling.classList.add("fn__none");
                                 });
@@ -664,6 +669,7 @@ ${accountHTML}
                             closePanel();
                             document.getElementById("menuAccount").innerHTML = `<img class="b3-list-item__graphic" src="${window.siyuan.user.userAvatarURL}"/>
 <span class="b3-list-item__text">${window.siyuan.user.userName}</span>`;
+                            processSync()
                         });
                     });
                 });
@@ -680,6 +686,7 @@ ${accountHTML}
                             closePanel();
                             document.getElementById("menuAccount").innerHTML = `<img class="b3-list-item__graphic" src="${window.siyuan.user.userAvatarURL}"/>
 <span class="b3-list-item__text">${window.siyuan.user.userName}</span>`;
+                            processSync()
                         });
                     });
                 });

app/src/sync/syncGuide.ts

@@ -5,6 +5,7 @@ import {Dialog} from "../dialog";
 import {confirmDialog} from "../dialog/confirmDialog";
 import {isMobile} from "../util/functions";
 import {account} from "../config/account";
+import {processSync} from "../dialog/processSystem";
 
 export const addCloudName = (cloudPanelElement: Element) => {
     const dialog = new Dialog({
@@ -176,14 +177,11 @@ const setSync = (key?: string, dialog?: Dialog) => {
         btnElement.addEventListener("click", () => {
             dialog.destroy();
             fetchPost("/api/sync/setSyncEnable", {enabled: true}, (response) => {
-                if (response.code === 1) {
-                    showMessage(response.msg);
-                } else {
                 window.siyuan.config.sync.enabled = true;
+                processSync();
                 confirmDialog(window.siyuan.languages.syncConfGuide4, window.siyuan.languages.syncConfGuide5, () => {
                     fetchPost("/api/sync/performSync", {});
                 });
-                }
             });
         });
     } else {

app/src/util/onGetConfig.ts

@@ -18,7 +18,7 @@ import {addGA, initAssets, setInlineStyle, setMode} from "./assets";
 import {renderSnippet} from "../config/util/snippets";
 import {openFileById} from "../editor/util";
 import {focusByRange} from "../protyle/util/selection";
-import {exitSiYuan} from "../dialog/processSystem";
+import {exitSiYuan, processSync} from "../dialog/processSystem";
 import {openSetting} from "../config";
 import {getSearch} from "./functions";
 import {initStatus} from "../layout/status";
@@ -187,7 +187,7 @@ const initBar = () => {
     <svg class="toolbar__svg"><use xlink:href="#iconDown"></use></svg>
 </div>
 <div id="barSync" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.config.sync.stat || (window.siyuan.languages.syncNow + " " + updateHotkeyTip(window.siyuan.config.keymap.general.syncNow.custom))}">
-    <svg><use xlink:href="#iconCloud${window.siyuan.config.sync.enabled ? "" : "Off"}"></use></svg>
+    <svg><use xlink:href="#iconCloud"></use></svg>
 </div>
 <button id="barBack" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
     <svg><use xlink:href="#iconBack"></use></svg>
@@ -207,6 +207,7 @@ const initBar = () => {
     <svg><use xlink:href="#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}"></use></svg>
 </div>
 <div class="fn__flex" id="windowControls"></div>`;
+    processSync();
     toolbar.addEventListener("click", (event: MouseEvent) => {
         let target = event.target as HTMLElement;
         while (!target.classList.contains("toolbar")) {