From 24230d0453b49e71c4f7957ce15c0d82d39b2e2e Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 19 Apr 2023 10:46:24 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8038 --- app/src/config/index.ts | 132 ++++++++++++++++++++------------------- app/src/config/keymap.ts | 10 +-- app/src/config/search.ts | 51 +++++++++++---- 3 files changed, 112 insertions(+), 81 deletions(-) diff --git a/app/src/config/index.ts b/app/src/config/index.ts index de6ccc3a5..0c4698444 100644 --- a/app/src/config/index.ts +++ b/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); } }); }); diff --git a/app/src/config/keymap.ts b/app/src/config/keymap.ts index 6356089b6..129d116c9 100644 --- a/app/src/config/keymap.ts +++ b/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, () => { diff --git a/app/src/config/search.ts b/app/src/config/search.ts index fa4078368..d7e6c2ef0 100644 --- a/app/src/config/search.ts +++ b/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"; }