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

app/src/config/about.ts

@@ -99,7 +99,7 @@ export const about = {
         </button>
         <div class="fn__hr"></div>
         <button class="b3-button b3-button--outline fn__size200" id="initKeyByPW">
-            ${window.siyuan.languages.genKeyByPW}
+            <svg><use xlink:href="#iconHand"></use></svg>${window.siyuan.languages.genKeyByPW}
         </button>
     </div>
     <div class="fn__size200 fn__flex-center${window.siyuan.config.repo.key ? "" : " fn__none"}">

app/src/config/repos.ts

@@ -1,42 +1,8 @@
-import {confirmDialog} from "../dialog/confirmDialog";
 import {needSubscribe} from "../util/needSubscribe";
 import {fetchPost} from "../util/fetch";
 import {isMobile} from "../util/functions";
-import {Dialog} from "../dialog";
 import {showMessage} from "../dialog/message";
-
-const getCloudList = (reload = false) => {
-    const listElement = repos.element.querySelector("#reposCloudSyncList");
-    if (!reload && listElement.firstElementChild.tagName !== "IMG") {
-        return;
-    }
-    fetchPost("/api/sync/listCloudSyncDir", {}, (response) => {
-        let syncListHTML = `<div class="fn__hr"></div><ul><li style="padding: 0 16px" class="b3-list--empty">${window.siyuan.languages.emptyCloudSyncList}</li></ul>`;
-        if (response.code !== 1) {
-            syncListHTML = '<div class="fn__hr"></div><ul class="b3-list b3-list--background fn__flex-1" style="overflow: auto;">';
-            response.data.syncDirs.forEach((item: { hSize: string, cloudName: string, updated: string }) => {
-                syncListHTML += `<li data-type="selectCloud" data-name="${item.cloudName}" class="b3-list-item b3-list-item--hide-action">
-<input type="radio" name="cloudName"${item.cloudName === response.data.checkedSyncDir ? " checked" : ""}/>
-<span class="fn__space"></span>
-<span>${item.cloudName}</span>
-<span class="fn__space"></span>
-<span class="ft__on-surface">${item.hSize}</span>
-<span class="b3-list-item__meta">${item.updated}</span>
-<span class="fn__flex-1 fn__space"></span>
-<span data-type="removeCloud" class="b3-tooltips b3-tooltips__w b3-list-item__action" aria-label="${window.siyuan.languages.delete}">
-    <svg><use xlink:href="#iconTrashcan"></use></svg>
-</span></li>`;
-            });
-            syncListHTML += `</ul>
-<div class="fn__hr"></div>
-<div class="fn__flex">
-    <div class="fn__flex-1"></div>
-    <button class="b3-button" data-type="addCloud"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
-</div>`;
-        }
-        listElement.innerHTML = syncListHTML;
-    });
-};
+import {bindSyncCloudListEvent, getSyncCloudList} from "../sync/syncGuide";
 
 const renderCloudBackup = () => {
     fetchPost("/api/cloud/getCloudSpace", {}, (response) => {
@@ -70,37 +36,6 @@ const renderCloudBackup = () => {
     });
 };
 
-const addCloudName = () => {
-    const dialog = new Dialog({
-        title: window.siyuan.languages.cloudSyncDir,
-        content: `<div class="b3-dialog__content">
-    <input class="b3-text-field fn__block" value="main">
-    <div class="b3-label__text">${window.siyuan.languages.reposTip}</div>
-</div>
-<div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
-        width: isMobile() ? "80vw" : "520px",
-    });
-    const inputElement = dialog.element.querySelector("input") as HTMLInputElement;
-    const btnsElement = dialog.element.querySelectorAll(".b3-button");
-    dialog.bindInput(inputElement, () => {
-        (btnsElement[1] as HTMLButtonElement).click();
-    });
-    inputElement.focus();
-    inputElement.select();
-    btnsElement[0].addEventListener("click", () => {
-        dialog.destroy();
-    });
-    btnsElement[1].addEventListener("click", () => {
-        fetchPost("/api/sync/createCloudSyncDir", {name: inputElement.value}, () => {
-            dialog.destroy();
-            getCloudList(true);
-        });
-    });
-};
-
 export const repos = {
     element: undefined as Element,
     genHTML: () => {
@@ -170,7 +105,7 @@ export const repos = {
             <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
         </button>
     </div>
-    <div id="reposCloudSyncList" class="fn__none config-repos__sync"><img style="margin: 0 auto;display: block;" src="/stage/loading-pure.svg"></div>
+    <div id="reposCloudSyncList" class="fn__none config-repos__sync"><img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg"></div>
 </div>
 <div class="b3-label fn__flex">
     <div class="fn__flex-center">${window.siyuan.languages.cloudBackup}</div>
@@ -213,45 +148,15 @@ export const repos = {
         const loadingElement = repos.element.querySelector("#reposLoading") as HTMLElement;
         loadingElement.style.width = repos.element.clientWidth + "px";
         loadingElement.style.height = repos.element.clientHeight + "px";
-        repos.element.firstElementChild.addEventListener("click", (event) => {
-            let target = event.target as HTMLElement;
         const syncConfigElement = repos.element.querySelector("#reposCloudSyncList");
-            while (target && !target.isEqualNode(repos.element.firstElementChild)) {
-                const type = target.getAttribute("data-type");
-                if (type) {
-                    switch (type) {
-                        case "config":
+        bindSyncCloudListEvent(syncConfigElement);
+        repos.element.querySelector('[data-type="config"]').addEventListener("click", (event) => {
             if (syncConfigElement.classList.contains("fn__none")) {
-                                getCloudList();
+                getSyncCloudList(syncConfigElement);
                 syncConfigElement.classList.remove("fn__none");
             } else {
                 syncConfigElement.classList.add("fn__none");
             }
-                            break;
-                        case "addCloud":
-                            addCloudName();
-                            break;
-                        case "removeCloud":
-                            confirmDialog(window.siyuan.languages.confirm, `${window.siyuan.languages.confirmDeleteCloudDir} <i>${target.parentElement.getAttribute("data-name")}</i>`, () => {
-                                fetchPost("/api/sync/removeCloudSyncDir", {name: target.parentElement.getAttribute("data-name")}, (response) => {
-                                    window.siyuan.config.sync.cloudName = response.data;
-                                    getCloudList(true);
-                                });
-                            });
-                            break;
-                        case "selectCloud":
-                            fetchPost("/api/sync/setCloudSyncDir", {name: target.getAttribute("data-name")}, () => {
-                                window.siyuan.config.sync.cloudName = target.getAttribute("data-name");
-                                getCloudList(true);
-                            });
-                            break;
-                    }
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-                }
-                target = target.parentElement;
-            }
         });
     },
 };

app/src/mobile/util/menu.ts

@@ -14,6 +14,7 @@ import {exitSiYuan} from "../../dialog/processSystem";
 import {confirmDialog} from "../../dialog/confirmDialog";
 import {openHistory} from "../../util/history";
 import {Dialog} from "../../dialog";
+import {syncGuide} from "../../sync/syncGuide";
 
 const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) => {
     closePanel();
@@ -435,14 +436,7 @@ ${accountHTML}
                     event.stopPropagation();
                     break;
                 } else if (target.id === "menuSyncNow") {
-                    if (needSubscribe()) {
-                        return;
-                    }
-                    if (!window.siyuan.config.sync.enabled) {
-                        showMessage(window.siyuan.languages._kernel[124]);
-                        return;
-                    }
-                    fetchPost("/api/sync/performSync", {});
+                    syncGuide();
                     event.preventDefault();
                     event.stopPropagation();
                     break;

app/src/sync/syncGuide.ts

@@ -0,0 +1,257 @@
+import {needSubscribe} from "../util/needSubscribe";
+import {showMessage} from "../dialog/message";
+import {fetchPost} from "../util/fetch";
+import {Dialog} from "../dialog";
+import {confirmDialog} from "../dialog/confirmDialog";
+import {isMobile} from "../util/functions";
+
+export const addCloudName = (cloudPanelElement: Element) => {
+    const dialog = new Dialog({
+        title: window.siyuan.languages.cloudSyncDir,
+        content: `<div class="b3-dialog__content">
+    <input class="b3-text-field fn__block" value="main">
+    <div class="b3-label__text">${window.siyuan.languages.reposTip}</div>
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`,
+        width: isMobile() ? "80vw" : "520px",
+    });
+    const inputElement = dialog.element.querySelector("input") as HTMLInputElement;
+    const btnsElement = dialog.element.querySelectorAll(".b3-button");
+    dialog.bindInput(inputElement, () => {
+        (btnsElement[1] as HTMLButtonElement).click();
+    });
+    inputElement.focus();
+    inputElement.select();
+    btnsElement[0].addEventListener("click", () => {
+        dialog.destroy();
+    });
+    btnsElement[1].addEventListener("click", () => {
+        cloudPanelElement.innerHTML = '<img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg">'
+        fetchPost("/api/sync/createCloudSyncDir", {name: inputElement.value}, () => {
+            dialog.destroy();
+            getSyncCloudList(cloudPanelElement, true);
+        });
+    });
+};
+
+export const bindSyncCloudListEvent = (cloudPanelElement: Element) => {
+    cloudPanelElement.addEventListener("click", (event) => {
+        let target = event.target as HTMLElement;
+        while (target && !target.isEqualNode(cloudPanelElement)) {
+            const type = target.getAttribute("data-type");
+            if (type) {
+                switch (type) {
+                    case "addCloud":
+                        addCloudName(cloudPanelElement);
+                        break;
+                    case "removeCloud":
+                        confirmDialog(window.siyuan.languages.confirm, `${window.siyuan.languages.confirmDeleteCloudDir} <i>${target.parentElement.getAttribute("data-name")}</i>`, () => {
+                            cloudPanelElement.innerHTML = '<img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg">'
+                            fetchPost("/api/sync/removeCloudSyncDir", {name: target.parentElement.getAttribute("data-name")}, (response) => {
+                                window.siyuan.config.sync.cloudName = response.data;
+                                getSyncCloudList(cloudPanelElement, true);
+                            });
+                        });
+                        break;
+                    case "selectCloud":
+                        cloudPanelElement.innerHTML = '<img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg">'
+                        fetchPost("/api/sync/setCloudSyncDir", {name: target.getAttribute("data-name")}, () => {
+                            window.siyuan.config.sync.cloudName = target.getAttribute("data-name");
+                            getSyncCloudList(cloudPanelElement, true);
+                        });
+                        break;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            target = target.parentElement;
+        }
+    });
+};
+
+export const getSyncCloudList = (cloudPanelElement: Element, reload = false) => {
+    if (!reload && cloudPanelElement.firstElementChild.tagName !== "IMG") {
+        return;
+    }
+    fetchPost("/api/sync/listCloudSyncDir", {}, (response) => {
+        let syncListHTML = `<div class="fn__hr"></div><ul><li style="padding: 0 16px" class="b3-list--empty">${window.siyuan.languages.emptyCloudSyncList}</li></ul>`;
+        if (response.code !== 1) {
+            syncListHTML = '<div class="fn__hr"></div><ul class="b3-list b3-list--background fn__flex-1" style="overflow: auto;">';
+            response.data.syncDirs.forEach((item: { hSize: string, cloudName: string, updated: string }) => {
+                syncListHTML += `<li data-type="selectCloud" data-name="${item.cloudName}" class="b3-list-item b3-list-item--hide-action">
+<input type="radio" name="cloudName"${item.cloudName === response.data.checkedSyncDir ? " checked" : ""}/>
+<span class="fn__space"></span>
+<span>${item.cloudName}</span>
+<span class="fn__space"></span>
+<span class="ft__on-surface">${item.hSize}</span>
+<span class="b3-list-item__meta">${item.updated}</span>
+<span class="fn__flex-1 fn__space"></span>
+<span data-type="removeCloud" class="b3-tooltips b3-tooltips__w b3-list-item__action" aria-label="${window.siyuan.languages.delete}">
+    <svg><use xlink:href="#iconTrashcan"></use></svg>
+</span></li>`;
+            });
+            syncListHTML += `</ul>
+<div class="fn__hr"></div>
+<div class="fn__flex">
+    <div class="fn__flex-1"></div>
+    <button class="b3-button b3-button--outline" data-type="addCloud"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
+</div>`;
+        }
+        cloudPanelElement.innerHTML = syncListHTML;
+    });
+};
+
+export const syncGuide = (element?: Element) => {
+    if (needSubscribe() || (element && element.classList.contains("fn__rotate"))) {
+        return;
+    }
+    if (!window.siyuan.config.repo.key) {
+        setKey();
+        return;
+    }
+    if (!window.siyuan.config.sync.enabled) {
+        setSync();
+        return;
+    }
+    fetchPost("/api/sync/performSync", {});
+}
+
+const setSync = (key?: string, dialog?: Dialog) => {
+    if (dialog) {
+        dialog.destroy();
+    }
+    if (key) {
+        window.siyuan.config.repo.key = key;
+    }
+    if (!window.siyuan.config.sync.enabled) {
+        const listDialog = new Dialog({
+            title: window.siyuan.languages.cloudSyncDir,
+            content: `<div class="b3-dialog__content" style="display: flex;flex-direction: column;height: 40vh;">
+    <img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg">
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button">${window.siyuan.languages.openSyncTip1}</button>
+</div>`,
+            width: isMobile() ? "80vw" : "520px",
+        });
+        const contentElement = listDialog.element.querySelector(".b3-dialog__content")
+        bindSyncCloudListEvent(contentElement);
+        getSyncCloudList(contentElement);
+        listDialog.element.querySelector(".b3-button").addEventListener("click", () => {
+            listDialog.destroy()
+            fetchPost("/api/sync/setSyncEnable", {enabled: true}, (response) => {
+                if (response.code === 1) {
+                    showMessage(response.msg);
+                } else {
+                    window.siyuan.config.sync.enabled = true
+                    confirmDialog(window.siyuan.languages.sync, window.siyuan.languages.syncNow, () => {
+                        fetchPost("/api/sync/performSync", {});
+                    });
+                }
+            });
+        });
+    } else {
+        confirmDialog(window.siyuan.languages.sync, window.siyuan.languages.syncNow, () => {
+            fetchPost("/api/sync/performSync", {});
+        });
+    }
+}
+
+const setKey = () => {
+    const dialog = new Dialog({
+        title: window.siyuan.languages.dataRepoKey,
+        content: `<div class="b3-dialog__content">
+    <div class="ft__on-surface">${window.siyuan.languages.dataRepoKeyTip1}</div>
+    <div class="fn__hr"></div>
+    <button class="b3-button b3-button--outline fn__size200" id="importKey">
+        <svg><use xlink:href="#iconDownload"></use></svg>${window.siyuan.languages.importKey}
+    </button>
+    <div class="fn__space"></div>
+    <button class="b3-button b3-button--outline fn__size200" id="initKey">
+        <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.genKey}
+    </button>
+    <div class="fn__space"></div>
+    <button class="b3-button b3-button--outline fn__size200" id="initKeyByPW">
+        <svg><use xlink:href="#iconHand"></use></svg>${window.siyuan.languages.genKeyByPW}
+    </button>
+    <div class="fn__hr"></div>
+    <div class="ft__error">${window.siyuan.languages.dataRepoKeyTip2}</div>
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button>
+</div>`
+    });
+    dialog.element.querySelector(".b3-button--cancel").addEventListener("click", () => {
+        dialog.destroy();
+    });
+    dialog.element.querySelector("#importKey").addEventListener("click", () => {
+        const passwordDialog = new Dialog({
+            title: "🔑 " + window.siyuan.languages.key,
+            content: `<div class="b3-dialog__content">
+    <textarea class="b3-text-field fn__block" placeholder="${window.siyuan.languages.keyPlaceholder}"></textarea>
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`,
+            width: isMobile() ? "80vw" : "520px",
+        });
+        const textAreaElement = passwordDialog.element.querySelector("textarea");
+        textAreaElement.focus();
+        const btnsElement = passwordDialog.element.querySelectorAll(".b3-button");
+        btnsElement[0].addEventListener("click", () => {
+            passwordDialog.destroy();
+        });
+        btnsElement[1].addEventListener("click", () => {
+            fetchPost("/api/repo/importRepoKey", {key: textAreaElement.value}, () => {
+                setSync(textAreaElement.value, dialog);
+                passwordDialog.destroy();
+            });
+        });
+    });
+    dialog.element.querySelector("#initKey").addEventListener("click", () => {
+        confirmDialog("🔑 " + window.siyuan.languages.genKey, window.siyuan.languages.initRepoKeyTip, () => {
+            fetchPost("/api/repo/initRepoKey", {}, (response) => {
+                setSync(response.data.key, dialog);
+            });
+        });
+    });
+    dialog.element.querySelector("#initKeyByPW").addEventListener("click", () => {
+        const initDialog = new Dialog({
+            title: "🔑 " + window.siyuan.languages.genKeyByPW,
+            content: `<div class="b3-dialog__content">
+    <input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.password}">
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`,
+            width: isMobile() ? "80vw" : "520px",
+        });
+        const inputElement = initDialog.element.querySelector(".b3-text-field") as HTMLInputElement;
+        inputElement.focus();
+        const btnsElement = initDialog.element.querySelectorAll(".b3-button");
+        initDialog.bindInput(inputElement, () => {
+            (btnsElement[1] as HTMLButtonElement).click();
+        });
+        btnsElement[0].addEventListener("click", () => {
+            initDialog.destroy();
+        });
+        btnsElement[1].addEventListener("click", () => {
+            if (!inputElement.value) {
+                showMessage(window.siyuan.languages._kernel[142]);
+                return;
+            }
+            confirmDialog("🔑 " + window.siyuan.languages.genKeyByPW, window.siyuan.languages.initRepoKeyTip, () => {
+                initDialog.destroy();
+                fetchPost("/api/repo/InitRepoKeyFromPassphrase", {pass: inputElement.value}, (response) => {
+                    setSync(response.data.key, dialog);
+                });
+            });
+        });
+    });
+}

app/src/util/globalShortcut.ts

@@ -38,6 +38,7 @@ import {Dialog} from "../dialog";
 import {unicode2Emoji} from "../emoji";
 import {deleteFile} from "../editor/deleteFile";
 import {escapeHtml} from "./escape";
+import {syncGuide} from "../sync/syncGuide";
 
 const getRightBlock = (element: HTMLElement, x: number, y: number) => {
     let index = 1;
@@ -378,14 +379,7 @@ export const globalShortcut = () => {
         if (matchHotKey(window.siyuan.config.keymap.general.syncNow.custom, event)) {
             event.preventDefault();
             event.stopPropagation();
-            if (needSubscribe() || document.querySelector("#barSync svg").classList.contains("fn__rotate")) {
-                return;
-            }
-            if (!window.siyuan.config.sync.enabled) {
-                showMessage(window.siyuan.languages._kernel[124]);
-                return;
-            }
-            fetchPost("/api/sync/performSync", {});
+            syncGuide(document.querySelector("#barSync svg"));
             return;
         }
         if (matchHotKey(window.siyuan.config.keymap.general.lockScreen.custom, event)) {

app/src/util/onGetConfig.ts

@@ -23,6 +23,7 @@ import {openSetting} from "../config";
 import {getSearch} from "./functions";
 import {openHistory} from "./history";
 import {initStatus} from "../layout/status";
+import {syncGuide} from "../sync/syncGuide";
 
 const matchKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => {
     if (key1 === "general") {
@@ -205,14 +206,7 @@ const initBar = () => {
                 event.stopPropagation();
                 break;
             } else if (target.id === "barSync") {
-                if (needSubscribe() || target.firstElementChild.classList.contains("fn__rotate")) {
-                    return;
-                }
-                if (!window.siyuan.config.sync.enabled) {
-                    showMessage(window.siyuan.languages._kernel[124]);
-                    return;
-                }
-                fetchPost("/api/sync/performSync", {});
+               syncGuide(target.firstElementChild);
                 event.stopPropagation();
                 break;
             } else if (target.id === "barForward") {