From 4e313b8829fdfb023ae3b48cfb601c97465e4115 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 27 Mar 2023 09:48:11 +0800
Subject: [PATCH] :iphone: add ai and flashcard

---
 app/src/config/ai.ts                  | 115 +++--
 app/src/config/flashcard.ts           |  21 +-
 app/src/mobile/settings/about.ts      | 384 ++++++++++++++++
 app/src/mobile/settings/account.ts    | 215 +++++++++
 app/src/mobile/settings/ai.ts         |  14 +
 app/src/mobile/settings/appearance.ts |  62 +--
 app/src/mobile/settings/riffCard.ts   |  14 +
 app/src/mobile/util/MobileTags.ts     |   2 +-
 app/src/mobile/util/menu.ts           | 627 ++------------------------
 app/src/mobile/util/model.ts          |  14 +
 app/src/mobile/util/search.ts         |  56 +--
 11 files changed, 835 insertions(+), 689 deletions(-)
 create mode 100644 app/src/mobile/settings/about.ts
 create mode 100644 app/src/mobile/settings/account.ts
 create mode 100644 app/src/mobile/settings/ai.ts
 create mode 100644 app/src/mobile/settings/riffCard.ts
 create mode 100644 app/src/mobile/util/model.ts

diff --git a/app/src/config/ai.ts b/app/src/config/ai.ts
index dd086e692..e072252b6 100644
--- a/app/src/config/ai.ts
+++ b/app/src/config/ai.ts
@@ -3,52 +3,87 @@ import {fetchPost} from "../util/fetch";
 export const ai = {
     element: undefined as Element,
     genHTML: () => {
+        let responsiveHTML = ""
+        /// #if MOBILE
+        responsiveHTML = `<div class="b3-label">
+    ${window.siyuan.languages.apiTimeout}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__flex-center fn__block" type="number" step="1" min="5" max="600" id="apiTimeout" value="${window.siyuan.config.ai.openAI.apiTimeout}"/>     
+    <div class="b3-label__text">${window.siyuan.languages.apiTimeoutTip}</div>
+</div>
+<div class="b3-label">
+    ${window.siyuan.languages.apiMaxTokens}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__flex-center fn__block" type="number" step="1" min="0" id="apiMaxTokens" max="4096" value="${window.siyuan.config.ai.openAI.apiMaxTokens}"/>
+    <div class="b3-label__text">${window.siyuan.languages.apiMaxTokensTip}</div>
+</div>
+<div class="b3-label">
+    ${window.siyuan.languages.apiKey}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__block" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
+    <div class="b3-label__text">${window.siyuan.languages.apiKeyTip}</div>
+</div>
+<div class="b3-label">
+    ${window.siyuan.languages.apiProxy}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__block" id="apiProxy" value="${window.siyuan.config.ai.openAI.apiProxy}"/>
+    <div class="b3-label__text">${window.siyuan.languages.apiProxyTip}</div>
+</div>
+<div class="b3-label">
+    ${window.siyuan.languages.apiBaseURL}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__block" id="apiBaseURL" value="${window.siyuan.config.ai.openAI.apiBaseURL}"/>
+    <div class="b3-label__text">${window.siyuan.languages.apiBaseURLTip}</div>
+</div>`;
+        /// #else
+        responsiveHTML = `<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.apiTimeout}
+        <div class="b3-label__text">${window.siyuan.languages.apiTimeoutTip}</div>
+    </div>
+    <span class="fn__space"></span>
+    <input class="b3-text-field fn__flex-center fn__size200" type="number" step="1" min="5" max="600" id="apiTimeout" value="${window.siyuan.config.ai.openAI.apiTimeout}"/>
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.apiMaxTokens}
+        <div class="b3-label__text">${window.siyuan.languages.apiMaxTokensTip}</div>
+    </div>
+    <span class="fn__space"></span>
+    <input class="b3-text-field fn__flex-center fn__size200" type="number" step="1" min="0" id="apiMaxTokens" max="4096" value="${window.siyuan.config.ai.openAI.apiMaxTokens}"/>
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.apiKey}
+        <div class="b3-label__text">${window.siyuan.languages.apiKeyTip}</div>
+        <div class="fn__hr"></div>
+        <input class="b3-text-field fn__block" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
+    </div>
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.apiProxy}
+        <div class="b3-label__text">${window.siyuan.languages.apiProxyTip}</div>
+        <span class="fn__hr"></span>
+        <input class="b3-text-field fn__block" id="apiProxy" value="${window.siyuan.config.ai.openAI.apiProxy}"/>
+    </div>
+</label>
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.apiBaseURL}
+        <div class="b3-label__text">${window.siyuan.languages.apiBaseURLTip}</div>
+        <span class="fn__hr"></span>
+        <input class="b3-text-field fn__block" id="apiBaseURL" value="${window.siyuan.config.ai.openAI.apiBaseURL}"/>
+    </div>
+</label>`;
+        /// #endif
         return `<div class="fn__flex-column" style="height: 100%">
 <div class="layout-tab-bar fn__flex">
     <div data-type="openai" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">OpenAI</span><span class="fn__flex-1"></span></div>
 </div>
 <div class="fn__flex-1">
     <div data-type="openai">
-        <label class="fn__flex b3-label">
-            <div class="fn__flex-1">
-                ${window.siyuan.languages.apiTimeout}
-                <div class="b3-label__text">${window.siyuan.languages.apiTimeoutTip}</div>
-            </div>
-            <span class="fn__space"></span>
-            <input class="b3-text-field fn__flex-center fn__size200" type="number" step="1" min="5" max="600" id="apiTimeout" value="${window.siyuan.config.ai.openAI.apiTimeout}"/>
-        </label>
-        <label class="fn__flex b3-label">
-            <div class="fn__flex-1">
-                ${window.siyuan.languages.apiMaxTokens}
-                <div class="b3-label__text">${window.siyuan.languages.apiMaxTokensTip}</div>
-            </div>
-            <span class="fn__space"></span>
-            <input class="b3-text-field fn__flex-center fn__size200" type="number" step="1" min="0" id="apiMaxTokens" max="4096" value="${window.siyuan.config.ai.openAI.apiMaxTokens}"/>
-        </label>
-        <label class="fn__flex b3-label">
-            <div class="fn__flex-1">
-                ${window.siyuan.languages.apiKey}
-                <div class="b3-label__text">${window.siyuan.languages.apiKeyTip}</div>
-                <div class="fn__hr"></div>
-                <input class="b3-text-field fn__block" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
-            </div>
-        </label>
-        <label class="fn__flex b3-label">
-            <div class="fn__flex-1">
-                ${window.siyuan.languages.apiProxy}
-                <div class="b3-label__text">${window.siyuan.languages.apiProxyTip}</div>
-                <span class="fn__hr"></span>
-                <input class="b3-text-field fn__block" id="apiProxy" value="${window.siyuan.config.ai.openAI.apiProxy}"/>
-            </div>
-        </label>
-        <label class="fn__flex b3-label">
-            <div class="fn__flex-1">
-                ${window.siyuan.languages.apiBaseURL}
-                <div class="b3-label__text">${window.siyuan.languages.apiBaseURLTip}</div>
-                <span class="fn__hr"></span>
-                <input class="b3-text-field fn__block" id="apiBaseURL" value="${window.siyuan.config.ai.openAI.apiBaseURL}"/>
-            </div>
-        </label>
+        ${responsiveHTML}
     </div>
 </div>
 </div>`;
diff --git a/app/src/config/flashcard.ts b/app/src/config/flashcard.ts
index 1b435fcc1..690488549 100644
--- a/app/src/config/flashcard.ts
+++ b/app/src/config/flashcard.ts
@@ -3,7 +3,22 @@ import {fetchPost} from "../util/fetch";
 export const flashcard = {
     element: undefined as Element,
     genHTML: () => {
-        return `<label class="fn__flex b3-label">
+        let responsiveHTML = ""
+        /// #if MOBILE
+        responsiveHTML = `<div class="b3-label">
+    ${window.siyuan.languages.flashcardNewCardLimit}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__flex-center fn__block" id="newCardLimit" step="1" min="1" type="number"${window.siyuan.config.flashcard.newCardLimit ? " checked" : "" } value="${window.siyuan.config.flashcard.newCardLimit}"/>
+    <div class="b3-label__text">${window.siyuan.languages.flashcardNewCardLimitTip}</div>
+</div>
+<div class="b3-label">
+    ${window.siyuan.languages.flashcardReviewCardLimit}
+    <div class="fn__hr"></div>
+    <input class="b3-text-field fn__flex-center fn__block" id="reviewCardLimit" step="1" min="1" type="number"${window.siyuan.config.flashcard.reviewCardLimit ? " checked" : ""} value="${window.siyuan.config.flashcard.reviewCardLimit}"/>
+    <div class="b3-label__text">${window.siyuan.languages.flashcardReviewCardLimitTip}</div>
+</div>`
+        /// #else
+        responsiveHTML = `<label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.flashcardNewCardLimit}
         <div class="b3-label__text">${window.siyuan.languages.flashcardNewCardLimitTip}</div>
@@ -18,7 +33,9 @@ export const flashcard = {
     </div>
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="reviewCardLimit" step="1" min="1" type="number"${window.siyuan.config.flashcard.reviewCardLimit ? " checked" : ""} value="${window.siyuan.config.flashcard.reviewCardLimit}"/>
-</label>
+</label>`
+        /// #endif
+        return `${responsiveHTML}
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.flashcardList}
diff --git a/app/src/mobile/settings/about.ts b/app/src/mobile/settings/about.ts
new file mode 100644
index 000000000..57ae45437
--- /dev/null
+++ b/app/src/mobile/settings/about.ts
@@ -0,0 +1,384 @@
+import {Constants} from "../../constants";
+import {setAccessAuthCode} from "../../config/util/setAccessAuthCode";
+import {Dialog} from "../../dialog";
+import {fetchPost} from "../../util/fetch";
+import {confirmDialog} from "../../dialog/confirmDialog";
+import {showMessage} from "../../dialog/message";
+import {openByMobile, writeText} from "../../protyle/util/compatibility";
+import {exitSiYuan, processSync} from "../../dialog/processSystem";
+import {pathPosix} from "../../util/pathName";
+import {openModel} from "../util/model";
+
+export const initAbout = () => {
+    if (!window.siyuan.config.localIPs || window.siyuan.config.localIPs.length === 0 ||
+        (window.siyuan.config.localIPs.length === 1 && window.siyuan.config.localIPs[0] === "")) {
+        window.siyuan.config.localIPs = ["127.0.0.1"];
+    }
+
+    openModel({
+        title: window.siyuan.languages.about,
+        icon: "iconInfo",
+        html: `<div class="b3-label fn__flex${window.siyuan.config.readonly ? " fn__none" : ""}">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.about11}
+        <div class="b3-label__text">${window.siyuan.languages.about12}</div>
+    </div>
+    <div class="fn__space"></div>
+    <input class="b3-switch fn__flex-center" id="networkServe" type="checkbox"${window.siyuan.config.system.networkServe ? " checked" : ""}>
+</div>
+<div class="b3-label">
+       ${window.siyuan.languages.about2}
+       <div class="fn__hr"></div>
+       <input class="b3-text-field fn__block" readonly value="http://${window.siyuan.config.system.networkServe ? window.siyuan.config.localIPs[0] : "127.0.0.1"}:${location.port}">
+       <div class="b3-label__text">${window.siyuan.languages.about3.replace("${port}", location.port)}</div>
+       <div class="fn__hr"></div>
+       <span class="b3-label__text"><code class="fn__code">${window.siyuan.config.localIPs.join("</code> <code class='fn__code'>")}</code></span>
+</div>
+<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
+    ${window.siyuan.languages.about5}
+    <div class="fn__hr"></div>
+    <button class="b3-button b3-button--outline fn__block" id="authCode">
+        <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.config}
+    </button>
+    <div class="b3-label__text">${window.siyuan.languages.about6}</div>
+</div>
+<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
+    ${window.siyuan.languages.dataRepoKey}
+    <div class="fn__hr"></div>
+    <div class="${window.siyuan.config.repo.key ? "fn__none" : ""}">
+        <button class="b3-button b3-button--outline fn__block" id="importKey">
+            <svg><use xlink:href="#iconDownload"></use></svg>${window.siyuan.languages.importKey}
+        </button>
+        <div class="fn__hr"></div>
+        <button class="b3-button b3-button--outline fn__block" id="initKey">
+            <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.genKey}
+        </button>
+        <div class="fn__hr"></div>
+        <button class="b3-button b3-button--outline fn__block" id="initKeyByPW">
+            ${window.siyuan.languages.genKeyByPW}
+        </button>
+    </div>
+    <div class="${window.siyuan.config.repo.key ? "" : "fn__none"}">
+        <button class="b3-button b3-button--outline fn__block" id="copyKey">
+            <svg><use xlink:href="#iconCopy"></use></svg>${window.siyuan.languages.copyKey}
+        </button>
+        <div class="fn__hr"></div>
+        <button class="b3-button b3-button--outline fn__block" id="removeKey">
+            <svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.resetRepo}
+        </button>
+    </div>
+    <div class="b3-label__text">${window.siyuan.languages.dataRepoKeyTip1}</div>
+    <div class="b3-label__text ft__error">${window.siyuan.languages.dataRepoKeyTip2}</div>
+</div>
+<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
+    ${window.siyuan.languages.about13}
+    <span class="b3-label__text">${window.siyuan.config.api.token}</span>
+    <div class="fn__hr"></div>
+    <button class="b3-button b3-button--outline fn__block" id="token">
+        <svg><use xlink:href="#iconCopy"></use></svg>${window.siyuan.languages.copy}
+    </button>
+    <div class="b3-label__text">${window.siyuan.languages.about14}</div>
+</div>
+<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
+    <div class="fn__flex">
+        ${window.siyuan.languages.export}
+    </div>
+    <div class="fn__hr"></div>
+    <button class="b3-button b3-button--outline fn__block" id="exportData">
+       <svg><use xlink:href="#iconUpload"></use></svg>Data
+    </button>
+    <div class="fn__hr"></div>
+    <div class="b3-label__text">${window.siyuan.languages.exportDataTip}</div>
+    <div class="fn__hr--b"></div>
+    <button class="b3-button b3-button--outline fn__block" id="exportLog">
+       <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.systemLog}
+    </button>
+    <div class="fn__hr"></div>
+    <div class="b3-label__text">${window.siyuan.languages.systemLogTip}</div>
+</div>
+<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
+    <div class="fn__flex">
+        ${window.siyuan.languages.import}
+    </div>
+    <div class="fn__hr"></div>
+    <button class="b3-button b3-button--outline fn__block" style="position: relative">
+        <input id="importData" class="b3-form__upload" type="file">
+        <svg><use xlink:href="#iconDownload"></use></svg> ${window.siyuan.languages.import} Data
+    </button>
+    <div class="fn__hr"></div>
+    <div class="b3-label__text">${window.siyuan.languages.importDataTip}</div>
+</div>
+<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
+    ${window.siyuan.languages.workspaceList}
+    <div class="fn__hr"></div>
+    <button id="openWorkspace" class="b3-button b3-button--outline fn__block">${window.siyuan.languages.openBy}...</button>
+    <div class="fn__hr"></div>
+    <ul id="workspaceDir" class="b3-list b3-list--background"></ul>
+    <div class="fn__hr"></div>
+    <button id="creatWorkspace" class="b3-button fn__block">${window.siyuan.languages.new}</button>
+</div>
+<div class="b3-label">
+    <div class="config-about__logo">
+        <img src="/stage/icon.png">
+        <span class="fn__space"></span>
+        <div>
+            <span>${window.siyuan.languages.siyuanNote}</span>
+            <span class="fn__space"></span>
+            <span class="ft__on-surface">v${Constants.SIYUAN_VERSION}</span>
+            <br>
+            <span class="ft__on-surface">${window.siyuan.languages.slogan}</span>
+        </div>
+    </div>
+    <div style="color:var(--b3-theme-surface);font-family: cursive;">会泽百家&nbsp;至公天下</div>
+    ${window.siyuan.languages.about1}
+</div>`,
+        bindEvent(modelMainElement: HTMLElement) {
+            const workspaceDirElement = modelMainElement.querySelector("#workspaceDir");
+            genWorkspace(workspaceDirElement);
+            const importKeyElement = modelMainElement.querySelector("#importKey");
+            modelMainElement.addEventListener("click", (event) => {
+                let target = event.target as HTMLElement;
+                while (target && !target.isSameNode(modelMainElement)) {
+                    if (target.id === "authCode") {
+                        setAccessAuthCode();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "importKey") {
+                        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: "80vw",
+                        });
+                        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}, () => {
+                                window.siyuan.config.repo.key = textAreaElement.value;
+                                importKeyElement.parentElement.classList.add("fn__none");
+                                importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
+                                passwordDialog.destroy();
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "initKey") {
+                        confirmDialog("🔑 " + window.siyuan.languages.genKey, window.siyuan.languages.initRepoKeyTip, () => {
+                            fetchPost("/api/repo/initRepoKey", {}, (response) => {
+                                window.siyuan.config.repo.key = response.data.key;
+                                importKeyElement.parentElement.classList.add("fn__none");
+                                importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "initKeyByPW") {
+                        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: "80vw",
+                        });
+                        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) => {
+                                    window.siyuan.config.repo.key = response.data.key;
+                                    importKeyElement.parentElement.classList.add("fn__none");
+                                    importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
+                                });
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "copyKey") {
+                        showMessage(window.siyuan.languages.copied);
+                        writeText(window.siyuan.config.repo.key);
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "removeKey") {
+                        confirmDialog("⚠️ " + window.siyuan.languages.resetRepo, window.siyuan.languages.resetRepoTip, () => {
+                            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");
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "token") {
+                        showMessage(window.siyuan.languages.copied);
+                        writeText(window.siyuan.config.api.token);
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "exportData") {
+                        fetchPost("/api/export/exportData", {}, response => {
+                            openByMobile(response.data.zip);
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "exportLog") {
+                        fetchPost("/api/system/exportLog", {}, (response) => {
+                            openByMobile(response.data.zip);
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "openWorkspace") {
+                        fetchPost("/api/system/getMobileWorkspaces", {}, (response) => {
+                            let selectHTML = "";
+                            response.data.forEach((item: string, index: number) => {
+                                selectHTML += `<option value="${item}"${index === 0 ? ' selected="selected"' : ""}>${pathPosix().basename(item)}</option>`;
+                            });
+                            const openWorkspaceDialog = new Dialog({
+                                title: window.siyuan.languages.openBy,
+                                content: `<div class="b3-dialog__content">
+    <select class="b3-text-field fn__block">${selectHTML}</select>
+</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: "80vw",
+                            });
+                            const btnsElement = openWorkspaceDialog.element.querySelectorAll(".b3-button");
+                            btnsElement[0].addEventListener("click", () => {
+                                openWorkspaceDialog.destroy();
+                            });
+                            btnsElement[1].addEventListener("click", () => {
+                                const openPath = openWorkspaceDialog.element.querySelector("select").value;
+                                if (openPath === window.siyuan.config.system.workspaceDir) {
+                                    openWorkspaceDialog.destroy();
+                                    return;
+                                }
+                                confirmDialog(window.siyuan.languages.confirm, `${pathPosix().basename(window.siyuan.config.system.workspaceDir)} -> ${pathPosix().basename(openPath)}?`, () => {
+                                    fetchPost("/api/system/setWorkspaceDir", {
+                                        path: openPath
+                                    }, () => {
+                                        exitSiYuan();
+                                    });
+                                });
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.id === "creatWorkspace") {
+                        const createWorkspaceDialog = new Dialog({
+                            title: window.siyuan.languages.new,
+                            content: `<div class="b3-dialog__content">
+    <input class="b3-text-field fn__block">
+</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: "80vw",
+                        });
+                        const inputElement = createWorkspaceDialog.element.querySelector("input");
+                        inputElement.focus();
+                        const btnsElement = createWorkspaceDialog.element.querySelectorAll(".b3-button");
+                        btnsElement[0].addEventListener("click", () => {
+                            createWorkspaceDialog.destroy();
+                        });
+                        btnsElement[1].addEventListener("click", () => {
+                            fetchPost("/api/system/createWorkspaceDir", {
+                                path: pathPosix().join(pathPosix().dirname(window.siyuan.config.system.workspaceDir), inputElement.value)
+                            }, () => {
+                                genWorkspace(workspaceDirElement);
+                                createWorkspaceDialog.destroy();
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.getAttribute("data-type") === "remove") {
+                        fetchPost("/api/system/removeWorkspaceDir", {path: target.parentElement.getAttribute("data-path")}, () => {
+                            genWorkspace(workspaceDirElement);
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    } else if (target.classList.contains("b3-list-item") && !target.classList.contains("b3-list-item--focus")) {
+                        confirmDialog(window.siyuan.languages.confirm, `${pathPosix().basename(window.siyuan.config.system.workspaceDir)} -> ${pathPosix().basename(target.getAttribute("data-path"))}?`, () => {
+                            fetchPost("/api/system/setWorkspaceDir", {
+                                path: target.getAttribute("data-path")
+                            }, () => {
+                                exitSiYuan();
+                            });
+                        });
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    }
+                    target = target.parentElement;
+                }
+            });
+            modelMainElement.querySelector("#importData").addEventListener("change", (event: InputEvent & {
+                target: HTMLInputElement
+            }) => {
+                const formData = new FormData();
+                formData.append("file", event.target.files[0]);
+                fetchPost("/api/import/importData", formData);
+            });
+            const networkServeElement = modelMainElement.querySelector("#networkServe") as HTMLInputElement;
+            networkServeElement.addEventListener("change", () => {
+                fetchPost("/api/system/setNetworkServe", {networkServe: networkServeElement.checked}, () => {
+                    exitSiYuan();
+                });
+            });
+        }
+    });
+};
+
+const genWorkspace = (workspaceDirElement: Element) => {
+    fetchPost("/api/system/getWorkspaces", {}, (response) => {
+        let html = "";
+        response.data.forEach((item: IWorkspace) => {
+            html += `<li data-path="${item.path}" class="b3-list-item b3-list-item--narrow${window.siyuan.config.system.workspaceDir === item.path ? " b3-list-item--focus" : ""}">
+    <span class="b3-list-item__text">${pathPosix().basename(item.path)}</span>
+    <span data-type="remove" class="b3-list-item__action">
+        <svg><use xlink:href="#iconMin"></use></svg>
+    </span>
+</li>`;
+        });
+        workspaceDirElement.innerHTML = html;
+    });
+};
diff --git a/app/src/mobile/settings/account.ts b/app/src/mobile/settings/account.ts
new file mode 100644
index 000000000..6f5adff22
--- /dev/null
+++ b/app/src/mobile/settings/account.ts
@@ -0,0 +1,215 @@
+import {openModel} from "../util/model";
+import {getEventName} from "../../protyle/util/compatibility";
+import {fetchPost} from "../../util/fetch";
+import {closePanel} from "../util/closePanel";
+import {processSync} from "../../dialog/processSystem";
+import {confirmDialog} from "../../dialog/confirmDialog";
+import {showMessage} from "../../dialog/message";
+import md5 from "blueimp-md5";
+
+export const showAccountInfo = () => {
+    let userTitlesHTML = "";
+    if (window.siyuan.user.userTitles.length > 0) {
+        userTitlesHTML = '<div class="b3-chips" style="position: absolute">';
+        window.siyuan.user.userTitles.forEach((item) => {
+            userTitlesHTML += `<div class="b3-chip b3-chip--middle">${item.icon} ${item.name}</div>`;
+        });
+        userTitlesHTML += "</div>";
+    }
+    openModel({
+        title: window.siyuan.languages.accountManage,
+        icon: "iconAccount",
+        html: `<div class="fn__flex-column">
+<div class="config-account__bg">
+    <div class="config-account__cover" style="background-image: url(${window.siyuan.user.userHomeBImgURL})"></div>
+    <a href="https://ld246.com/settings/avatar" class="config-account__avatar" style="background-image: url(${window.siyuan.user.userAvatarURL})" target="_blank"></a>
+    <h1 class="config-account__name">
+        <a target="_blank" class="fn__a" href="https://ld246.com/member/${window.siyuan.user.userName}">${window.siyuan.user.userName}</a>
+    </h1>
+    ${userTitlesHTML}
+</div>
+<div class="config-account__info">
+    <div class="fn__flex">
+        <a class="b3-button b3-button--text" href="https://ld246.com/settings" target="_blank">${window.siyuan.languages.accountManage}</a>
+        <span class="fn__space"></span>
+        <button class="b3-button b3-button--cancel" id="logout">
+            ${window.siyuan.languages.logout}
+        </button>
+        <span class="fn__space"></span>
+        <button class="b3-button b3-button--cancel" id="deactivateUser">
+            ${window.siyuan.languages.deactivateUser}
+        </button>
+        <span class="fn__flex-1"></span>
+        <button class="b3-button b3-button--cancel" id="refresh">
+            <svg><use xlink:href="#iconRefresh"></use></svg>
+        </button>
+    </div>
+</div></div>`,
+        bindEvent(modelMainElement: HTMLElement) {
+            modelMainElement.querySelector("#logout").addEventListener(getEventName(), () => {
+                fetchPost("/api/setting/logoutCloudUser", {}, () => {
+                    window.siyuan.user = null;
+                    closePanel();
+                    document.getElementById("menuAccount").innerHTML = `<svg class="b3-menu__icon"><use xlink:href="#iconAccount"></use></svg><span class="b3-menu__label">${window.siyuan.languages.login}</span>`;
+                    processSync();
+                });
+            });
+            modelMainElement.querySelector("#deactivateUser").addEventListener(getEventName(), () => {
+                confirmDialog("⚠️ " + window.siyuan.languages.deactivateUser, window.siyuan.languages.deactivateUserTip, () => {
+                    fetchPost("/api/account/deactivate", {}, () => {
+                        window.siyuan.user = null;
+                        closePanel();
+                        document.getElementById("menuAccount").innerHTML = `<svg class="b3-menu__icon"><use xlink:href="#iconAccount"></use></svg><span class="b3-menu__label">${window.siyuan.languages.login}</span>`;
+                        processSync();
+                    });
+                });
+            });
+            const refreshElement = modelMainElement.querySelector("#refresh");
+            refreshElement.addEventListener("click", () => {
+                const svgElement = refreshElement.firstElementChild;
+                if (svgElement.classList.contains("fn__rotate")) {
+                    return;
+                }
+                svgElement.classList.add("fn__rotate");
+                fetchPost("/api/setting/getCloudUser", {
+                    token: window.siyuan.user.userToken,
+                }, response => {
+                    window.siyuan.user = response.data;
+                    showMessage(window.siyuan.languages.refreshUser, 3000);
+                    showAccountInfo();
+                    const menuAccountElement = document.getElementById("menuAccount");
+                    if (window.siyuan.user) {
+                        menuAccountElement.innerHTML = `<img class="b3-menu__icon" src="${window.siyuan.user.userAvatarURL}"/><span class="b3-menu__label">${window.siyuan.user.userName}</span>`;
+                    } else {
+                        menuAccountElement.innerHTML = `<svg class="b3-menu__icon"><use xlink:href="#iconAccount"></use></svg><span class="b3-menu__label">${window.siyuan.languages.login}</span>`;
+                    }
+                    processSync();
+                });
+            });
+        }
+    })
+};
+
+export const login = () => {
+    openModel({
+        title: window.siyuan.languages.login,
+        icon: "iconAccount",
+        html: `<div class="b3-form__space" id="form1">
+    <div class="b3-form__icon">
+        <svg class="b3-form__icon-icon"><use xlink:href="#iconAccount"></use></svg>
+        <input id="userName" class="b3-text-field fn__block b3-form__icon-input" placeholder="${window.siyuan.languages.accountName}">
+    </div>
+    <div class="fn__hr--b"></div>
+    <div class="b3-form__icon">
+        <svg class="b3-form__icon-icon"><use xlink:href="#iconLock"></use></svg>
+        <input type="password" id="userPassword" class="b3-text-field b3-form__icon-input fn__block" placeholder="${window.siyuan.languages.password}">
+    </div>
+    <div class="b3-form__img fn__none">
+        <div class="fn__hr--b"></div>
+        <img id="captchaImg" class="fn__pointer" style="top: 17px">
+        <input id="captcha" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.captcha}">
+    </div>
+    <div class="fn__hr--b"></div>
+    <label class="ft__smaller ft__on-surface fn__flex">
+        <span class="fn__space"></span>
+        <input type="checkbox" class="b3-switch fn__flex-center" id="agreeLogin">
+        <span class="fn__space"></span>
+        <span>${window.siyuan.languages.accountTip}</span>
+    </label>
+    <div class="fn__hr--b"></div>
+    <button id="login" disabled class="b3-button fn__block">${window.siyuan.languages.login}</button>
+    <div class="fn__hr--b"></div>
+    <div class="ft__center">
+        <a href="https://ld246.com/forget-pwd" class="b3-button b3-button--cancel" target="_blank">${window.siyuan.languages.forgetPassword}</a>
+        <span class="fn__space${window.siyuan.config.system.container === "ios" ? " fn__none" : ""}"></span>
+        <a href="https://ld246.com/register" class="b3-button b3-button--cancel${window.siyuan.config.system.container === "ios" ? " fn__none" : ""}" target="_blank">${window.siyuan.languages.register}</a>
+    </div>
+</div>
+<div class="b3-form__space fn__none" id="form2">
+    <div class="b3-form__icon">
+        <svg class="b3-form__icon-icon"><use xlink:href="#iconLock"></use></svg>
+        <input id="twofactorAuthCode" class="b3-text-field fn__block b3-form__icon-input" placeholder="${window.siyuan.languages.twoFactorCaptcha}">
+    </div>
+    <div class="fn__hr--b"></div>
+    <button id="login2" class="b3-button fn__block">${window.siyuan.languages.login}</button>
+</div>`,
+        bindEvent(modelMainElement: HTMLElement) {
+            const agreeLoginElement = modelMainElement.querySelector("#agreeLogin") as HTMLInputElement;
+            const userNameElement = modelMainElement.querySelector("#userName") as HTMLInputElement;
+            const userPasswordElement = modelMainElement.querySelector("#userPassword") as HTMLInputElement;
+            const captchaImgElement = modelMainElement.querySelector("#captchaImg") as HTMLInputElement;
+            const captchaElement = modelMainElement.querySelector("#captcha") as HTMLInputElement;
+            const twofactorAuthCodeElement = modelMainElement.querySelector("#twofactorAuthCode") as HTMLInputElement;
+            const loginBtnElement = modelMainElement.querySelector("#login") as HTMLButtonElement;
+            const login2BtnElement = modelMainElement.querySelector("#login2") as HTMLButtonElement;
+            userNameElement.focus();
+            let token: string;
+            let needCaptcha: string;
+            agreeLoginElement.addEventListener("click", () => {
+                if (agreeLoginElement.checked) {
+                    loginBtnElement.removeAttribute("disabled");
+                } else {
+                    loginBtnElement.setAttribute("disabled", "disabled");
+                }
+            });
+            captchaImgElement.addEventListener("click", () => {
+                captchaImgElement.setAttribute("src", `https://ld246.com/captcha/login?needCaptcha=${needCaptcha}&t=${new Date().getTime()}`);
+            });
+            loginBtnElement.addEventListener("click", () => {
+                fetchPost("/api/account/login", {
+                    userName: userNameElement.value.replace(/(^\s*)|(\s*$)/g, ""),
+                    userPassword: md5(userPasswordElement.value),
+                    captcha: captchaElement.value.replace(/(^\s*)|(\s*$)/g, ""),
+                }, (data) => {
+                    if (data.code === 1) {
+                        showMessage(data.msg);
+                        if (data.data.needCaptcha) {
+                            // 验证码
+                            needCaptcha = data.data.needCaptcha;
+                            captchaElement.parentElement.classList.remove("fn__none");
+                            captchaElement.previousElementSibling.setAttribute("src",
+                                `https://ld246.com/captcha/login?needCaptcha=${data.data.needCaptcha}`);
+                            captchaElement.value = "";
+                            return;
+                        }
+                        return;
+                    }
+                    if (data.code === 10) {
+                        // 两步验证
+                        modelMainElement.querySelector("#form1").classList.add("fn__none");
+                        modelMainElement.querySelector("#form2").classList.remove("fn__none");
+                        twofactorAuthCodeElement.focus();
+                        token = data.data.token;
+                        return;
+                    }
+                    fetchPost("/api/setting/getCloudUser", {
+                        token: data.data.token,
+                    }, response => {
+                        window.siyuan.user = response.data;
+                        closePanel();
+                        document.getElementById("menuAccount").innerHTML = `<img class="b3-menu__icon" src="${window.siyuan.user.userAvatarURL}"/>
+<span class="b3-menu__label">${window.siyuan.user.userName}</span>`;
+                        processSync();
+                    });
+                });
+            });
+
+            login2BtnElement.addEventListener("click", () => {
+                fetchPost("/api/setting/login2faCloudUser", {
+                    code: twofactorAuthCodeElement.value,
+                    token,
+                }, faResponse => {
+                    fetchPost("/api/setting/getCloudUser", {
+                        token: faResponse.data.token,
+                    }, response => {
+                        window.siyuan.user = response.data;
+                        closePanel();
+                        document.getElementById("menuAccount").innerHTML = `<img class="b3-menu__icon" src="${window.siyuan.user.userAvatarURL}"/>
+<span class="b3-menu__label">${window.siyuan.user.userName}</span>`;
+                        processSync();
+                    });
+                });
+            });
+        }
+    });
+};
diff --git a/app/src/mobile/settings/ai.ts b/app/src/mobile/settings/ai.ts
new file mode 100644
index 000000000..5c56e5be3
--- /dev/null
+++ b/app/src/mobile/settings/ai.ts
@@ -0,0 +1,14 @@
+import {openModel} from "../util/model";
+import {ai} from "../../config/ai";
+
+export const initAI = () => {
+    openModel({
+        title: "AI",
+        icon: "iconSparkles",
+        html: ai.genHTML(),
+        bindEvent(modelMainElement: HTMLElement) {
+            ai.element = modelMainElement;
+            ai.bindEvent();
+        }
+    })
+}
diff --git a/app/src/mobile/settings/appearance.ts b/app/src/mobile/settings/appearance.ts
index f400c11cd..acded9881 100644
--- a/app/src/mobile/settings/appearance.ts
+++ b/app/src/mobile/settings/appearance.ts
@@ -2,12 +2,13 @@ import {fetchPost} from "../../util/fetch";
 import {setInlineStyle} from "../../util/assets";
 import {genOptions} from "../../util/genOptions";
 import {reloadProtyle} from "../../protyle/util/reload";
+import {openModel} from "../util/model";
 
-export const initAppearance = (modelElement: HTMLElement, modelMainElement: HTMLElement) => {
-    modelElement.style.top = "0";
-    modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconTheme"></use>';
-    modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.appearance;
-    modelMainElement.innerHTML = `<div class="b3-label">
+export const initAppearance = () => {
+    openModel({
+        title: window.siyuan.languages.appearance,
+        icon:"iconTheme",
+        html: `<div class="b3-label">
     ${window.siyuan.languages.appearance4}
     <div class="fn__hr"></div>
     <select class="b3-select fn__block" id="mode">
@@ -49,29 +50,34 @@ export const initAppearance = (modelElement: HTMLElement, modelMainElement: HTML
     <div class="fn__hr"></div>
     <input class="b3-slider fn__block" max="72" min="9" step="1" type="range" value="${window.siyuan.config.editor.fontSize}">
     <div class="b3-label__text">${window.siyuan.languages.fontSizeTip}</div>
-</div>`;
-    modelMainElement.querySelector(".b3-slider").addEventListener("input", (event: InputEvent & { target: HTMLInputElement }) => {
-        modelMainElement.querySelector("#fontSize").textContent = event.target.value + "px";
-        window.siyuan.config.editor.fontSize = parseInt(event.target.value);
-        fetchPost("/api/setting/setEditor", window.siyuan.config.editor, (response) => {
-            window.siyuan.config.editor = response.data;
-            reloadProtyle(window.siyuan.mobile.editor.protyle);
-            setInlineStyle();
-        });
-    });
-    modelMainElement.querySelectorAll("select").forEach(item => {
-        item.addEventListener("change", () => {
-            const modeElementValue = parseInt((modelMainElement.querySelector("#mode") as HTMLSelectElement).value);
-            fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
-                icon: (modelMainElement.querySelector("#icon") as HTMLSelectElement).value,
-                mode: modeElementValue === 2 ? window.siyuan.config.appearance.mode : modeElementValue,
-                modeOS: modeElementValue === 2,
-                themeDark: (modelMainElement.querySelector("#themeDark") as HTMLSelectElement).value,
-                themeLight: (modelMainElement.querySelector("#themeLight") as HTMLSelectElement).value,
-                lang: (modelMainElement.querySelector("#lang") as HTMLSelectElement).value,
-            }), () => {
-                window.location.reload();
+</div>`,
+        bindEvent(modelMainElement: HTMLElement) {
+            modelMainElement.querySelector(".b3-slider").addEventListener("input", (event: InputEvent & {
+                target: HTMLInputElement
+            }) => {
+                modelMainElement.querySelector("#fontSize").textContent = event.target.value + "px";
+                window.siyuan.config.editor.fontSize = parseInt(event.target.value);
+                fetchPost("/api/setting/setEditor", window.siyuan.config.editor, (response) => {
+                    window.siyuan.config.editor = response.data;
+                    reloadProtyle(window.siyuan.mobile.editor.protyle);
+                    setInlineStyle();
+                });
             });
-        });
+            modelMainElement.querySelectorAll("select").forEach(item => {
+                item.addEventListener("change", () => {
+                    const modeElementValue = parseInt((modelMainElement.querySelector("#mode") as HTMLSelectElement).value);
+                    fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
+                        icon: (modelMainElement.querySelector("#icon") as HTMLSelectElement).value,
+                        mode: modeElementValue === 2 ? window.siyuan.config.appearance.mode : modeElementValue,
+                        modeOS: modeElementValue === 2,
+                        themeDark: (modelMainElement.querySelector("#themeDark") as HTMLSelectElement).value,
+                        themeLight: (modelMainElement.querySelector("#themeLight") as HTMLSelectElement).value,
+                        lang: (modelMainElement.querySelector("#lang") as HTMLSelectElement).value,
+                    }), () => {
+                        window.location.reload();
+                    });
+                });
+            });
+        }
     });
 };
diff --git a/app/src/mobile/settings/riffCard.ts b/app/src/mobile/settings/riffCard.ts
new file mode 100644
index 000000000..13679101e
--- /dev/null
+++ b/app/src/mobile/settings/riffCard.ts
@@ -0,0 +1,14 @@
+import {openModel} from "../util/model";
+import {flashcard} from "../../config/flashcard";
+
+export const initRiffCard = () => {
+    openModel({
+        title: window.siyuan.languages.riffCard,
+        icon: "iconRiffCard",
+        html: flashcard.genHTML(),
+        bindEvent(modelMainElement: HTMLElement) {
+            flashcard.element = modelMainElement;
+            flashcard.bindEvent();
+        }
+    });
+};
diff --git a/app/src/mobile/util/MobileTags.ts b/app/src/mobile/util/MobileTags.ts
index 222ce3685..81a9aba0f 100644
--- a/app/src/mobile/util/MobileTags.ts
+++ b/app/src/mobile/util/MobileTags.ts
@@ -67,7 +67,7 @@ export class MobileTags {
                 } else {
                     const modelElement = document.getElementById("model");
                     const modelMainElement = document.getElementById("modelMain");
-                    popSearch(modelElement, modelMainElement);
+                    popSearch();
                     (document.getElementById("toolbarSearch") as HTMLInputElement).value = `#${element.getAttribute("data-label")}#`;
                     toolbarSearchEvent();
                 }
diff --git a/app/src/mobile/util/menu.ts b/app/src/mobile/util/menu.ts
index 32ab38b08..c6aae01df 100644
--- a/app/src/mobile/util/menu.ts
+++ b/app/src/mobile/util/menu.ts
@@ -1,118 +1,19 @@
-import {fetchPost} from "../../util/fetch";
-import {getEventName, openByMobile, writeText} from "../../protyle/util/compatibility";
 import {popSearch} from "./search";
 import {initAppearance} from "../settings/appearance";
 import {closePanel} from "./closePanel";
-import {Constants} from "../../constants";
-import {setAccessAuthCode} from "../../config/util/setAccessAuthCode";
 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, processSync} from "../../dialog/processSystem";
-import {confirmDialog} from "../../dialog/confirmDialog";
 import {openHistory} from "../../history/history";
-import {Dialog} from "../../dialog";
 import {syncGuide} from "../../sync/syncGuide";
 import {openCard} from "../../card/openCard";
-import {pathPosix} from "../../util/pathName";
 import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar";
+import {initAI} from "../settings/ai";
+import {initRiffCard} from "../settings/riffCard";
+import {login, showAccountInfo} from "../settings/account";
+import {openModel} from "./model";
+import {initAbout} from "../settings/about";
 
-const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) => {
-    let userTitlesHTML = "";
-    if (window.siyuan.user.userTitles.length > 0) {
-        userTitlesHTML = '<div class="b3-chips" style="position: absolute">';
-        window.siyuan.user.userTitles.forEach((item) => {
-            userTitlesHTML += `<div class="b3-chip b3-chip--middle">${item.icon} ${item.name}</div>`;
-        });
-        userTitlesHTML += "</div>";
-    }
-    modelElement.style.top = "0";
-    modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconAccount"></use>';
-    modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.accountManage;
-    modelMainElement.innerHTML = `<div class="fn__flex-column">
-<div class="config-account__bg">
-    <div class="config-account__cover" style="background-image: url(${window.siyuan.user.userHomeBImgURL})"></div>
-    <a href="https://ld246.com/settings/avatar" class="config-account__avatar" style="background-image: url(${window.siyuan.user.userAvatarURL})" target="_blank"></a>
-    <h1 class="config-account__name">
-        <a target="_blank" class="fn__a" href="https://ld246.com/member/${window.siyuan.user.userName}">${window.siyuan.user.userName}</a>
-    </h1>
-    ${userTitlesHTML}
-</div>
-<div class="config-account__info">
-    <div class="fn__flex">
-        <a class="b3-button b3-button--text" href="https://ld246.com/settings" target="_blank">${window.siyuan.languages.accountManage}</a>
-        <span class="fn__space"></span>
-        <button class="b3-button b3-button--cancel" id="logout">
-            ${window.siyuan.languages.logout}
-        </button>
-        <span class="fn__space"></span>
-        <button class="b3-button b3-button--cancel" id="deactivateUser">
-            ${window.siyuan.languages.deactivateUser}
-        </button>
-        <span class="fn__flex-1"></span>
-        <button class="b3-button b3-button--cancel" id="refresh">
-            <svg><use xlink:href="#iconRefresh"></use></svg>
-        </button>
-    </div>
-</div></div>`;
-
-    modelMainElement.querySelector("#logout").addEventListener(getEventName(), () => {
-        fetchPost("/api/setting/logoutCloudUser", {}, () => {
-            window.siyuan.user = null;
-            closePanel();
-            document.getElementById("menuAccount").innerHTML = `<svg class="b3-menu__icon"><use xlink:href="#iconAccount"></use></svg><span class="b3-menu__label">${window.siyuan.languages.login}</span>`;
-            processSync();
-        });
-    });
-    modelMainElement.querySelector("#deactivateUser").addEventListener(getEventName(), () => {
-        confirmDialog("⚠️ " + window.siyuan.languages.deactivateUser, window.siyuan.languages.deactivateUserTip, () => {
-            fetchPost("/api/account/deactivate", {}, () => {
-                window.siyuan.user = null;
-                closePanel();
-                document.getElementById("menuAccount").innerHTML = `<svg class="b3-menu__icon"><use xlink:href="#iconAccount"></use></svg><span class="b3-menu__label">${window.siyuan.languages.login}</span>`;
-                processSync();
-            });
-        });
-    });
-    const refreshElement = modelMainElement.querySelector("#refresh");
-    refreshElement.addEventListener("click", () => {
-        const svgElement = refreshElement.firstElementChild;
-        if (svgElement.classList.contains("fn__rotate")) {
-            return;
-        }
-        svgElement.classList.add("fn__rotate");
-        fetchPost("/api/setting/getCloudUser", {
-            token: window.siyuan.user.userToken,
-        }, response => {
-            window.siyuan.user = response.data;
-            showMessage(window.siyuan.languages.refreshUser, 3000);
-            showAccountInfo(modelElement, modelMainElement);
-            const menuAccountElement = document.getElementById("menuAccount");
-            if (window.siyuan.user) {
-                menuAccountElement.innerHTML = `<img class="b3-menu__icon" src="${window.siyuan.user.userAvatarURL}"/><span class="b3-menu__label">${window.siyuan.user.userName}</span>`;
-            } else {
-                menuAccountElement.innerHTML = `<svg class="b3-menu__icon"><use xlink:href="#iconAccount"></use></svg><span class="b3-menu__label">${window.siyuan.languages.login}</span>`;
-            }
-            processSync();
-        });
-    });
-};
-
-const genWorkspace = (workspaceDirElement: Element) => {
-    fetchPost("/api/system/getWorkspaces", {}, (response) => {
-        let html = "";
-        response.data.forEach((item: IWorkspace) => {
-            html += `<li data-path="${item.path}" class="b3-list-item b3-list-item--narrow${window.siyuan.config.system.workspaceDir === item.path ? " b3-list-item--focus" : ""}">
-    <span class="b3-list-item__text">${pathPosix().basename(item.path)}</span>
-    <span data-type="remove" class="b3-list-item__action">
-        <svg><use xlink:href="#iconMin"></use></svg>
-    </span>
-</li>`;
-        });
-        workspaceDirElement.innerHTML = html;
-    });
-};
 export const popMenu = () => {
     activeBlur();
     hideKeyboardToolbar();
@@ -161,6 +62,12 @@ ${accountHTML}
     <svg class="b3-menu__icon"><use xlink:href="#iconHistory"></use></svg><span class="b3-menu__label">${window.siyuan.languages.dataHistory}</span>
 </div>
 <div class="b3-menu__separator"></div>
+<div class="b3-menu__item${window.siyuan.config.readonly ? " fn__none" : ""}" id="menuRiffCard">
+    <svg class="b3-menu__icon"><use xlink:href="#iconRiffCard"></use></svg><span class="b3-menu__label">${window.siyuan.languages.riffCard}</span>
+</div>
+<div class="b3-menu__item${window.siyuan.config.readonly ? " fn__none" : ""}" id="menuAI">
+    <svg class="b3-menu__icon"><use xlink:href="#iconSparkles"></use></svg><span class="b3-menu__label">AI</span>
+</div>
 <div class="b3-menu__item${window.siyuan.config.readonly ? " fn__none" : ""}" id="menuAppearance">
     <svg class="b3-menu__icon"><use xlink:href="#iconTheme"></use></svg><span class="b3-menu__label">${window.siyuan.languages.appearance}</span>
 </div>
@@ -182,10 +89,8 @@ ${accountHTML}
 <div class="b3-menu__item${(window.webkit?.messageHandlers || window.JSAndroid) ? "" : " fn__none"}" id="menuSafeQuit">
     <svg class="b3-menu__icon"><use xlink:href="#iconQuit"></use></svg><span class="b3-menu__label">${window.siyuan.languages.safeQuit}</span>
 </div>`;
-    // 只能用 click，否则无法上下滚动 https://github.com/siyuan-note/siyuan/issues/6628
     processSync();
-    const modelElement = document.getElementById("model");
-    const modelMainElement = document.getElementById("modelMain");
+    // 只能用 click，否则无法上下滚动 https://github.com/siyuan-note/siyuan/issues/6628
     menuElement.addEventListener("click", (event) => {
         let target = event.target as HTMLElement;
         while (target && !target.isEqualNode(menuElement)) {
@@ -195,12 +100,22 @@ ${accountHTML}
                 event.stopPropagation();
                 break;
             } else if (target.id === "menuSearch") {
-                popSearch(modelElement, modelMainElement);
+                popSearch();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
             } else if (target.id === "menuAppearance") {
-                initAppearance(modelElement, modelMainElement);
+                initAppearance();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            } else if (target.id === "menuAI") {
+                initAI();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            } else if (target.id === "menuRiffCard") {
+                initRiffCard();
                 event.preventDefault();
                 event.stopPropagation();
                 break;
@@ -243,12 +158,15 @@ ${accountHTML}
                 event.stopPropagation();
                 break;
             } else if (target.id === "menuSync") {
-                modelElement.style.top = "0";
-                modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconCloud"></use>';
-                modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.cloud;
-                modelMainElement.innerHTML = repos.genHTML();
-                repos.element = modelMainElement;
-                repos.bindEvent();
+                openModel({
+                    title: window.siyuan.languages.cloud,
+                    icon: "iconCloud",
+                    html: repos.genHTML(),
+                    bindEvent(modelMainElement: HTMLElement) {
+                        repos.element = modelMainElement;
+                        repos.bindEvent();
+                    }
+                });
                 event.preventDefault();
                 event.stopPropagation();
                 break;
@@ -267,127 +185,10 @@ ${accountHTML}
                 event.preventDefault();
                 event.stopPropagation();
                 if (document.querySelector("#menuAccount img")) {
-                    showAccountInfo(modelElement, modelMainElement);
+                    showAccountInfo();
                     return;
                 }
-                modelElement.style.top = "0";
-                modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconAccount"></use>';
-                modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.login;
-                modelMainElement.innerHTML = `<div class="b3-form__space" id="form1">
-    <div class="b3-form__icon">
-        <svg class="b3-form__icon-icon"><use xlink:href="#iconAccount"></use></svg>
-        <input id="userName" class="b3-text-field fn__block b3-form__icon-input" placeholder="${window.siyuan.languages.accountName}">
-    </div>
-    <div class="fn__hr--b"></div>
-    <div class="b3-form__icon">
-        <svg class="b3-form__icon-icon"><use xlink:href="#iconLock"></use></svg>
-        <input type="password" id="userPassword" class="b3-text-field b3-form__icon-input fn__block" placeholder="${window.siyuan.languages.password}">
-    </div>
-    <div class="b3-form__img fn__none">
-        <div class="fn__hr--b"></div>
-        <img id="captchaImg" class="fn__pointer" style="top: 17px">
-        <input id="captcha" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.captcha}">
-    </div>
-    <div class="fn__hr--b"></div>
-    <label class="ft__smaller ft__on-surface fn__flex">
-        <span class="fn__space"></span>
-        <input type="checkbox" class="b3-switch fn__flex-center" id="agreeLogin">
-        <span class="fn__space"></span>
-        <span>${window.siyuan.languages.accountTip}</span>
-    </label>
-    <div class="fn__hr--b"></div>
-    <button id="login" disabled class="b3-button fn__block">${window.siyuan.languages.login}</button>
-    <div class="fn__hr--b"></div>
-    <div class="ft__center">
-        <a href="https://ld246.com/forget-pwd" class="b3-button b3-button--cancel" target="_blank">${window.siyuan.languages.forgetPassword}</a>
-        <span class="fn__space${window.siyuan.config.system.container === "ios" ? " fn__none" : ""}"></span>
-        <a href="https://ld246.com/register" class="b3-button b3-button--cancel${window.siyuan.config.system.container === "ios" ? " fn__none" : ""}" target="_blank">${window.siyuan.languages.register}</a>
-    </div>
-</div>
-<div class="b3-form__space fn__none" id="form2">
-    <div class="b3-form__icon">
-        <svg class="b3-form__icon-icon"><use xlink:href="#iconLock"></use></svg>
-        <input id="twofactorAuthCode" class="b3-text-field fn__block b3-form__icon-input" placeholder="${window.siyuan.languages.twoFactorCaptcha}">
-    </div>
-    <div class="fn__hr--b"></div>
-    <button id="login2" class="b3-button fn__block">${window.siyuan.languages.login}</button>
-</div>`;
-                const agreeLoginElement = modelMainElement.querySelector("#agreeLogin") as HTMLInputElement;
-                const userNameElement = modelMainElement.querySelector("#userName") as HTMLInputElement;
-                const userPasswordElement = modelMainElement.querySelector("#userPassword") as HTMLInputElement;
-                const captchaImgElement = modelMainElement.querySelector("#captchaImg") as HTMLInputElement;
-                const captchaElement = modelMainElement.querySelector("#captcha") as HTMLInputElement;
-                const twofactorAuthCodeElement = modelMainElement.querySelector("#twofactorAuthCode") as HTMLInputElement;
-                const loginBtnElement = modelMainElement.querySelector("#login") as HTMLButtonElement;
-                const login2BtnElement = modelMainElement.querySelector("#login2") as HTMLButtonElement;
-                userNameElement.focus();
-                let token: string;
-                let needCaptcha: string;
-                agreeLoginElement.addEventListener("click", () => {
-                    if (agreeLoginElement.checked) {
-                        loginBtnElement.removeAttribute("disabled");
-                    } else {
-                        loginBtnElement.setAttribute("disabled", "disabled");
-                    }
-                });
-                captchaImgElement.addEventListener("click", () => {
-                    captchaImgElement.setAttribute("src", `https://ld246.com/captcha/login?needCaptcha=${needCaptcha}&t=${new Date().getTime()}`);
-                });
-                loginBtnElement.addEventListener("click", () => {
-                    fetchPost("/api/account/login", {
-                        userName: userNameElement.value.replace(/(^\s*)|(\s*$)/g, ""),
-                        userPassword: md5(userPasswordElement.value),
-                        captcha: captchaElement.value.replace(/(^\s*)|(\s*$)/g, ""),
-                    }, (data) => {
-                        if (data.code === 1) {
-                            showMessage(data.msg);
-                            if (data.data.needCaptcha) {
-                                // 验证码
-                                needCaptcha = data.data.needCaptcha;
-                                captchaElement.parentElement.classList.remove("fn__none");
-                                captchaElement.previousElementSibling.setAttribute("src",
-                                    `https://ld246.com/captcha/login?needCaptcha=${data.data.needCaptcha}`);
-                                captchaElement.value = "";
-                                return;
-                            }
-                            return;
-                        }
-                        if (data.code === 10) {
-                            // 两步验证
-                            modelMainElement.querySelector("#form1").classList.add("fn__none");
-                            modelMainElement.querySelector("#form2").classList.remove("fn__none");
-                            twofactorAuthCodeElement.focus();
-                            token = data.data.token;
-                            return;
-                        }
-                        fetchPost("/api/setting/getCloudUser", {
-                            token: data.data.token,
-                        }, response => {
-                            window.siyuan.user = response.data;
-                            closePanel();
-                            document.getElementById("menuAccount").innerHTML = `<img class="b3-menu__icon" src="${window.siyuan.user.userAvatarURL}"/>
-<span class="b3-menu__label">${window.siyuan.user.userName}</span>`;
-                            processSync();
-                        });
-                    });
-                });
-
-                login2BtnElement.addEventListener("click", () => {
-                    fetchPost("/api/setting/login2faCloudUser", {
-                        code: twofactorAuthCodeElement.value,
-                        token,
-                    }, faResponse => {
-                        fetchPost("/api/setting/getCloudUser", {
-                            token: faResponse.data.token,
-                        }, response => {
-                            window.siyuan.user = response.data;
-                            closePanel();
-                            document.getElementById("menuAccount").innerHTML = `<img class="b3-menu__icon" src="${window.siyuan.user.userAvatarURL}"/>
-<span class="b3-menu__label">${window.siyuan.user.userName}</span>`;
-                            processSync();
-                        });
-                    });
-                });
+                login();
                 break;
             }
             target = target.parentElement;
@@ -395,361 +196,3 @@ ${accountHTML}
     });
     menuElement.style.right = "0";
 };
-
-const initAbout = () => {
-    if (!window.siyuan.config.localIPs || window.siyuan.config.localIPs.length === 0 ||
-        (window.siyuan.config.localIPs.length === 1 && window.siyuan.config.localIPs[0] === "")) {
-        window.siyuan.config.localIPs = ["127.0.0.1"];
-    }
-    const modelElement = document.getElementById("model");
-    const modelMainElement = document.getElementById("modelMain");
-
-    modelElement.style.top = "0";
-    modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconInfo"></use>';
-    modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.about;
-    modelMainElement.innerHTML = `<div class="b3-label fn__flex${window.siyuan.config.readonly ? " fn__none" : ""}">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.about11}
-        <div class="b3-label__text">${window.siyuan.languages.about12}</div>
-    </div>
-    <div class="fn__space"></div>
-    <input class="b3-switch fn__flex-center" id="networkServe" type="checkbox"${window.siyuan.config.system.networkServe ? " checked" : ""}>
-</div>
-<div class="b3-label">
-       ${window.siyuan.languages.about2}
-       <div class="fn__hr"></div>
-       <input class="b3-text-field fn__block" readonly value="http://${window.siyuan.config.system.networkServe ? window.siyuan.config.localIPs[0] : "127.0.0.1"}:${location.port}">
-       <div class="b3-label__text">${window.siyuan.languages.about3.replace("${port}", location.port)}</div>
-       <div class="fn__hr"></div>
-       <span class="b3-label__text"><code class="fn__code">${window.siyuan.config.localIPs.join("</code> <code class='fn__code'>")}</code></span>
-</div>
-<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
-    ${window.siyuan.languages.about5}
-    <div class="fn__hr"></div>
-    <button class="b3-button b3-button--outline fn__block" id="authCode">
-        <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.config}
-    </button>
-    <div class="b3-label__text">${window.siyuan.languages.about6}</div>
-</div>
-<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
-    ${window.siyuan.languages.dataRepoKey}
-    <div class="fn__hr"></div>
-    <div class="${window.siyuan.config.repo.key ? "fn__none" : ""}">
-        <button class="b3-button b3-button--outline fn__block" id="importKey">
-            <svg><use xlink:href="#iconDownload"></use></svg>${window.siyuan.languages.importKey}
-        </button>
-        <div class="fn__hr"></div>
-        <button class="b3-button b3-button--outline fn__block" id="initKey">
-            <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.genKey}
-        </button>
-        <div class="fn__hr"></div>
-        <button class="b3-button b3-button--outline fn__block" id="initKeyByPW">
-            ${window.siyuan.languages.genKeyByPW}
-        </button>
-    </div>
-    <div class="${window.siyuan.config.repo.key ? "" : "fn__none"}">
-        <button class="b3-button b3-button--outline fn__block" id="copyKey">
-            <svg><use xlink:href="#iconCopy"></use></svg>${window.siyuan.languages.copyKey}
-        </button>
-        <div class="fn__hr"></div>
-        <button class="b3-button b3-button--outline fn__block" id="removeKey">
-            <svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.resetRepo}
-        </button>
-    </div>
-    <div class="b3-label__text">${window.siyuan.languages.dataRepoKeyTip1}</div>
-    <div class="b3-label__text ft__error">${window.siyuan.languages.dataRepoKeyTip2}</div>
-</div>
-<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
-    ${window.siyuan.languages.about13}
-    <span class="b3-label__text">${window.siyuan.config.api.token}</span>
-    <div class="fn__hr"></div>
-    <button class="b3-button b3-button--outline fn__block" id="token">
-        <svg><use xlink:href="#iconCopy"></use></svg>${window.siyuan.languages.copy}
-    </button>
-    <div class="b3-label__text">${window.siyuan.languages.about14}</div>
-</div>
-<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
-    <div class="fn__flex">
-        ${window.siyuan.languages.export}
-    </div>
-    <div class="fn__hr"></div>
-    <button class="b3-button b3-button--outline fn__block" id="exportData">
-       <svg><use xlink:href="#iconUpload"></use></svg>Data
-    </button>
-    <div class="fn__hr"></div>
-    <div class="b3-label__text">${window.siyuan.languages.exportDataTip}</div>
-    <div class="fn__hr--b"></div>
-    <button class="b3-button b3-button--outline fn__block" id="exportLog">
-       <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.systemLog}
-    </button>
-    <div class="fn__hr"></div>
-    <div class="b3-label__text">${window.siyuan.languages.systemLogTip}</div>
-</div>
-<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
-    <div class="fn__flex">
-        ${window.siyuan.languages.import}
-    </div>
-    <div class="fn__hr"></div>
-    <button class="b3-button b3-button--outline fn__block" style="position: relative">
-        <input id="importData" class="b3-form__upload" type="file">
-        <svg><use xlink:href="#iconDownload"></use></svg> ${window.siyuan.languages.import} Data
-    </button>
-    <div class="fn__hr"></div>
-    <div class="b3-label__text">${window.siyuan.languages.importDataTip}</div>
-</div>
-<div class="b3-label${window.siyuan.config.readonly ? " fn__none" : ""}">
-    ${window.siyuan.languages.workspaceList}
-    <div class="fn__hr"></div>
-    <button id="openWorkspace" class="b3-button b3-button--outline fn__block">${window.siyuan.languages.openBy}...</button>
-    <div class="fn__hr"></div>
-    <ul id="workspaceDir" class="b3-list b3-list--background"></ul>
-    <div class="fn__hr"></div>
-    <button id="creatWorkspace" class="b3-button fn__block">${window.siyuan.languages.new}</button>
-</div>
-<div class="b3-label">
-    <div class="config-about__logo">
-        <img src="/stage/icon.png">
-        <span class="fn__space"></span>
-        <div>
-            <span>${window.siyuan.languages.siyuanNote}</span>
-            <span class="fn__space"></span>
-            <span class="ft__on-surface">v${Constants.SIYUAN_VERSION}</span>
-            <br>
-            <span class="ft__on-surface">${window.siyuan.languages.slogan}</span>
-        </div>
-    </div>
-    <div style="color:var(--b3-theme-surface);font-family: cursive;">会泽百家&nbsp;至公天下</div>
-    ${window.siyuan.languages.about1}
-</div>`;
-    const workspaceDirElement = modelMainElement.querySelector("#workspaceDir");
-    genWorkspace(workspaceDirElement);
-    const importKeyElement = modelMainElement.querySelector("#importKey");
-    modelMainElement.addEventListener("click", (event) => {
-        let target = event.target as HTMLElement;
-        while (target && !target.isSameNode(modelMainElement)) {
-            if (target.id === "authCode") {
-                setAccessAuthCode();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "importKey") {
-                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: "80vw",
-                });
-                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}, () => {
-                        window.siyuan.config.repo.key = textAreaElement.value;
-                        importKeyElement.parentElement.classList.add("fn__none");
-                        importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-                        passwordDialog.destroy();
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "initKey") {
-                confirmDialog("🔑 " + window.siyuan.languages.genKey, window.siyuan.languages.initRepoKeyTip, () => {
-                    fetchPost("/api/repo/initRepoKey", {}, (response) => {
-                        window.siyuan.config.repo.key = response.data.key;
-                        importKeyElement.parentElement.classList.add("fn__none");
-                        importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "initKeyByPW") {
-                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: "80vw",
-                });
-                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) => {
-                            window.siyuan.config.repo.key = response.data.key;
-                            importKeyElement.parentElement.classList.add("fn__none");
-                            importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-                        });
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "copyKey") {
-                showMessage(window.siyuan.languages.copied);
-                writeText(window.siyuan.config.repo.key);
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "removeKey") {
-                confirmDialog("⚠️ " + window.siyuan.languages.resetRepo, window.siyuan.languages.resetRepoTip, () => {
-                    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");
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "token") {
-                showMessage(window.siyuan.languages.copied);
-                writeText(window.siyuan.config.api.token);
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "exportData") {
-                fetchPost("/api/export/exportData", {}, response => {
-                    openByMobile(response.data.zip);
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "exportLog") {
-                fetchPost("/api/system/exportLog", {}, (response) => {
-                    openByMobile(response.data.zip);
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "openWorkspace") {
-                fetchPost("/api/system/getMobileWorkspaces", {}, (response) => {
-                    let selectHTML = "";
-                    response.data.forEach((item: string, index: number) => {
-                        selectHTML += `<option value="${item}"${index === 0 ? ' selected="selected"' : ""}>${pathPosix().basename(item)}</option>`;
-                    });
-                    const openWorkspaceDialog = new Dialog({
-                        title: window.siyuan.languages.openBy,
-                        content: `<div class="b3-dialog__content">
-    <select class="b3-text-field fn__block">${selectHTML}</select>
-</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: "80vw",
-                    });
-                    const btnsElement = openWorkspaceDialog.element.querySelectorAll(".b3-button");
-                    btnsElement[0].addEventListener("click", () => {
-                        openWorkspaceDialog.destroy();
-                    });
-                    btnsElement[1].addEventListener("click", () => {
-                        const openPath = openWorkspaceDialog.element.querySelector("select").value;
-                        if (openPath === window.siyuan.config.system.workspaceDir) {
-                            openWorkspaceDialog.destroy();
-                            return;
-                        }
-                        confirmDialog(window.siyuan.languages.confirm, `${pathPosix().basename(window.siyuan.config.system.workspaceDir)} -> ${pathPosix().basename(openPath)}?`, () => {
-                            fetchPost("/api/system/setWorkspaceDir", {
-                                path: openPath
-                            }, () => {
-                                exitSiYuan();
-                            });
-                        });
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.id === "creatWorkspace") {
-                const createWorkspaceDialog = new Dialog({
-                    title: window.siyuan.languages.new,
-                    content: `<div class="b3-dialog__content">
-    <input class="b3-text-field fn__block">
-</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: "80vw",
-                });
-                const inputElement = createWorkspaceDialog.element.querySelector("input");
-                inputElement.focus();
-                const btnsElement = createWorkspaceDialog.element.querySelectorAll(".b3-button");
-                btnsElement[0].addEventListener("click", () => {
-                    createWorkspaceDialog.destroy();
-                });
-                btnsElement[1].addEventListener("click", () => {
-                    fetchPost("/api/system/createWorkspaceDir", {
-                        path: pathPosix().join(pathPosix().dirname(window.siyuan.config.system.workspaceDir), inputElement.value)
-                    }, () => {
-                        genWorkspace(workspaceDirElement);
-                        createWorkspaceDialog.destroy();
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.getAttribute("data-type") === "remove") {
-                fetchPost("/api/system/removeWorkspaceDir", {path: target.parentElement.getAttribute("data-path")}, () => {
-                    genWorkspace(workspaceDirElement);
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            } else if (target.classList.contains("b3-list-item") && !target.classList.contains("b3-list-item--focus")) {
-                confirmDialog(window.siyuan.languages.confirm, `${pathPosix().basename(window.siyuan.config.system.workspaceDir)} -> ${pathPosix().basename(target.getAttribute("data-path"))}?`, () => {
-                    fetchPost("/api/system/setWorkspaceDir", {
-                        path: target.getAttribute("data-path")
-                    }, () => {
-                        exitSiYuan();
-                    });
-                });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            target = target.parentElement;
-        }
-    });
-    modelMainElement.querySelector("#importData").addEventListener("change", (event: InputEvent & {
-        target: HTMLInputElement
-    }) => {
-        const formData = new FormData();
-        formData.append("file", event.target.files[0]);
-        fetchPost("/api/import/importData", formData);
-    });
-    const networkServeElement = modelMainElement.querySelector("#networkServe") as HTMLInputElement;
-    networkServeElement.addEventListener("change", () => {
-        fetchPost("/api/system/setNetworkServe", {networkServe: networkServeElement.checked}, () => {
-            exitSiYuan();
-        });
-    });
-};
diff --git a/app/src/mobile/util/model.ts b/app/src/mobile/util/model.ts
new file mode 100644
index 000000000..da0ccbb67
--- /dev/null
+++ b/app/src/mobile/util/model.ts
@@ -0,0 +1,14 @@
+export const openModel = (obj: {
+    html: string,
+    icon: string,
+    title: string,
+    bindEvent: (element: HTMLElement) => void
+}) => {
+    const modelElement = document.getElementById("model")
+    modelElement.style.top = "0";
+    modelElement.querySelector(".toolbar__icon use").setAttribute("xlink:href", "#" + obj.icon);
+    modelElement.querySelector(".toolbar__text").innerHTML = obj.title
+    const modelMainElement = modelElement.querySelector("#modelMain") as HTMLElement;
+    modelMainElement.innerHTML = obj.html;
+    obj.bindEvent(modelMainElement);
+}
diff --git a/app/src/mobile/util/search.ts b/app/src/mobile/util/search.ts
index c2e5b82a0..72a31bc06 100644
--- a/app/src/mobile/util/search.ts
+++ b/app/src/mobile/util/search.ts
@@ -5,6 +5,7 @@ import {fetchPost} from "../../util/fetch";
 import {getIconByType} from "../../editor/getIcon";
 import {preventScroll} from "../../protyle/scroll/preventScroll";
 import {setStorageVal} from "../../protyle/util/compatibility";
+import {openModel} from "./model";
 
 const onRecentBlocks = (data: IBlock[], matchedRootCount?:number, matchedBlockCount?:number) => {
     let resultHTML = "";
@@ -61,32 +62,35 @@ const initToolbarSearch = () => {
     });
 };
 
-export const popSearch = (modelElement: HTMLElement, modelMainElement: HTMLElement) => {
-    modelElement.style.top = "0";
-    modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconSearch"></use>';
-    modelElement.querySelector(".toolbar__text").innerHTML = '<input id="toolbarSearch" style="background-color: var(--b3-theme-surface);border: 0;" class="b3-text-field fn__block">';
-    modelMainElement.innerHTML = '<div id="searchPanel"></div>';
-    initToolbarSearch();
-    const searchElement = document.getElementById("searchPanel");
-    // 不能使用 getEventName() https://ld246.com/article/1638887457149
-    searchElement.addEventListener("click", (event) => {
-        let target = event.target as HTMLElement;
-        while (target && !target.isEqualNode(searchElement)) {
-            if (target.classList.contains("b3-list-item")) {
-                const id = target.getAttribute("data-id");
-                if (window.siyuan.mobile.editor.protyle) {
-                    preventScroll(window.siyuan.mobile.editor.protyle);
+export const popSearch = () => {
+    openModel({
+        title: '<input id="toolbarSearch" style="background-color: var(--b3-theme-surface);border: 0;" class="b3-text-field fn__block">',
+        icon:"iconSearch",
+        html: '<div id="searchPanel"></div>',
+        bindEvent(modelMainElement: HTMLElement) {
+            initToolbarSearch();
+            const searchElement = document.getElementById("searchPanel");
+            // 不能使用 getEventName() https://ld246.com/article/1638887457149
+            searchElement.addEventListener("click", (event) => {
+                let target = event.target as HTMLElement;
+                while (target && !target.isEqualNode(searchElement)) {
+                    if (target.classList.contains("b3-list-item")) {
+                        const id = target.getAttribute("data-id");
+                        if (window.siyuan.mobile.editor.protyle) {
+                            preventScroll(window.siyuan.mobile.editor.protyle);
+                        }
+                        fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => {
+                            openMobileFileById(id,foldResponse.data ? [Constants.CB_GET_ALL, Constants.CB_GET_HL] : [Constants.CB_GET_HL, Constants.CB_GET_CONTEXT]);
+                        });
+                        closePanel();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    }
+                    target = target.parentElement;
                 }
-                fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => {
-                    openMobileFileById(id,foldResponse.data ? [Constants.CB_GET_ALL, Constants.CB_GET_HL] : [Constants.CB_GET_HL, Constants.CB_GET_CONTEXT]);
-                });
-                closePanel();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            target = target.parentElement;
+            }, false);
+            toolbarSearchEvent();
         }
-    }, false);
-    toolbarSearchEvent();
+    })
 };