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

app/src/assets/scss/_chip.scss

@@ -15,10 +15,6 @@ a.b3-chip:hover {
   border-radius: 16px;
   transition: var(--b3-transition);
 
-  &--small {
-    line-height: 20px;
-  }
-
   &--secondary {
     background-color: var(--b3-theme-secondary);
     color: var(--b3-theme-on-secondary);

app/src/config/about.ts

@@ -5,7 +5,7 @@ import {dialog} from "@electron/remote";
 /// #endif
 import {isBrowser} from "../util/functions";
 import {fetchPost} from "../util/fetch";
-import {setAccessAuthCode} from "./util";
+import {setAccessAuthCode} from "./util/setAccessAuthCode";
 import {exportLayout} from "../layout/util";
 import {exitSiYuan} from "../dialog/processSystem";
 import {openByMobile, writeText} from "../protyle/util/compatibility";

app/src/config/appearance.ts

@@ -7,9 +7,9 @@ import {exportLayout} from "../layout/util";
 import * as Pickr from "@simonwep/pickr";
 import {isBrowser} from "../util/functions";
 import {fetchPost} from "../util/fetch";
-import {loadAssets, renderSnippet} from "../util/assets";
+import {loadAssets} from "../util/assets";
 import {genOptions} from "../util/genOptions";
-import {hasClosestByClassName} from "../protyle/util/hasClosest";
+import {openSnippets} from "./util/snippets";
 
 export const appearance = {
     element: undefined as Element,
@@ -138,7 +138,6 @@ export const appearance = {
             <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
         </button>
     </label>
-    <div id="codeSnippetPanel"></div>
 </div>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
@@ -264,39 +263,6 @@ export const appearance = {
             }
         });
     },
-    _bindSnippet: (element: HTMLElement) => {
-        const itemContentElement = hasClosestByClassName(element, "b3-label");
-        if (!itemContentElement) {
-            return;
-        }
-        fetchPost("/api/snippet/setSnippet", {
-            id: itemContentElement.getAttribute("data-id"),
-            name: itemContentElement.querySelector("input").value,
-            type: itemContentElement.querySelector(".b3-chip").textContent,
-            content: itemContentElement.querySelector("textarea").value,
-            enabled: (itemContentElement.querySelector(".b3-switch") as HTMLInputElement).checked
-        }, (response) => {
-            itemContentElement.setAttribute("data-id", response.data.id);
-            renderSnippet();
-        });
-    },
-    _genSnippet: (options: ISnippet) => {
-        return `<div class="b3-label" style="margin: 0" data-id="${options.id || ""}">
-    <div class="fn__flex">
-        <div class="b3-chip fn__flex-center b3-chip--small b3-chip--secondary">${options.type}</div>
-        <div class="fn__space"></div>
-        <input type="text" class="fn__size200 b3-text-field" placeholder="${window.siyuan.languages.title}">
-        <div class="fn__flex-1"></div>
-        <span aria-label="${window.siyuan.languages.remove}" class="b3-tooltips b3-tooltips__n block__icon block__icon--show">
-            <svg><use xlink:href="#iconTrashcan"></use></svg>
-        </span>
-        <div class="fn__space"></div>
-        <input data-type="snippet" class="b3-switch fn__flex-center" type="checkbox"${options.enabled ? " checked" : ""}>
-    </div>
-    <div class="fn__hr"></div>
-    <textarea class="fn__block b3-text-field" placeholder="${window.siyuan.languages.codeSnippet}"></textarea>
-</div>`;
-    },
     bindEvent: () => {
         if (window.siyuan.config.appearance.customCSS) {
             fetchPost("/api/setting/getCustomCSS", {
@@ -305,82 +271,8 @@ export const appearance = {
                 appearance.onGetcustomcss(response.data);
             });
         }
-        const codeSnippetPanelElement = appearance.element.querySelector("#codeSnippetPanel");
-        const codeSnippetElement = appearance.element.querySelector("#codeSnippet");
-        codeSnippetElement.addEventListener("click", () => {
-            if (codeSnippetPanelElement.innerHTML) {
-                codeSnippetPanelElement.innerHTML = "";
-                return;
-            }
-            fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
-                let html = `<div class="fn__hr"></div>
-<div class="fn__flex">
-    <div class="fn__flex-1"></div>
-    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetCSS">
-        <svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} CSS
-    </button>
-    <div class="fn__space"></div>
-    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetJS">
-        <svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} JS
-    </button>
-</div>`;
-                response.data.snippets.forEach((item: ISnippet) => {
-                    html += appearance._genSnippet(item);
-                });
-                codeSnippetPanelElement.innerHTML = html;
-                response.data.snippets.forEach((item: ISnippet) => {
-                    const nameElement = (codeSnippetPanelElement.querySelector(`[data-id="${item.id}"] input`) as HTMLInputElement);
-                    nameElement.value = item.name;
-                    const contentElement = codeSnippetPanelElement.querySelector(`[data-id="${item.id}"] textarea`) as HTMLTextAreaElement;
-                    contentElement.textContent = item.content;
-                    nameElement.addEventListener("blur", () => {
-                        appearance._bindSnippet(nameElement);
-                    });
-                    contentElement.addEventListener("blur", () => {
-                        appearance._bindSnippet(contentElement);
-                    });
-                    codeSnippetPanelElement.querySelector(`[data-id="${item.id}"] .b3-switch`).addEventListener("change", () => {
-                        appearance._bindSnippet(contentElement);
-                    });
-                });
-            });
-        });
-        codeSnippetPanelElement.addEventListener("click", (event) => {
-            const target = event.target as HTMLElement;
-            if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") {
-                target.parentElement.insertAdjacentHTML("afterend", appearance._genSnippet({
-                    type: target.id === "addCodeSnippetCSS" ? "css" : "js",
-                    name: "",
-                    content: "",
-                    enabled: false
-                }));
-                codeSnippetPanelElement.querySelector(".b3-text-field").addEventListener("blur", (event) => {
-                    appearance._bindSnippet(event.target as HTMLElement);
-                });
-                codeSnippetPanelElement.querySelector("textarea.b3-text-field").addEventListener("blur", (event) => {
-                    appearance._bindSnippet(event.target as HTMLElement);
-                });
-                codeSnippetPanelElement.querySelector(".b3-switch").addEventListener("change", (event) => {
-                    appearance._bindSnippet(event.target as HTMLElement);
-                });
-                return;
-            }
-            const removeElement = hasClosestByClassName(target, "b3-tooltips");
-            if (removeElement) {
-                const id = removeElement.parentElement.parentElement.getAttribute("data-id");
-                removeElement.parentElement.parentElement.remove();
-                if (!id) {
-                    return;
-                }
-                fetchPost("/api/snippet/removeSnippet", {
-                    id
-                }, (response) => {
-                    const exitElement = document.getElementById(`snippet${response.data.type === "css" ? "CSS" : "JS"}${response.data.id}`) as HTMLScriptElement;
-                    if (exitElement) {
-                        exitElement.remove();
-                    }
-                });
-            }
+        appearance.element.querySelector("#codeSnippet").addEventListener("click", () => {
+            openSnippets()
         });
         const appearanceCustomElement = appearance.element.querySelector("#appearanceCustom");
         appearanceCustomElement.addEventListener("click", () => {

app/src/config/util/setAccessAuthCode.ts

@@ -1,6 +1,6 @@
-import {Dialog} from "../dialog";
-import {isMobile} from "../util/functions";
-import {fetchPost} from "../util/fetch";
+import {Dialog} from "../../dialog";
+import {isMobile} from "../../util/functions";
+import {fetchPost} from "../../util/fetch";
 
 export const setAccessAuthCode = () => {
     const dialog = new Dialog({

app/src/config/util/snippets.ts

@@ -0,0 +1,155 @@
+import {fetchPost} from "../../util/fetch";
+import {hasClosestByClassName} from "../../protyle/util/hasClosest";
+import {Dialog} from "../../dialog";
+
+export const renderSnippet = () => {
+    fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
+        response.data.snippets.forEach((item: ISnippet) => {
+            const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.id}`;
+            let exitElement = document.getElementById(id) as HTMLScriptElement;
+            if (!item.enabled) {
+                if (exitElement) {
+                    exitElement.remove();
+                }
+                return;
+            }
+            if (exitElement) {
+                if (exitElement.innerHTML === item.content) {
+                    return;
+                }
+                exitElement.remove();
+            }
+            if (item.type === "css") {
+                document.head.insertAdjacentHTML("beforeend", `<style id="${id}">${item.content}</style>`);
+            } else if (item.type === "js") {
+                exitElement = document.createElement("script");
+                exitElement.type = "text/javascript";
+                exitElement.text = item.content;
+                exitElement.id = id;
+                document.head.appendChild(exitElement);
+            }
+        });
+    });
+};
+
+export const openSnippets = () => {
+    fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
+        let cssHTML = "";
+        let jsHTML = "";
+        response.data.snippets.forEach((item: ISnippet) => {
+            if (item.type === "css") {
+                cssHTML += genSnippet(item);
+            } else {
+                jsHTML += genSnippet(item);
+            }
+        });
+        const dialog = new Dialog({
+            width: "70vw",
+            content: `<div style="height: 60vh;" class="fn__flex-column">
+    <div class="layout-tab-bar fn__flex fn__flex-shrink" style="border-radius: 4px 4px 0 0">
+        <div data-type="css" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">CSS</span><span class="fn__flex-1"></span></div>
+        <div data-type="js" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">JS</span><span class="fn__flex-1"></span></div>
+    </div>
+    <div class="fn__flex-1" style="overflow:auto;padding: 16px 24px">
+        <div>
+            ${cssHTML}
+            <div class="fn__flex">
+                <div class="fn__flex-1"></div>
+                <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetCSS">
+                    <svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} CSS
+                </button>
+            </div>
+        </div>
+        <div class="fn__none">
+            ${jsHTML}
+            <div class="fn__flex">
+                <div class="fn__flex-1"></div>
+                <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetJS">
+                    <svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} JS
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`
+        });
+        response.data.snippets.forEach((item: ISnippet) => {
+            const nameElement = (dialog.element.querySelector(`[data-id="${item.id}"] input`) as HTMLInputElement);
+            nameElement.value = item.name;
+            const contentElement = dialog.element.querySelector(`[data-id="${item.id}"] textarea`) as HTMLTextAreaElement;
+            contentElement.textContent = item.content;
+        });
+        dialog.element.addEventListener("click", (event) => {
+            const target = event.target as HTMLElement;
+            if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") {
+                target.parentElement.insertAdjacentHTML("beforebegin", genSnippet({
+                    type: target.id === "addCodeSnippetCSS" ? "css" : "js",
+                    name: "",
+                    content: "",
+                    enabled: false
+                }));
+                return;
+            }
+            if (target.classList.contains("b3-button--cancel")) {
+                dialog.destroy();
+                return;
+            }
+            if (target.classList.contains("b3-button--text")) {
+                const snippets: ISnippet[] = [];
+                dialog.element.querySelectorAll("[data-id]").forEach((item) => {
+                    snippets.push({
+                        id: item.getAttribute("data-id"),
+                        name: item.querySelector("input").value,
+                        type: item.getAttribute("data-type"),
+                        content: item.querySelector("textarea").value,
+                        enabled: (item.querySelector(".b3-switch") as HTMLInputElement).checked
+                    })
+                });
+                fetchPost("/api/snippet/setSnippets", {snippets}, () => {
+                    renderSnippet();
+                    dialog.destroy();
+                });
+                return;
+            }
+            const tabElement = hasClosestByClassName(target, "item");
+            if (tabElement) {
+                if (tabElement.getAttribute("data-type") === "css") {
+                    tabElement.classList.add("item--focus");
+                    tabElement.nextElementSibling.classList.remove("item--focus");
+                    tabElement.parentElement.nextElementSibling.firstElementChild.classList.remove("fn__none");
+                    tabElement.parentElement.nextElementSibling.lastElementChild.classList.add("fn__none");
+                } else {
+                    tabElement.classList.add("item--focus");
+                    tabElement.previousElementSibling.classList.remove("item--focus");
+                    tabElement.parentElement.nextElementSibling.firstElementChild.classList.add("fn__none");
+                    tabElement.parentElement.nextElementSibling.lastElementChild.classList.remove("fn__none");
+                }
+                return;
+            }
+            const removeElement = hasClosestByClassName(target, "b3-tooltips");
+            if (removeElement) {
+                removeElement.parentElement.parentElement.nextElementSibling.remove();
+                removeElement.parentElement.parentElement.remove();
+            }
+        });
+    });
+};
+
+const genSnippet = (options: ISnippet) => {
+    return `<div data-id="${options.id || ""}" data-type="${options.type}">
+    <div class="fn__flex">
+        <input type="text" class="fn__size200 b3-text-field" placeholder="${window.siyuan.languages.title}">
+        <div class="fn__flex-1 fn__space"></div>
+        <input data-type="snippet" class="b3-switch fn__flex-center" type="checkbox"${options.enabled ? " checked" : ""}>
+        <div class="fn__space"></div>
+        <span aria-label="${window.siyuan.languages.remove}" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
+            <svg><use xlink:href="#iconTrashcan"></use></svg>
+        </span>
+    </div>
+    <div class="fn__hr"></div>
+    <textarea class="fn__block b3-text-field" placeholder="${window.siyuan.languages.codeSnippet}"></textarea>
+</div><div class="fn__hr--b"></div>`;
+};

app/src/mobile/util/initFramework.ts

@@ -5,7 +5,8 @@ import {validateName} from "../../editor/rename";
 import {getEventName} from "../../protyle/util/compatibility";
 import {mountHelp} from "../../util/mount";
 import {fetchPost} from "../../util/fetch";
-import {renderSnippet, setInlineStyle} from "../../util/assets";
+import {setInlineStyle} from "../../util/assets";
+import {renderSnippet} from "../../config/util/snippets";
 import {setEmpty} from "./setEmpty";
 import {disabledProtyle, enableProtyle} from "../../protyle/util/onGet";
 import {getOpenNotebookCount} from "../../util/pathName";

app/src/mobile/util/menu.ts

@@ -4,7 +4,7 @@ import {popSearch} from "./search";
 import {initAppearance} from "../settings/appearance";
 import {closePanel} from "./closePanel";
 import {Constants} from "../../constants";
-import {setAccessAuthCode} from "../../config/util";
+import {setAccessAuthCode} from "../../config/util/setAccessAuthCode";
 import {mountHelp, newDailyNote, newNotebook} from "../../util/mount";
 import {needSubscribe} from "../../util/needSubscribe";
 import {repos} from "../../config/repos";

app/src/util/assets.ts

@@ -86,36 +86,6 @@ export const loadAssets = (data: IAppearance) => {
     }
 };
 
-export const renderSnippet = () => {
-    fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
-        response.data.snippets.forEach((item: ISnippet) => {
-            const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.id}`;
-            let exitElement = document.getElementById(id) as HTMLScriptElement;
-            if (!item.enabled) {
-                if (exitElement) {
-                    exitElement.remove();
-                }
-                return;
-            }
-            if (exitElement) {
-                if (exitElement.innerHTML === item.content) {
-                    return;
-                }
-                exitElement.remove();
-            }
-            if (item.type === "css") {
-                document.head.insertAdjacentHTML("beforeend", `<style id="${id}">${item.content}</style>`);
-            } else if (item.type === "js") {
-                exitElement = document.createElement("script");
-                exitElement.type = "text/javascript";
-                exitElement.text = item.content;
-                exitElement.id = id;
-                document.head.appendChild(exitElement);
-            }
-        });
-    });
-};
-
 export const initAssets = () => {
     const emojiElement = document.getElementById("emojiScript");
     const loadingElement = document.getElementById("loading");

app/src/util/onGetConfig.ts

@@ -14,7 +14,8 @@ import {globalShortcut} from "./globalShortcut";
 import {fetchPost} from "./fetch";
 import {mountHelp, newDailyNote} from "./mount";
 import {MenuItem} from "../menus/Menu";
-import {initAssets, loadAssets, renderSnippet, setInlineStyle, setMode} from "./assets";
+import {initAssets, loadAssets, setInlineStyle, setMode} from "./assets";
+import {renderSnippet} from "../config/util/snippets";
 import {getOpenNotebookCount} from "./pathName";
 import {openFileById} from "../editor/util";
 import {focusByRange} from "../protyle/util/selection";