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

app/src/editor/util.ts

@@ -441,6 +441,8 @@ export const updateBacklinkGraph = (models: IModels, protyle: IProtyle) => {
         }
         item.element.querySelector('.block__icon[data-type="refresh"] svg').classList.add("fn__rotate");
         fetchPost("/api/ref/getBacklink2", {
+            sort: item.status[blockId] ? item.status[blockId].sort : "3",
+            mSort: item.status[blockId] ? item.status[blockId].mSort : "3",
             id: blockId || "",
             k: item.inputsElement[0].value,
             mk: item.inputsElement[1].value,

app/src/layout/dock/Backlink.ts

@@ -8,6 +8,7 @@ import {Constants} from "../../constants";
 import {updateHotkeyTip} from "../../protyle/util/compatibility";
 import {openFileById} from "../../editor/util";
 import {Protyle} from "../../protyle";
+import {MenuItem} from "../../menus/Menu";
 
 export class Backlink extends Model {
     public element: HTMLElement;
@@ -19,8 +20,10 @@ export class Backlink extends Model {
     private notebookId: string;
     private mTree: Tree;
     private editors: Protyle[] = [];
-    private status: {
+    public status: {
         [key: string]: {
+            sort: string,
+            mSort: string,
             scrollTop: number,
             mScrollTop: number,
             backlinkOpenIds: string[],
@@ -87,6 +90,8 @@ export class Backlink extends Model {
     <span class="fn__space"></span>
     <span data-type="refresh" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span>
     <span class="fn__space"></span>
+    <span data-type="sort" data-sort="3" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.sort}"><svg><use xlink:href='#iconSort'></use></svg></span>
+    <span class="fn__space"></span>
     <span data-type="collapse" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.collapse} ${updateHotkeyTip(window.siyuan.config.keymap.editor.general.collapse.custom)}">
         <svg><use xlink:href="#iconContract"></use></svg>
     </span>
@@ -106,6 +111,8 @@ export class Backlink extends Model {
         <input class="b3-text-field b3-text-field--small b3-form__icon-input" placeholder="${window.siyuan.languages.filterDocNameEnter}" />
     </label>
     <span class="fn__space"></span>
+    <span data-type="mSort" data-sort="3" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.sort}"><svg><use xlink:href='#iconSort'></use></svg></span>
+    <span class="fn__space"></span>
     <span data-type="mCollapse" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.collapse}">
         <svg><use xlink:href="#iconContract"></use></svg>
     </span>
@@ -230,7 +237,7 @@ export class Backlink extends Model {
             }
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.element)) {
-                if (target.classList.contains("block__icon")) {
+                if (target.classList.contains("block__icon") && target.parentElement.parentElement.isSameNode(this.element)) {
                     const type = target.getAttribute("data-type");
                     switch (type) {
                         case "refresh":
@@ -247,6 +254,12 @@ export class Backlink extends Model {
                         case "min":
                             getDockByType("backlink").toggleModel("backlink");
                             break;
+                        case "sort":
+                        case "mSort":
+                            this.showSortMenu(type, target.getAttribute("data-sort"));
+                            window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
+                            event.stopPropagation();
+                            break;
                         case "layout":
                             if (this.mTree.element.style.flex) {
                                 if (this.mTree.element.style.height === "0px") {
@@ -289,6 +302,71 @@ export class Backlink extends Model {
         }
     }
 
+    private showSortMenu(type: string, sort: string) {
+        const clickEvent = (currentSort: string) => {
+            (type === "sort" ? this.tree : this.mTree).element.previousElementSibling.querySelector(`[data-type="${type}"]`).setAttribute("data-sort", currentSort);
+            this.searchBacklinks();
+        }
+        window.siyuan.menus.menu.remove();
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "0" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.fileNameASC,
+            click: () => {
+                clickEvent("0");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "1" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.fileNameDESC,
+            click: () => {
+                clickEvent("1");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "4" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.fileNameNatASC,
+            click: () => {
+                clickEvent("4");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "5" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.fileNameNatDESC,
+            click: () => {
+                clickEvent("5");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "9" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.createdASC,
+            click: () => {
+                clickEvent("9");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "10" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.createdDESC,
+            click: () => {
+                clickEvent("10");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "2" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.modifiedASC,
+            click: () => {
+                clickEvent("2");
+            }
+        }).element)
+        window.siyuan.menus.menu.append(new MenuItem({
+            icon: sort === "3" ? "iconSelect" : undefined,
+            label: window.siyuan.languages.modifiedDESC,
+            click: () => {
+                clickEvent("3");
+            }
+        }).element)
+    }
+
     private toggleItem(liElement: HTMLElement, isMention: boolean) {
         const svgElement = liElement.firstElementChild.firstElementChild;
         const docId = liElement.getAttribute("data-node-id");
@@ -345,6 +423,8 @@ export class Backlink extends Model {
         }
         element.classList.add("fn__rotate");
         fetchPost("/api/ref/getBacklink2", {
+            sort: this.tree.element.previousElementSibling.querySelector('[data-type="sort"]').getAttribute("data-sort"),
+            mSort: this.mTree.element.previousElementSibling.querySelector('[data-type="mSort"]').getAttribute("data-sort"),
             k: this.inputsElement[0].value,
             mk: this.inputsElement[1].value,
             id: this.blockId,
@@ -356,6 +436,8 @@ export class Backlink extends Model {
 
     public saveStatus() {
         this.status[this.blockId] = {
+            sort: this.tree.element.previousElementSibling.querySelector('[data-type="sort"]').getAttribute("data-sort"),
+            mSort: this.mTree.element.previousElementSibling.querySelector('[data-type="mSort"]').getAttribute("data-sort"),
             scrollTop: this.tree.element.scrollTop,
             mScrollTop: this.mTree.element.scrollTop,
             backlinkOpenIds: [],
@@ -424,6 +506,8 @@ export class Backlink extends Model {
 
         if (!this.status[this.blockId]) {
             this.status[this.blockId] = {
+                sort: "3",
+                mSort: "3",
                 scrollTop: 0,
                 mScrollTop: 0,
                 backlinkOpenIds: [],
@@ -468,7 +552,7 @@ export class Backlink extends Model {
                 layoutElement.setAttribute("aria-label", window.siyuan.languages.up);
                 layoutElement.querySelector("use").setAttribute("xlink:href", "#iconUp");
             }
-        }else if (this.status[this.blockId].backlinkMStatus === 3) {
+        } else if (this.status[this.blockId].backlinkMStatus === 3) {
             this.tree.element.classList.remove("fn__none");
             this.mTree.element.setAttribute("style", "flex:none;height:0px");
             layoutElement.setAttribute("aria-label", window.siyuan.languages.up);
@@ -479,6 +563,9 @@ export class Backlink extends Model {
             layoutElement.setAttribute("aria-label", window.siyuan.languages.down);
             layoutElement.querySelector("use").setAttribute("xlink:href", "#iconDown");
         }
+        this.tree.element.previousElementSibling.querySelector('[data-type="sort"]').setAttribute("data-sort", this.status[this.blockId].sort)
+        this.mTree.element.previousElementSibling.querySelector('[data-type="mSort"]').setAttribute("data-sort", this.status[this.blockId].mSort)
+
         setTimeout(() => {
             this.tree.element.scrollTop = this.status[this.blockId].scrollTop;
             this.mTree.element.scrollTop = this.status[this.blockId].mScrollTop;