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

app/src/config/index.ts

@@ -14,6 +14,73 @@ import {Dialog} from "../dialog";
 import {ai} from "./ai";
 import {flashcard} from "./flashcard";
 
+export const genItemPanel = (type: string, containerElement:Element) => {
+    switch (type) {
+        case "filetree":
+            containerElement.innerHTML = fileTree.genHTML();
+            fileTree.element = containerElement;
+            fileTree.bindEvent();
+            break;
+        case "AI":
+            containerElement.innerHTML = ai.genHTML();
+            ai.element = containerElement;
+            ai.bindEvent();
+            break;
+        case "card":
+            containerElement.innerHTML = flashcard.genHTML();
+            flashcard.element = containerElement;
+            flashcard.bindEvent();
+            break;
+        case "image":
+            containerElement.innerHTML = image.genHTML();
+            image.element = containerElement;
+            image.bindEvent();
+            break;
+        case "export":
+            containerElement.innerHTML = exportConfig.genHTML();
+            exportConfig.element = containerElement;
+            exportConfig.bindEvent();
+            break;
+        case "appearance":
+            containerElement.innerHTML = appearance.genHTML();
+            appearance.element = containerElement;
+            appearance.bindEvent();
+            break;
+        case "keymap":
+            containerElement.innerHTML = keymap.genHTML();
+            keymap.element = containerElement;
+            keymap.bindEvent();
+            break;
+        case "bazaar":
+            bazaar.element = containerElement;
+            containerElement.innerHTML = bazaar.genHTML();
+            bazaar.bindEvent();
+            break;
+        case "account":
+            containerElement.innerHTML = account.genHTML();
+            account.element = containerElement;
+            account.bindEvent(account.element);
+            break;
+        case "repos":
+            containerElement.innerHTML = repos.genHTML();
+            repos.element = containerElement;
+            repos.bindEvent();
+            break;
+        case "about":
+            containerElement.innerHTML = about.genHTML();
+            about.element = containerElement;
+            about.bindEvent();
+            break;
+        case "search":
+            containerElement.innerHTML = query.genHTML();
+            query.element = containerElement;
+            query.bindEvent();
+            break;
+        default:
+            break;
+    }
+}
+
 export const openSetting = () => {
     const exitDialog = window.siyuan.dialogs.find((item) => {
         if (item.element.querySelector(".config__tab-container")) {
@@ -72,70 +139,7 @@ export const openSetting = () => {
             item.classList.add("b3-list-item--focus");
             containerElement.classList.remove("fn__none");
             if (containerElement.innerHTML === "" || type === "repos" || type === "bazaar") {
-                switch (type) {
-                    case "filetree":
-                        containerElement.innerHTML = fileTree.genHTML();
-                        fileTree.element = dialog.element.querySelector('.config__tab-container[data-name="filetree"]');
-                        fileTree.bindEvent();
-                        break;
-                    case "AI":
-                        containerElement.innerHTML = ai.genHTML();
-                        ai.element = dialog.element.querySelector('.config__tab-container[data-name="AI"]');
-                        ai.bindEvent();
-                        break;
-                    case "card":
-                        containerElement.innerHTML = flashcard.genHTML();
-                        flashcard.element = dialog.element.querySelector('.config__tab-container[data-name="card"]');
-                        flashcard.bindEvent();
-                        break;
-                    case "image":
-                        containerElement.innerHTML = image.genHTML();
-                        image.element = dialog.element.querySelector('.config__tab-container[data-name="image"]');
-                        image.bindEvent();
-                        break;
-                    case "export":
-                        containerElement.innerHTML = exportConfig.genHTML();
-                        exportConfig.element = dialog.element.querySelector('.config__tab-container[data-name="export"]');
-                        exportConfig.bindEvent();
-                        break;
-                    case "appearance":
-                        containerElement.innerHTML = appearance.genHTML();
-                        appearance.element = dialog.element.querySelector('.config__tab-container[data-name="appearance"]');
-                        appearance.bindEvent();
-                        break;
-                    case "keymap":
-                        containerElement.innerHTML = keymap.genHTML();
-                        keymap.element = dialog.element.querySelector('.config__tab-container[data-name="keymap"]');
-                        keymap.bindEvent();
-                        break;
-                    case "bazaar":
-                        bazaar.element = dialog.element.querySelector('.config__tab-container[data-name="bazaar"]');
-                        containerElement.innerHTML = bazaar.genHTML();
-                        bazaar.bindEvent();
-                        break;
-                    case "account":
-                        containerElement.innerHTML = account.genHTML();
-                        account.element = dialog.element.querySelector('.config__tab-container[data-name="account"]');
-                        account.bindEvent(account.element);
-                        break;
-                    case "repos":
-                        containerElement.innerHTML = repos.genHTML();
-                        repos.element = dialog.element.querySelector('.config__tab-container[data-name="repos"]');
-                        repos.bindEvent();
-                        break;
-                    case "about":
-                        containerElement.innerHTML = about.genHTML();
-                        about.element = dialog.element.querySelector('.config__tab-container[data-name="about"]');
-                        about.bindEvent();
-                        break;
-                    case "search":
-                        containerElement.innerHTML = query.genHTML();
-                        query.element = dialog.element.querySelector('.config__tab-container[data-name="search"]');
-                        query.bindEvent();
-                        break;
-                    default:
-                        break;
-                }
+                genItemPanel(type, containerElement);
             }
         });
     });

app/src/config/keymap.ts

@@ -144,7 +144,7 @@ export const keymap = {
             /// #endif
         });
     },
