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

app/appearance/icons/ant/icon.js

@@ -1,5 +1,8 @@
 document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconLinkOff" viewBox="0 0 32 32">
+    <path d="M25.667 21.933l-2-2.067q1.333-0.367 2.167-1.417t0.833-2.45q0-1.667-1.167-2.833t-2.833-1.167h-5.333v-2.667h5.333q2.767 0 4.717 1.95t1.95 4.717q0 1.9-0.983 3.5t-2.683 2.433zM21.133 17.333l-2.667-2.667h2.867v2.667h-0.2zM26.4 30.133l-24.533-24.533 1.867-1.867 24.533 24.533-1.867 1.867zM14.667 22.667h-5.333q-2.767 0-4.717-1.95t-1.95-4.717q0-2.3 1.4-4.1t3.6-2.367l2.467 2.467h-0.8q-1.667 0-2.833 1.167t-1.167 2.833 1.167 2.833 2.833 1.167h5.333v2.667zM10.667 17.333v-2.667h2.167l2.633 2.667h-4.8z"></path>
+  </symbol>
   <symbol id="iconSoftWrap" viewBox="0 0 32 32">
     <path d="M19.861 29.776l-6.493-6.493 6.493-6.493 2.457 2.545-2.194 2.194h4.212q1.272 0 2.172-0.899t0.899-2.172-0.899-2.172-2.172-0.899h-23.253v-3.51h23.253q2.764 0 4.673 1.909t1.909 4.673-1.909 4.673-4.673 1.909h-4.212l2.194 2.194-2.457 2.545zM1.083 25.038v-3.51h8.775v3.51h-8.775zM1.083 5.733v-3.51h28.079v3.51h-28.079z"></path>
   </symbol>

app/appearance/icons/ant/icon.json

@@ -2,5 +2,5 @@
   "name": "ant",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.29.0"
+  "version": "1.30.0"
 }

app/appearance/icons/index.html

@@ -34,6 +34,12 @@
         </svg>
         iconSoftWrap
     </div>
+    <div>
+        <svg>
+            <use xlink:href="#iconLinkOff"></use>
+        </svg>
+        iconLinkOff
+    </div>
     <div>
         <svg>
             <use xlink:href="#iconImgDown"></use>

app/appearance/icons/material/icon.js

@@ -1,5 +1,8 @@
 document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconLinkOff" viewBox="0 0 32 32">
+    <path d="M25.667 21.933l-2-2.067q1.333-0.367 2.167-1.417t0.833-2.45q0-1.667-1.167-2.833t-2.833-1.167h-5.333v-2.667h5.333q2.767 0 4.717 1.95t1.95 4.717q0 1.9-0.983 3.5t-2.683 2.433zM21.133 17.333l-2.667-2.667h2.867v2.667h-0.2zM26.4 30.133l-24.533-24.533 1.867-1.867 24.533 24.533-1.867 1.867zM14.667 22.667h-5.333q-2.767 0-4.717-1.95t-1.95-4.717q0-2.3 1.4-4.1t3.6-2.367l2.467 2.467h-0.8q-1.667 0-2.833 1.167t-1.167 2.833 1.167 2.833 2.833 1.167h5.333v2.667zM10.667 17.333v-2.667h2.167l2.633 2.667h-4.8z"></path>
+  </symbol>
   <symbol id="iconSoftWrap" viewBox="0 0 32 32">
     <path d="M19.861 29.776l-6.493-6.493 6.493-6.493 2.457 2.545-2.194 2.194h4.212q1.272 0 2.172-0.899t0.899-2.172-0.899-2.172-2.172-0.899h-23.253v-3.51h23.253q2.764 0 4.673 1.909t1.909 4.673-1.909 4.673-4.673 1.909h-4.212l2.194 2.194-2.457 2.545zM1.083 25.038v-3.51h8.775v3.51h-8.775zM1.083 5.733v-3.51h28.079v3.51h-28.079z"></path>
   </symbol>

