重构为注册式设置、重新实现搜索功能：设置 - 快捷键（未完成）

Author: TCOTC

app/src/config/mountConfigTab.ts

@@ -8,7 +8,7 @@ import {aiSettings} from "./ai";
 import {exportSettings} from "./export";
 import {searchSettings} from "./searchSettings";
 import {assets} from "./assets";
-import {keymap} from "./keymap";
+import {keymapSettings} from "./keymap";
 import {bazaar} from "./bazaar";
 import {sync} from "./sync";
 import {access} from "./access";
@@ -51,9 +51,7 @@ export const mountConfigTab = (type: TConfigTab, containerElement: Element, app:
             void searchSettings.mount(containerElement as HTMLElement);
             break;
         case "keymap":
-            keymap.element = containerElement;
-            containerElement.innerHTML = keymap.genHTML(app);
-            keymap.bindEvent(app);
+            void keymapSettings.mount(containerElement as HTMLElement);
             break;
         case "sync":
             sync.element = containerElement;

app/src/config/search.ts

@@ -1,16 +1,15 @@
-import {Constants} from "../constants";
 import type {TConfigTab} from "./types";
 import {getConfigTabDefs} from "./tabs";
-import {collectSettingTabSearchStrings} from "./ui/search";
+import {collectSettingTabSearchStrings, textMatchesConfigSearch} from "./ui/search";
 import {buildEditorSections, editorSettings} from "./editor";
 import {buildFileSections, fileSettings} from "./file";
 import {buildAppearanceSections, appearanceSettings} from "./appearance";
 import {buildFlashcardSections, flashcardSettings} from "./flashcard";
 import {buildAiSections, aiSettings} from "./ai";
 import {buildExportSections, exportSettings} from "./export";
 import {buildSearchSections, searchSettings} from "./searchSettings";
+import {buildKeymapSections, keymapSettings} from "./keymap";
 import {mountConfigTab} from "./mountConfigTab";
-import {keymap} from "./keymap";
 import {App} from "../index";
 import {isPhablet} from "../protyle/util/compatibility";
 
@@ -189,7 +188,7 @@ const applySettingPanelSearch = (panelElement: HTMLElement, query: string) => {
     }
 };
 
