🎨 fix https://github.com/siyuan-note/siyuan/issues/9663

2026-01-06 00:38:49 +01:00 · 2023-11-16 20:26:47 +08:00 · 2023-11-16 20:26:47 +08:00 · cbc005119a
commit cbc005119a
parent 7e0be80bea
3 changed files with 97 additions and 47 deletions
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@ -392,6 +392,10 @@ html {
  max-width: 100%;
  min-width: 426px;

+  .b3-list {
+    padding: 8px 0;
+  }
+
  .b3-list:last-child {
    border-left: 1px solid var(--b3-theme-surface-lighter);
  }
--- a/app/src/boot/globalEvent/keydown.ts
+++ b/app/src/boot/globalEvent/keydown.ts
@ -120,11 +120,16 @@ const dialogArrow = (app: App, element: HTMLElement, event: KeyboardEvent) => {
                currentLiElement.parentElement.firstElementChild.classList.add("b3-list-item--focus");
            }
        } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-            if (isWindow()) {
-                currentLiElement.classList.add("b3-list-item--focus");
+            const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling;
+            if (sideElement) {
+                const tempLiElement = sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild;
+                if (tempLiElement) {
+                    tempLiElement.classList.add("b3-list-item--focus")
+                } else {
+                    currentLiElement.classList.add("b3-list-item--focus");
+                }
            } else {
-                const sideElement = currentLiElement.parentElement.previousElementSibling || currentLiElement.parentElement.nextElementSibling;
-                (sideElement.querySelector(`[data-index="${currentLiElement.getAttribute("data-index")}"]`) || sideElement.lastElementChild).classList.add("b3-list-item--focus");
+                currentLiElement.classList.add("b3-list-item--focus");
            }
        } else if (event.key === "Enter") {
            const currentType = currentLiElement.getAttribute("data-type");
@ -146,14 +151,15 @@ const dialogArrow = (app: App, element: HTMLElement, event: KeyboardEvent) => {
        }
        currentLiElement = element.querySelector(".b3-list-item--focus");
        const rootId = currentLiElement.getAttribute("data-node-id");
+        const pathElement = element.querySelector(".switch-doc__path")
        if (rootId) {
            fetchPost("/api/filetree/getFullHPathByID", {
                id: rootId
            }, (response) => {
-                currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = escapeHtml(response.data);
+                pathElement.innerHTML = escapeHtml(response.data);
            });
        } else {
-            currentLiElement.parentElement.parentElement.nextElementSibling.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML;
+            pathElement.innerHTML = currentLiElement.querySelector(".b3-list-item__text").innerHTML;
        }
        const currentRect = currentLiElement.getBoundingClientRect();
        const currentParentRect = currentLiElement.parentElement.getBoundingClientRect();
@ -1122,7 +1128,7 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => {
        switchDialog = new Dialog({
            title: window.siyuan.languages.switchTab,
            content: `<div class="fn__flex-column switch-doc">
-    <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
+    <input style="opacity: 0;height: 0.1px;box-sizing: border-box;margin: 0;padding: 0;border: 0;">
    <div class="fn__flex" style="overflow:auto;">${dockHtml}
        <ul${!isTabWindow ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
    </div>
--- a/app/src/business/openRecentDocs.ts
+++ b/app/src/business/openRecentDocs.ts
@ -1,4 +1,4 @@
-import {fetchPost} from "../util/fetch";
+import {fetchPost, fetchSyncPost} from "../util/fetch";
 import {unicode2Emoji} from "../emoji";
 import {Constants} from "../constants";
 import {escapeHtml} from "../util/escape";
@ -10,6 +10,63 @@ import {focusByRange} from "../protyle/util/selection";
 import {hasClosestByClassName} from "../protyle/util/hasClosest";
 import {hideElements} from "../protyle/ui/hideElements";

+const getHTML = async (data: { rootID: string, icon: string, title: string }[], element: Element, key?: string) => {
+    let tabHtml = "";
+    let index = 0
+    data.forEach((item) => {
+        if (!key || item.title.toLowerCase().includes(key.toLowerCase())) {
+            tabHtml += `<li data-index="${index}" data-node-id="${item.rootID}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">
+${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic", true)}
+<span class="b3-list-item__text">${escapeHtml(item.title)}</span>
+</li>`;
+            index++;
+        }
+    });
+    let switchPath = "";
+    if (tabHtml) {
+        const pathResponse = await fetchSyncPost("/api/filetree/getFullHPathByID", {
+            id: data[0].rootID
+        });
+        switchPath = escapeHtml(pathResponse.data);
+    }
+    let dockHtml = "";
+    if (!isWindow()) {
+        dockHtml = `<ul class="b3-list b3-list--background" style="overflow: auto;width: 200px;">`;
+        if (!key || window.siyuan.languages.riffCard.toLowerCase().includes(key.toLowerCase())) {
+            dockHtml += `<li data-type="riffCard" data-index="0" class="b3-list-item${!switchPath ? " b3-list-item--focus" : ""}">
+    <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg>
+    <span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
+    <span class="b3-list-item__meta">${updateHotkeyTip(window.siyuan.config.keymap.general.riffCard.custom)}</span>
+</li>`
+            if (!switchPath) {
+                switchPath = window.siyuan.languages.riffCard;
+            }
+        }
+        let docIndex = 1
+        getAllDocks().forEach((item) => {
+            if (!key || item.title.toLowerCase().includes(key.toLowerCase())) {
+                dockHtml += `<li data-type="${item.type}" data-index="${docIndex}" class="b3-list-item${!switchPath ? " b3-list-item--focus" : ""}">
+    <svg class="b3-list-item__graphic"><use xlink:href="#${item.icon}"></use></svg>
+    <span class="b3-list-item__text">${item.title}</span>
+    <span class="b3-list-item__meta">${updateHotkeyTip(item.hotkey || "")}</span>
+</li>`;
+                docIndex++;
+                if (!switchPath) {
+                    switchPath = window.siyuan.languages.riffCard;
+                }
+            }
+        });
+        dockHtml = dockHtml + "</ul>";
+    }
+
+    const pathElement = element.querySelector(".switch-doc__path")
+    pathElement.innerHTML = switchPath;
+    pathElement.previousElementSibling.innerHTML = `<div class="fn__flex fn__flex-1" style="overflow:auto;">
+        ${dockHtml}
+        <ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
+    </div>`;
+}
+
 export const openRecentDocs = () => {
    const openRecentDocsDialog = window.siyuan.dialogs.find(item => {
        if (item.element.getAttribute("data-key") === window.siyuan.config.keymap.general.recentDocs.custom) {
@ -25,55 +82,37 @@ export const openRecentDocs = () => {
        if (getSelection().rangeCount > 0) {
            range = getSelection().getRangeAt(0);
        }
-        let tabHtml = "";
-        response.data.forEach((item: any, index: number) => {
-            tabHtml += `<li data-index="${index}" data-node-id="${item.rootID}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">
-${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic", true)}
-<span class="b3-list-item__text">${escapeHtml(item.title)}</span>
-</li>`;
-        });
-        let dockHtml = "";
-        if (!isWindow()) {
-            dockHtml = `<ul class="b3-list b3-list--background" style="overflow: auto;width: 200px;">
-<li data-type="riffCard" data-index="0" class="b3-list-item${!tabHtml ? " b3-list-item--focus" : ""}">
-    <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg>
-    <span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
-    <span class="b3-list-item__meta">${updateHotkeyTip(window.siyuan.config.keymap.general.riffCard.custom)}</span>
-</li>`;
-            getAllDocks().forEach((item, index) => {
-                dockHtml += `<li data-type="${item.type}" data-index="${index + 1}" class="b3-list-item">
-    <svg class="b3-list-item__graphic"><use xlink:href="#${item.icon}"></use></svg>
-    <span class="b3-list-item__text">${item.title}</span>
-    <span class="b3-list-item__meta">${updateHotkeyTip(item.hotkey || "")}</span>
-</li>`;
-            });
-            dockHtml = dockHtml + "</ul>";
-        }
        const dialog = new Dialog({
-            title: window.siyuan.languages.recentDocs,
+            title: `<div class="fn__flex">
+<div class="fn__flex-center">${window.siyuan.languages.recentDocs}</div>
+<div class="fn__flex-1"></div>
+<div class="b3-form__icon fn__size200">
+    <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
+    <input placeholder="${window.siyuan.languages.search}" class="b3-text-field fn__block b3-form__icon-input">
+</div>
+</div>`,
            content: `<div class="fn__flex-column switch-doc">
-    <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
-    <div class="fn__flex" style="overflow:auto;">${dockHtml}
-        <ul${!isWindow() ? "" : ' style="border-left:0"'} class="b3-list b3-list--background fn__flex-1">${tabHtml}</ul>
-    </div>
+    <div class="fn__flex fn__flex-1" style="overflow:auto;"></div>
    <div class="switch-doc__path"></div>
 </div>`,
+            height: "80vh",
            destroyCallback: () => {
                if (range && range.getBoundingClientRect().height !== 0) {
                    focusByRange(range);
                }
            }
        });
-        if (response.data.length > 0) {
-            fetchPost("/api/filetree/getFullHPathByID", {
-                id: response.data[0].rootID
-            }, (response) => {
-                dialog.element.querySelector(".switch-doc__path").innerHTML = escapeHtml(response.data);
-            });
-        } else {
-            dialog.element.querySelector(".switch-doc__path").innerHTML = dialog.element.querySelector(".b3-list-item--focus").textContent;
-        }
-        dialog.element.querySelector("input").focus();
+        const searchElement = dialog.element.querySelector("input")
+        searchElement.focus();
+        searchElement.addEventListener("compositionend", () => {
+            getHTML(response.data, dialog.element, searchElement.value);
+        });
+        searchElement.addEventListener("input", (event: InputEvent) => {
+            if (event.isComposing) {
+                return
+            }
+            getHTML(response.data, dialog.element, searchElement.value)
+        });
        dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.recentDocs.custom);
        dialog.element.addEventListener("click", (event) => {
            const liElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
@ -85,5 +124,6 @@ ${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_FILE, "b3-list-item__graphic
                event.preventDefault();
            }
        });
+        getHTML(response.data, dialog.element);
    });
 };