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

app/src/mobile/menu/search.ts

@@ -23,6 +23,7 @@ import {
     renderNextAssetMark,
     renderPreview,
 } from "../../search/assets";
+import {addClearButton} from "../../util/addClearButton";
 
 const replace = (element: Element, config: ISearchOption, isAll: boolean) => {
     if (config.method === 1 || config.method === 2) {
@@ -32,7 +33,7 @@ const replace = (element: Element, config: ISearchOption, isAll: boolean) => {
     const searchListElement = element.querySelector("#searchList");
     const replaceInputElement = element.querySelector("#toolbarReplace") as HTMLInputElement;
 
-    const loadElement = replaceInputElement.nextElementSibling;
+    const loadElement = replaceInputElement.parentElement.querySelector(".fn__rotate");
     if (!loadElement.classList.contains("fn__none")) {
         return;
     }
@@ -281,9 +282,20 @@ const initSearchEvent = (app: App, element: Element, config: ISearchOption) => {
             setStorageVal(Constants.LOCAL_SEARCHDATA, window.siyuan.storage[Constants.LOCAL_SEARCHDATA]);
         }
     });
+    addClearButton({
+        inputElement: searchInputElement,
+        className: "toolbar__icon",
+        clearCB() {
+            config.page = 1;
+            updateSearchResult(config, element);
+        }
+    });
     const replaceInputElement = element.querySelector(".toolbar .toolbar__title") as HTMLInputElement;
     replaceInputElement.value = config.r || "";
-
+    addClearButton({
+        inputElement: replaceInputElement,
+        className: "toolbar__icon",
+    });
     const criteriaData: ISearchOption[] = [];
     initCriteriaMenu(element.querySelector("#criteria"), criteriaData, config);
 
@@ -648,10 +660,7 @@ export const popSearch = (app: App, config = window.siyuan.storage[Constants.LOC
      <div class="fn__none fn__flex-column" style="position: fixed;top: 0;width: 100%;background: var(--b3-theme-surface);height: 100%;" id="searchAssetsPanel">
         <div class="toolbar toolbar--border">
             <svg class="toolbar__icon"><use xlink:href="#iconSearch"></use></svg>
-            <span class="toolbar__text"><input id="searchAssetInput" placeholder="${window.siyuan.languages.keyword}" class="toolbar__title fn__block"></span>
+            <input id="searchAssetInput" placeholder="${window.siyuan.languages.keyword}" class="toolbar__title fn__block">
-            <svg class="toolbar__icon" data-type="goSearch">
-                <use xlink:href="#iconCloseRound"></use>
-            </svg>
         </div>
         <div class="toolbar">
             <span class="fn__space"></span>
@@ -706,4 +715,11 @@ const goAsset = () => {
         assetInputEvent(assetsElement, localSearch);
     });
     assetInputEvent(assetsElement, localSearch);
+    addClearButton({
+        inputElement,
+        className:"toolbar__icon",
+        clearCB() {
+            assetInputEvent(assetsElement, localSearch);
+        }
+    })
 };

app/src/search/assets.ts

@@ -121,8 +121,11 @@ export const openSearchAsset = (element: Element, isStick: boolean) => {
         setStorageVal(Constants.LOCAL_SEARCHASSET, window.siyuan.storage[Constants.LOCAL_SEARCHASSET]);
     });
     assetInputEvent(element, localSearch);
-    addClearButton(searchInputElement, () => {
+    addClearButton({
+        inputElement: searchInputElement,
+        clearCB() {
             assetInputEvent(element, localSearch);
+        }
     });
 
     const dragElement = element.querySelector(".search__drag");

app/src/search/util.ts

@@ -952,10 +952,18 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
         }
         saveKeyList("keys", searchInputElement.value);
     });
-    addClearButton(searchInputElement, () => {
+    addClearButton({
+        inputElement: searchInputElement,
+        height: searchInputElement.clientHeight,
+        clearCB () {
+            config.page = 1;
             inputEvent(element, config, edit);
+        }
+    });
+    addClearButton({
+        inputElement: replaceInputElement,
+        height: searchInputElement.clientHeight,
     });
-    addClearButton(replaceInputElement, undefined, undefined, searchInputElement.clientHeight);
     inputEvent(element, config, edit);
     return edit;
 };

app/src/util/addClearButton.ts

@@ -1,27 +1,37 @@
-const update = (inputElement: HTMLInputElement, clearElement: Element, right = 8) => {
+const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
     if (inputElement.value === "") {
         clearElement.classList.add("fn__none");
+        if (right) {
             inputElement.style.paddingRight = "";
+        }
     } else {
         clearElement.classList.remove("fn__none");
+        if (right) {
             inputElement.style.setProperty('padding-right', `${right * 2 + clearElement.clientWidth}px`, 'important');
         }
     }
-export const addClearButton = (inputElement: HTMLInputElement, clearCB?: () => void, right = 8, height?: number) => {
+}
-    inputElement.insertAdjacentHTML("afterend",
+export const addClearButton = (options: {
-        `<svg class="b3-form__icon-clear" style="right:${right}px;height: ${height || inputElement.clientHeight}px;">
+    inputElement: HTMLInputElement,
+    clearCB?: () => void,
+    right?: number,
+    height?: number
+    className?: string
+}) => {
+    options.inputElement.insertAdjacentHTML("afterend",
+        `<svg class="${options.className || "b3-form__icon-clear"}" style="${options.right ? "right: " + options.right + "px" : ""}${options.height ? "height:" + options.height + "px" : ""}">
 <use xlink:href="#iconCloseRound"></use></svg>`);
-    const clearElement = inputElement.nextElementSibling;
+    const clearElement = options.inputElement.nextElementSibling;
     clearElement.addEventListener("click", () => {
-        inputElement.value = "";
+        options.inputElement.value = "";
-        inputElement.focus();
+        options.inputElement.focus();
-        update(inputElement, clearElement, right);
+        update(options.inputElement, clearElement, options.right);
-        if (clearCB) {
+        if (options.clearCB) {
-            clearCB();
+            options.clearCB();
         }
     })
-    inputElement.addEventListener("input", () => {
+    options.inputElement.addEventListener("input", () => {
-        update(inputElement, clearElement, right);
+        update(options.inputElement, clearElement, options.right);
     });
-    update(inputElement, clearElement, right);
+    update(options.inputElement, clearElement, options.right);
 };