-    _search(value: string, keymapString: string) {
+    search(value: string, keymapString: string) {
         keymap.element.querySelectorAll("#keymapList .b3-list-item--hide-action > .b3-list-item__text").forEach(item => {
             const liElement = item.parentElement;
             let matchedKeymap = false;
@@ -201,24 +201,24 @@ export const keymap = {
         const searchElement = keymap.element.querySelector("#keymapInput") as HTMLInputElement;
         const searchKeymapElement = keymap.element.querySelector("#searchByKey") as HTMLInputElement;
         searchElement.addEventListener("compositionend", () => {
-            keymap._search(searchElement.value, searchKeymapElement.value);
+            keymap.search(searchElement.value, searchKeymapElement.value);
         });
         searchElement.addEventListener("input", (event: InputEvent) => {
             if (event.isComposing) {
                 return;
             }
-            keymap._search(searchElement.value, searchKeymapElement.value);
+            keymap.search(searchElement.value, searchKeymapElement.value);
         });
         searchKeymapElement.addEventListener("keydown", function (event: KeyboardEvent) {
             event.stopPropagation();
             event.preventDefault();
             const keymapStr = keymap._getKeymapString(event, this);
-            keymap._search(searchElement.value, keymapStr);
+            keymap.search(searchElement.value, keymapStr);
         });
         keymap.element.querySelector("#clearSearchBtn").addEventListener("click", () => {
             searchElement.value = "";
             searchKeymapElement.value = "";
-            keymap._search("", "");
+            keymap.search("", "");
         });
         keymap.element.querySelector("#keymapResetBtn").addEventListener("click", () => {
             confirmDialog(window.siyuan.languages.reset, window.siyuan.languages.confirmReset, () => {

app/src/config/search.ts

@@ -1,4 +1,6 @@
 import {Constants} from "../constants";
+import {genItemPanel} from "./index";
+import {keymap} from "./keymap";
 
 const getLang = (keys: string[]) => {
     const langArray: string[] = [];
@@ -29,7 +31,8 @@ export const initConfigSearch = (element: HTMLElement) => {
         getLang(["riffCard"]),
 
         // AI
-        ["AI"].concat(getLang(["ai"])),
+        ["AI"].concat(getLang(["ai", "apiTimeout", "apiTimeoutTip", "apiMaxTokens", "apiMaxTokensTip", "apiKey",
+            "apiKeyTip", "apiProxy", "apiProxyTip", "apiBaseURL", "apiBaseURLTip"])),
 
         // 图片
         getLang(["assets", "clearUnused"]),
@@ -39,21 +42,18 @@ export const initConfigSearch = (element: HTMLElement) => {
             "export13", "export14", "export15", "export19", "export20", "blockRef", "blockEmbed"]),
 
         // 外观
-        window.siyuan.config.appearance.darkThemes.concat(window.siyuan.config.appearance.icons).concat(window.siyuan.config.appearance.lightThemes)
-            .concat(Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE)
-            .concat(Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE)
-            .concat(["English", "简体中文"]).concat(getLang(["language", "language1"]))
-            .concat(getLang(["appearance", "appearance1", "appearance2", "appearance3", "appearance4",
-                "appearance5", "appearance6", "appearance8", "appearance9", "appearance10", "appearance11",
-                "appearance14", "appearance15", "appearance16", "appearance17",
-                "resetLayout", "reset", "icon", "themeLight", "themeDark", "close", "themeOS", "theme",
-                "theme2", "theme11", "theme12", "customEmoji", "customEmojiTip", "refresh"])),
+        getLang(["language", "language1", "appearance", "appearance1", "appearance2",
+            "appearance3", "appearance4",
+            "appearance5", "appearance6", "appearance8", "appearance9", "appearance10", "appearance11",
+            "appearance14", "appearance15", "appearance16", "appearance17",
+            "resetLayout", "reset", "icon", "themeLight", "themeDark", "close", "themeOS", "theme",
+            "theme2", "theme11", "theme12", "customEmoji", "customEmojiTip", "refresh"]),
 
         // 集市
         getLang(["bazaar", "theme", "template", "icon", "widget"]),
 
         // 搜索
-        getLang(["search", "searchLimit", "searchLimit1", "memo", "name", "alias","keywordsLimit",
+        getLang(["search", "searchLimit", "searchLimit1", "memo", "name", "alias", "keywordsLimit",
             "doc", "headings", "list1", "listItem", "code", "math", "table", "quote", "superBlock", "paragraph"]),
 
         // 快捷键
@@ -95,7 +95,7 @@ export const initConfigSearch = (element: HTMLElement) => {
                 if (!subItem) {
                     console.warn("Search config miss language: ", item, index);
                 }
-                if (subItem && (inputValue.toLowerCase().indexOf(subItem) > -1 || subItem.toLowerCase().indexOf(inputValue) > -1)) {
+                if (subItem && (inputValue.toLowerCase().indexOf(subItem.toLowerCase()) > -1 || subItem.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)) {
                     indexList.push(index);
                 }
             });
@@ -107,7 +107,34 @@ export const initConfigSearch = (element: HTMLElement) => {
                 if (!currentTabElement) {
                     currentTabElement = item;
                 }
+                const type = item.getAttribute("data-name");
                 item.style.display = "";
+                if (["image", "bazaar", "account"].includes(type)) {
+                    return;
+                }
+                // 右侧面板过滤
+                const panelElement = element.querySelector(`.config__tab-container[data-name="${type}"]`)
+                if (panelElement.innerHTML === "") {
+                    genItemPanel(type, panelElement);
+                }
+                if (type === "keymap") {
+                    const searchElement = keymap.element.querySelector("#keymapInput") as HTMLInputElement;
+                    const searchKeymapElement = keymap.element.querySelector("#searchByKey") as HTMLInputElement;
+                    searchElement.value = inputValue;
+                    searchKeymapElement.value = "";
+                    keymap.search(searchElement.value, searchKeymapElement.value);
+                } else {
+                    panelElement.querySelectorAll(`.config__tab-container[data-name="${type}"] .b3-label`).forEach((itemElement: HTMLElement) => {
+                        if (!itemElement.classList.contains("fn__none")) {
+                            const text = itemElement.textContent.toLowerCase()
+                            if (text.indexOf(inputValue.toLowerCase()) > -1 || inputValue.toLowerCase().indexOf(text) > -1) {
+                                itemElement.style.display = "";
+                            } else {
+                                itemElement.style.display = "none";
+                            }
+                        }
+                    });
+                }
             } else {
                 item.style.display = "none";
             }