app/appearance/icons/material/icon.json

@@ -2,5 +2,5 @@
   "name": "material",
   "author": "Vanessa",
   "url": "https://github.com/Vanessa219",
-  "version": "1.29.0"
+  "version": "1.30.0"
 }

app/src/constants.ts

@@ -96,6 +96,7 @@ export abstract class Constants {
     public static readonly LOCAL_SEARCHDATA = "local-searchdata";
     public static readonly LOCAL_SEARCHKEYS = "local-searchkeys";
     public static readonly LOCAL_SEARCHASSET = "local-searchasset";
+    public static readonly LOCAL_SEARCHUNREF = "local-searchunref";
     public static readonly LOCAL_DOCINFO = "local-docinfo"; // only mobile
     public static readonly LOCAL_DAILYNOTEID = "local-dailynoteid"; // string
     public static readonly LOCAL_HISTORYNOTEID = "local-historynoteid"; // string

app/src/protyle/util/compatibility.ts

@@ -166,6 +166,11 @@ export const getLocalStorage = (cb: () => void) => {
             sort: 0,
             k: "",
         };
+        defaultStorage[Constants.LOCAL_SEARCHUNREF] = {
+            col: "",
+            row: "",
+            layout: 0,
+        };
         Constants.SIYUAN_ASSETS_SEARCH.forEach(type => {
             defaultStorage[Constants.LOCAL_SEARCHASSET].types[type] = true;
         });
@@ -250,7 +255,8 @@ export const getLocalStorage = (cb: () => void) => {
         [Constants.LOCAL_EXPORTIMG, Constants.LOCAL_SEARCHKEYS, Constants.LOCAL_PDFTHEME, Constants.LOCAL_BAZAAR,
             Constants.LOCAL_EXPORTWORD, Constants.LOCAL_EXPORTPDF, Constants.LOCAL_DOCINFO, Constants.LOCAL_FONTSTYLES,
             Constants.LOCAL_SEARCHDATA, Constants.LOCAL_ZOOM, Constants.LOCAL_LAYOUTS, Constants.LOCAL_AI,
-            Constants.LOCAL_PLUGINTOPUNPIN, Constants.LOCAL_SEARCHASSET, Constants.LOCAL_FLASHCARD, Constants.LOCAL_DIALOGPOSITION,
+            Constants.LOCAL_PLUGINTOPUNPIN, Constants.LOCAL_SEARCHASSET, Constants.LOCAL_FLASHCARD,
+            Constants.LOCAL_DIALOGPOSITION, Constants.LOCAL_SEARCHUNREF,
             Constants.LOCAL_OUTLINE, Constants.LOCAL_FILEPOSITION].forEach((key) => {
             if (typeof response.data[key] === "string") {
                 try {

app/src/search/assets.ts

@@ -23,8 +23,7 @@ export const openSearchAsset = (element: Element, isStick: boolean) => {
         return;
     }
     const localSearch = window.siyuan.storage[Constants.LOCAL_SEARCHASSET] as ISearchAssetOption;
-    const loadingElement = element.nextElementSibling;
+    element.parentElement.querySelector(".fn__loading--top").classList.remove("fn__none");
-    loadingElement.classList.remove("fn__none");
     let enterTip = "";
     /// #if !BROWSER
     enterTip = `<kbd>Enter/Double Click</kbd> ${window.siyuan.languages.showInFolder}`;
@@ -171,8 +170,9 @@ export const openSearchAsset = (element: Element, isStick: boolean) => {
 
 let inputTimeout: number;
 export const assetInputEvent = (element: Element, localSearch?: ISearchAssetOption, page = 1) => {
+    const loadingElement = element.parentElement.querySelector(".fn__loading--top");
     if (!isPaidUser()) {
-        element.nextElementSibling.classList.add("fn__none");
+        loadingElement.classList.add("fn__none");
         element.querySelector(".search__drag")?.classList.add("fn__none");
         element.querySelector("#searchAssetPreview").classList.add("fn__none");
         element.querySelector("#searchAssetList").innerHTML = `<div class="search__empty">
@@ -180,7 +180,7 @@ export const assetInputEvent = (element: Element, localSearch?: ISearchAssetOpti
 </div>`;
         return;
     }
-    element.nextElementSibling.classList.remove("fn__none");
+    loadingElement.classList.remove("fn__none");
     clearTimeout(inputTimeout);
     inputTimeout = window.setTimeout(() => {
         if (!localSearch) {
@@ -200,7 +200,7 @@ export const assetInputEvent = (element: Element, localSearch?: ISearchAssetOpti
             method: localSearch.method,
             orderBy: localSearch.sort
         }, (response) => {
-            element.nextElementSibling.classList.add("fn__none");
+            loadingElement.classList.add("fn__none");
             const nextElement = element.querySelector('[data-type="assetNext"]');
             if (page < response.data.pageCount) {
                 nextElement.removeAttribute("disabled");
@@ -528,7 +528,7 @@ export const assetMoreMenu = (target: Element, element: Element, cb: () => void)
                 showMessage(window.siyuan.languages["_kernel"][214]);
                 return;
             }
-            element.nextElementSibling.classList.remove("fn__none");
+            element.parentElement.querySelector(".fn__loading--top").classList.remove("fn__none");
             fetchPost("/api/asset/fullReindexAssetContent", {}, () => {
                 assetInputEvent(element, localData);
             });

app/src/search/unRef.ts

@@ -0,0 +1,253 @@
+import {Constants} from "../constants";
+import {fetchPost} from "../util/fetch";
+import {setStorageVal, updateHotkeyTip} from "../protyle/util/compatibility";
+/// #if !MOBILE
+import {getQueryTip} from "./util";
+/// #endif
+import {MenuItem} from "../menus/Menu";
+import {Dialog} from "../dialog";
+import {Menu} from "../plugin/Menu";
+import {hasClosestByClassName} from "../protyle/util/hasClosest";
+import {addClearButton} from "../util/addClearButton";
+import {isPaidUser} from "../util/needSubscribe";
+import {showMessage} from "../dialog/message";
+
+export const openSearchUnRef = (element: Element, isStick: boolean) => {
+    /// #if !MOBILE
+    window.siyuan.menus.menu.remove();
+    element.previousElementSibling.previousElementSibling.classList.add("fn__none");
+    element.classList.remove("fn__none");
+    if (element.innerHTML) {
+        return;
+    }
+    const localSearch = window.siyuan.storage[Constants.LOCAL_SEARCHUNREF] as ISearchAssetOption;
+    const loadingElement = element.parentElement.querySelector(".fn__loading--top");
+    loadingElement.classList.remove("fn__none");
+    let enterTip = "";
+    /// #if !BROWSER
+    enterTip = `<kbd>Enter/Double Click</kbd> ${window.siyuan.languages.showInFolder}`;
+    /// #endif
+    element.innerHTML = `<div class="block__icons">
+    <span data-type="unRefPrevious" class="block__icon block__icon--show ariaLabel" data-position="9bottom" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
+    <span class="fn__space"></span>
+    <span data-type="unRefNext" class="block__icon block__icon--show ariaLabel" data-position="9bottom" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
+    <span class="fn__space"></span>
+    <span id="searchAssetResult" class="ft__selectnone"></span>
+    <span class="fn__flex-1"></span>
+    <span class="fn__space"></span>
+    <span id="unRefMore" aria-label="${window.siyuan.languages.more}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
+        <svg><use xlink:href="#iconMore"></use></svg>
+    </span>
+    <span class="fn__space"></span>
+    <span id="searchUnRefClose" aria-label="${isStick ? window.siyuan.languages.stickSearch : window.siyuan.languages.globalSearch}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
+        <svg><use xlink:href="#iconBack"></use></svg>
+    </span>
+</div>
+<div class="search__layout${localSearch.layout === 1 ? " search__layout--row" : ""}">
+    <div id="searchUnRefList" class="fn__flex-1 search__list b3-list b3-list--background"></div>
+    <div class="search__drag"></div>
+    <div id="searchUnRefPreview" class="fn__flex-1 search__preview b3-typography" style="padding: 8px"></div>
+</div>
+<div class="search__tip${isStick ? " fn__none" : ""}">
+    <kbd>↑/↓/PageUp/PageDown</kbd> ${window.siyuan.languages.searchTip1}
+    ${enterTip}
+    <kbd>Click</kbd> ${window.siyuan.languages.searchTip3}
+    <kbd>Esc</kbd> ${window.siyuan.languages.searchTip5}
+</div>`;
+    if (element.querySelector("#searchUnRefList").innerHTML !== "") {
+        return;
+    }
+    const previewElement = element.querySelector("#searchUnRefPreview") as HTMLElement;
+    if (localSearch.layout === 1) {
+        if (localSearch.col) {
+            previewElement.style.width = localSearch.col;
+            previewElement.classList.remove("fn__flex-1");
+        }
+    } else {
+        if (localSearch.row) {
+            previewElement.classList.remove("fn__flex-1");
+            previewElement.style.height = localSearch.row;
+        }
+    }
+
+    const dragElement = element.querySelector(".search__drag");
+    dragElement.addEventListener("mousedown", (event: MouseEvent) => {
+        const documentSelf = document;
+        const nextElement = dragElement.nextElementSibling as HTMLElement;
+        const previousElement = dragElement.previousElementSibling as HTMLElement;
+        const direction = localSearch.layout === 1 ? "lr" : "tb";
+        const x = event[direction === "lr" ? "clientX" : "clientY"];
+        const previousSize = direction === "lr" ? previousElement.clientWidth : previousElement.clientHeight;
+        const nextSize = direction === "lr" ? nextElement.clientWidth : nextElement.clientHeight;
+
+        nextElement.classList.remove("fn__flex-1");
+        nextElement.style[direction === "lr" ? "width" : "height"] = nextSize + "px";
+
+        documentSelf.onmousemove = (moveEvent: MouseEvent) => {
+            moveEvent.preventDefault();
+            moveEvent.stopPropagation();
+            const previousNowSize = (previousSize + (moveEvent[direction === "lr" ? "clientX" : "clientY"] - x));
+            const nextNowSize = (nextSize - (moveEvent[direction === "lr" ? "clientX" : "clientY"] - x));
+            if (previousNowSize < 120 || nextNowSize < 120) {
+                return;
+            }
+            nextElement.style[direction === "lr" ? "width" : "height"] = nextNowSize + "px";
+        };
+
+        documentSelf.onmouseup = () => {
+            documentSelf.onmousemove = null;
+            documentSelf.onmouseup = null;
+            documentSelf.ondragstart = null;
+            documentSelf.onselectstart = null;
+            documentSelf.onselect = null;
+            window.siyuan.storage[Constants.LOCAL_SEARCHUNREF][direction === "lr" ? "col" : "row"] = nextElement[direction === "lr" ? "clientWidth" : "clientHeight"] + "px";
+            setStorageVal(Constants.LOCAL_SEARCHUNREF, window.siyuan.storage[Constants.LOCAL_SEARCHUNREF]);
+        };
+    });
+    /// #endif
+};
+
+export const renderPreview = (element: Element, id: string, query: string, queryMethod: number) => {
+    fetchPost("/api/search/getAssetContent", {id, query, queryMethod}, (response) => {
+        element.innerHTML = `<p style="white-space: pre-wrap;">${response.data.assetContent.content}</p>`;
+        const matchElement = element.querySelector("mark");
+        if (matchElement) {
+            matchElement.classList.add("mark--hl");
+            const contentRect = element.getBoundingClientRect();
+            element.scrollTop = element.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2;
+        }
+    });
+};
+
+export const renderNextAssetMark = (element: Element) => {
+    let matchElement;
+    const allMatchElements = Array.from(element.querySelectorAll("mark"));
+    allMatchElements.find((item, itemIndex) => {
+        if (item.classList.contains("mark--hl")) {
+            item.classList.remove("mark--hl");
+            matchElement = allMatchElements[itemIndex + 1];
+            return;
+        }
+    });
+    if (!matchElement) {
+        matchElement = allMatchElements[0];
+    }
+    if (matchElement) {
+        matchElement.classList.add("mark--hl");
+        const contentRect = element.getBoundingClientRect();
+        element.scrollTop = element.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2;
+    }
+};
+
+
+export const assetMoreMenu = (target: Element, element: Element, cb: () => void) => {
+    if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
+        window.siyuan.menus.menu.element.getAttribute("data-name") === "searchAssetMore") {
+        window.siyuan.menus.menu.remove();
+        return;
+    }
+    window.siyuan.menus.menu.remove();
+    window.siyuan.menus.menu.element.setAttribute("data-name", "searchAssetMore");
+    const localData = window.siyuan.storage[Constants.LOCAL_SEARCHUNREF];
+    const sortMenu = [{
+        iconHTML: "",
+        label: window.siyuan.languages.sortByRankAsc,
+        current: localData.sort === 1,
+        click() {
+            localData.sort = 1;
+            cb();
+        }
+    }, {
+        iconHTML: "",
+        label: window.siyuan.languages.sortByRankDesc,
+        current: localData.sort === 0,
+        click() {
+            localData.sort = 0;
+            cb();
+        }
+    }, {
+        iconHTML: "",
+        label: window.siyuan.languages.modifiedASC,
+        current: localData.sort === 3,
+        click() {
+            localData.sort = 3;
+            cb();
+        }
+    }, {
+        iconHTML: "",
+        label: window.siyuan.languages.modifiedDESC,
+        current: localData.sort === 2,
+        click() {
+            localData.sort = 2;
+            cb();
+        }
+    }];
+    window.siyuan.menus.menu.append(new MenuItem({
+        iconHTML: "",
+        label: window.siyuan.languages.sort,
+        type: "submenu",
+        submenu: sortMenu,
+    }).element);
+    /// #if !MOBILE
+    window.siyuan.menus.menu.append(new MenuItem({
+        iconHTML: "",
+        label: window.siyuan.languages.layout,
+        type: "submenu",
+        submenu: [{
+            iconHTML: "",
+            label: window.siyuan.languages.topBottomLayout,
+            current: localData.layout === 0,
+            click() {
+                element.querySelector(".search__layout").classList.remove("search__layout--row");
+                const previewElement = element.querySelector("#searchAssetPreview") as HTMLElement;
+                previewElement.style.width = "";
+                if (localData.row) {
+                    previewElement.style.height = localData.row;
+                    previewElement.classList.remove("fn__flex-1");
+                } else {
+                    previewElement.classList.add("fn__flex-1");
+                }
+                localData.layout = 0;
+                setStorageVal(Constants.LOCAL_SEARCHUNREF, window.siyuan.storage[Constants.LOCAL_SEARCHUNREF]);
+            }
+        }, {
+            iconHTML: "",
+            label: window.siyuan.languages.leftRightLayout,
+            current: localData.layout === 1,
+            click() {
+                const previewElement = element.querySelector("#searchAssetPreview") as HTMLElement;
+                element.querySelector(".search__layout").classList.add("search__layout--row");
+                previewElement.style.height = "";
+                if (localData.col) {
+                    previewElement.style.width = localData.col;
+                    previewElement.classList.remove("fn__flex-1");
+                } else {
+                    previewElement.classList.add("fn__flex-1");
+                }
+                localData.layout = 1;
+                setStorageVal(Constants.LOCAL_SEARCHUNREF, window.siyuan.storage[Constants.LOCAL_SEARCHUNREF]);
+            }
+        }]
+    }).element);
+    /// #endif
+    window.siyuan.menus.menu.append(new MenuItem({
+        iconHTML: "",
+        label: window.siyuan.languages.rebuildIndex,
+        click() {
+            if (!isPaidUser()) {
+                showMessage(window.siyuan.languages["_kernel"][214]);
+                return;
+            }
+            element.nextElementSibling.classList.remove("fn__none");
+            fetchPost("/api/asset/fullReindexAssetContent", {}, () => {
+                assetInputEvent(element, localData);
+            });
+        },
+    }).element);
+    /// #if MOBILE
+    window.siyuan.menus.menu.fullscreen();
+    /// #else
+    const rect = target.getBoundingClientRect();
+    window.siyuan.menus.menu.popup({x: rect.right, y: rect.bottom, isLeft: true});
+    /// #endif
+};

app/src/search/util.ts

@@ -49,6 +49,7 @@ import {resize} from "../protyle/util/resize";
 import {Menu} from "../plugin/Menu";
 import {addClearButton} from "../util/addClearButton";
 import {checkFold} from "../util/noRelyPCFunction";
+import {openSearchUnRef} from "./unRef";
 
 export const toggleReplaceHistory = (searchElement: Element) => {
     const list = window.siyuan.storage[Constants.LOCAL_SEARCHKEYS];
@@ -282,6 +283,10 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
             <svg><use xlink:href="#iconLayoutRight"></use></svg>
         </span>
         <span class="fn__space"></span>
+        <span id="searchUnRef" aria-label="${window.siyuan.languages.unref}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
+            <svg><use xlink:href="#iconLinkOff"></use></svg>
+        </span>
+        <span class="fn__space"></span>
         <span id="searchAsset" aria-label="${window.siyuan.languages.searchAssetContent}" class="block__icon block__icon--show ariaLabel" data-position="9bottom">
             <svg><use xlink:href="#iconExact"></use></svg>
         </span>
@@ -357,6 +362,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
     </div>
 </div>
 <div class="fn__flex-column fn__none" id="searchAssets" style="height: 100%;${closeCB ? "border-radius: var(--b3-border-radius-b);overflow: hidden;" : ""}"></div>
+<div class="fn__flex-column fn__none" id="searchUnRefPanel" style="height: 100%;${closeCB ? "border-radius: var(--b3-border-radius-b);overflow: hidden;" : ""}"></div>
 <div class="fn__loading fn__loading--top"><img width="120px" src="/stage/loading-pure.svg"></div>`;
 
     const criteriaData: ISearchOption[] = [];
@@ -444,6 +450,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
 
     const localSearch = window.siyuan.storage[Constants.LOCAL_SEARCHASSET] as ISearchAssetOption;
     const assetsElement = element.querySelector("#searchAssets");
+    const unRefPanelElement = element.querySelector("#searchUnRefPanel");
     element.addEventListener("click", (event: MouseEvent) => {
         let target = event.target as HTMLElement;
         const searchPathInputElement = element.querySelector("#searchPathInput");
@@ -629,7 +636,12 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                 event.stopPropagation();
                 event.preventDefault();
                 break;
-            } else if (target.id === "searchAsset") {
+            } else if (target.id === "searchUnRef") {
+                openSearchUnRef(unRefPanelElement, !closeCB);
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            }  else if (target.id === "searchAsset") {
                 openSearchAsset(assetsElement, !closeCB);
                 event.stopPropagation();
                 event.preventDefault();
@@ -642,6 +654,14 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
                 event.stopPropagation();
                 event.preventDefault();
                 break;
+            } else if (target.id === "searchUnRefClose") {
+                window.siyuan.menus.menu.remove();
+                unRefPanelElement.classList.add("fn__none");
+                assetsElement.previousElementSibling.classList.remove("fn__none");
+                searchInputElement.select();
+                event.stopPropagation();
+                event.preventDefault();
+                break;
             } else if (target.id === "searchOpen") {
                 config.k = searchInputElement.value;
                 config.r = replaceInputElement.value;