-type TConfigTabLangKeys = Exclude<TConfigTab, "editor" | "file" | "appearance" | "flashcard" | "ai" | "export" | "search">;
+type TConfigTabLangKeys = Exclude<TConfigTab, "editor" | "file" | "appearance" | "flashcard" | "ai" | "export" | "search" | "keymap">;
 
 /**
  * 侧栏标签索引关键词：按一级 Tab 的 `id` 与 `TAB_LANG_KEYS` 的键对应；
@@ -204,13 +203,6 @@ const TAB_LANG_KEYS: Record<TConfigTabLangKeys, string[]> = {
     assets: [
         "assets", "unreferencedAssets", "unreferencedAV", "missingAssets", "delete", "clearAll", "clearAllAV", "emptyContent",
     ],
-    keymap: ["keymap", "keymapTip", "keymapTip2", "refresh", "reset", "clear", "search", "general", "editor", "element", "headings", "list1",
-        "plugin"].concat(Object.keys(Constants.SIYUAN_KEYMAP.general))
-        .concat(Object.keys(Constants.SIYUAN_KEYMAP.editor.general))
-        .concat(Object.keys(Constants.SIYUAN_KEYMAP.editor.heading))
-        .concat(Object.keys(Constants.SIYUAN_KEYMAP.editor.insert))
-        .concat(Object.keys(Constants.SIYUAN_KEYMAP.editor.list))
-        .concat(Object.keys(Constants.SIYUAN_KEYMAP.editor.table)),
     sync: [
         "configGroupAccountSync", "configGroupAccount", "configGroupSync", "configGroupLocalDataRepo",
         "cloudStorage", "trafficStat", "sync", "backup", "cdn", "total", "sizeLimit", "pointExchangeSize",
@@ -269,6 +261,8 @@ const getTabSearchStrings = (tabId: TConfigTab): string[] => {
             return collectSettingTabSearchStrings(window.siyuan.languages.export, buildExportSections());
         case "search":
             return collectSettingTabSearchStrings(window.siyuan.languages.search, buildSearchSections());
+        case "keymap":
+            return collectSettingTabSearchStrings(window.siyuan.languages.keymap, buildKeymapSections());
     }
     return getLang(TAB_LANG_KEYS[tabId]);
 };
@@ -300,8 +294,7 @@ export const initConfigSearch = (element: HTMLElement, app: App) => {
                 }
                 // TODO 在把所有设置项都改成注册式之后，把 .toLowerCase() 移到对应的收集文案的函数里只处理一次，而不是在这里反复处理
                 // TODO 预先将含 HTML 的文案转为纯文本（比如 innerText 或 textContent），避免命中 HTML 标签中的文本（例如搜索 "code" 会命中包含 <code> 标签的文案）
-                const subLower = subItem.toLowerCase();
-                if (subLower.indexOf(keywords) > -1) {
+                if (textMatchesConfigSearch(subItem, keywords)) {
                     matchedTabIds.add(id);
                     break;
                 }
@@ -393,6 +386,9 @@ export const switchConfigTab = (dialogElement: HTMLElement, app: App, type: TCon
             case "search":
                 void searchSettings.mount(el, keywords);
                 return;
+            case "keymap":
+                void keymapSettings.mount(el, keywords);
+                return;
         }
     }
 
@@ -402,14 +398,6 @@ export const switchConfigTab = (dialogElement: HTMLElement, app: App, type: TCon
     if (!keywords) {
         return;
     }
-    if (type === "keymap") {
-        const searchElement = keymap.element.querySelector("#keymapInput") as HTMLInputElement;
-        const searchKeymapElement = keymap.element.querySelector("#searchByKey") as HTMLInputElement;
-        searchElement.value = keywords;
-        searchKeymapElement.value = "";
-        keymap.search(searchElement.value, searchKeymapElement.value);
-        return;
-    }
     applySettingPanelSearch(containerElement, keywords);
 };
 
@@ -451,17 +439,9 @@ const restoreConfigTabs = (dialogElement: HTMLElement, app: App) => {
             case "search":
                 void searchSettings.mount(container as HTMLElement);
                 break;
-            case "keymap": {
-                keymap.element = container;
-                const searchElement = container.querySelector("#keymapInput") as HTMLInputElement | null;
-                const searchKeymapElement = container.querySelector("#searchByKey") as HTMLInputElement | null;
-                if (searchElement && searchKeymapElement) {
-                    searchElement.value = "";
-                    searchKeymapElement.value = "";
-                    keymap.search("", "");
-                }
+            case "keymap":
+                void keymapSettings.mount(container as HTMLElement);
                 break;
-            }
             default:
                 applySettingPanelSearch(container, "");
                 break;

app/src/config/ui/render.ts

@@ -104,7 +104,7 @@ const renderButtonRow = (row: Pick<SettingRowButton, "id" | "title" | "desc" | "
     return `<div class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${title}
-        <div class="b3-label__text">${desc}</div>
+        ${desc ? `<div class="b3-label__text">${desc}</div>` : ""}
     </div>
     <span class="fn__space"></span>
     ${buildButtonHtml(id, label, icon)}

app/src/config/ui/search.ts

@@ -77,8 +77,8 @@ export const configRowMatchesSearchQuery = (row: SettingRow, queryLower: string)
         case "button":
             return (
                 textMatchesConfigSearch(row.title, queryLower) ||
-                textMatchesConfigSearch(row.desc, queryLower) ||
-                textMatchesConfigSearch(row.label, queryLower)
+                textMatchesConfigSearch(row.label, queryLower) ||
+                (row.desc ? textMatchesConfigSearch(row.desc, queryLower) : false)
             );
         case "custom":
             return row.keywords.some((k) => textMatchesConfigSearch(k, queryLower));
@@ -106,8 +106,13 @@ export const collectRowStringsForSearchIndex = (row: SettingRow): string[] => {
             return [row.title, row.desc];
         case "select":
             return [row.title, row.desc, ...row.options.map((o) => o.label ?? String(o.value))];
-        case "button":
-            return [row.title, row.desc, row.label];
+        case "button": {
+            const out = [row.title, row.label];
+            if (row.desc) {
+                out.push(row.desc);
+            }
+            return out;
+        }
         case "custom":
             return [...row.keywords];
         case "switchQuery":

app/src/config/ui/settingRows.ts

@@ -77,7 +77,7 @@ export interface SettingRowButton {
     type: "button";
     id: string;
     title: string;
-    desc: string;
+    desc?: string;
     label: string;
     icon: string;
     bind: (root: HTMLElement) => void | Promise<void>;