✨ https://github.com/siyuan-note/siyuan/issues/3565

app/src/layout/dock/Backlink.ts

@@ -82,10 +82,6 @@ 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="expand" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.expand} ${updateHotkeyTip(window.siyuan.config.keymap.editor.general.expand.custom)}">
-        <svg><use xlink:href="#iconFullscreen"></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>
@@ -105,10 +101,6 @@ export class Backlink extends Model {
         <input class="b3-text-field b3-text-field--small b3-form__icon-input" placeholder="Enter ${window.siyuan.languages.search}" />
     </label>
     <span class="fn__space"></span>
-    <span data-type="mExpand" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.expand}">
-        <svg><use xlink:href="#iconFullscreen"></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>
@@ -138,64 +130,35 @@ export class Backlink extends Model {
         this.tree = new Tree({
             element: this.element.querySelector(".backlinkList") as HTMLElement,
             data: null,
-            click(element: HTMLElement) {
+            click(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
                 });
             },
-            ctrlClick(element: HTMLElement) {
+            ctrlClick(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     keepCursor: true,
                     action: [Constants.CB_GET_CONTEXT]
                 });
             },
-            altClick(element: HTMLElement) {
+            altClick(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     position: "right",
                     action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
                 });
             },
-            shiftClick(element: HTMLElement) {
+            shiftClick(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     position: "bottom",
                     action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
                 });
             },
-            toggleClick: (liElement: HTMLElement) => {
+            toggleClick: (liElement) => {
-                const svgElement = liElement.firstElementChild.firstElementChild;
+                this.toggleItem(liElement);
-                if (svgElement.classList.contains("b3-list-item__arrow--open")) {
-                    svgElement.classList.remove("b3-list-item__arrow--open");
-                    liElement.nextElementSibling?.classList.add("fn__none");
-                } else {
-                    svgElement.classList.add("b3-list-item__arrow--open");
-                    if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") {
-                        liElement.nextElementSibling.classList.remove("fn__none");
-                    } else {
-                        fetchPost("/api/ref/getBacklinkDoc", {
-                            defID: this.blockId,
-                            refTreeID: liElement.getAttribute("data-node-id")
-                        }, (response) => {
-                            const editorElement = document.createElement("div");
-                            liElement.after(editorElement);
-                            const editor = new Protyle(editorElement, {
-                                blockId: "",
-                                backlinkData: response.data.backlinks,
-                                render: {
-                                    background: false,
-                                    title: false,
-                                    gutter: true,
-                                    scroll: false,
-                                    breadcrumb: false,
-                                }
-                            });
-                            this.editors.push(editor);
-                        });
-                    }
-                }
             }
         });
         this.mTree = new Tree({
@@ -228,21 +191,21 @@ export class Backlink extends Model {
                     });
                 }
             },
-            ctrlClick(element: HTMLElement) {
+            ctrlClick(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     keepCursor: true,
                     action: [Constants.CB_GET_CONTEXT]
                 });
             },
-            altClick(element: HTMLElement) {
+            altClick(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     position: "right",
                     action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
                 });
             },
-            shiftClick(element: HTMLElement) {
+            shiftClick(element) {
                 openFileById({
                     id: element.getAttribute("data-node-id"),
                     position: "bottom",
@@ -273,10 +236,12 @@ export class Backlink extends Model {
         });
         // 为了快捷键的 dispatch
         this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => {
-            this.tree.collapseAll();
+            this.tree.element.querySelectorAll(".protyle").forEach(item => {
+                item.classList.add("fn__none");
+            });
+            this.tree.element.querySelectorAll(".b3-list-item__arrow").forEach(item => {
+                item.classList.remove("b3-list-item__arrow--open");
             });
-        this.element.querySelector('[data-type="expand"]').addEventListener("click", () => {
-            this.tree.expandAll();
         });
         this.element.addEventListener("click", (event) => {
             if (this.type === "local") {
@@ -292,11 +257,13 @@ export class Backlink extends Model {
                         case "refresh":
                             this.refresh();
                             break;
-                        case "mExpand":
-                            this.mTree.expandAll();
-                            break;
                         case "mCollapse":
-                            this.mTree.collapseAll();
+                            this.mTree.element.querySelectorAll(".protyle").forEach(item => {
+                                item.classList.add("fn__none");
+                            });
+                            this.mTree.element.querySelectorAll(".b3-list-item__arrow").forEach(item => {
+                                item.classList.remove("b3-list-item__arrow--open");
+                            });
                             break;
                         case "min":
                             getDockByType("backlink").toggleModel("backlink");
@@ -342,6 +309,39 @@ export class Backlink extends Model {
         }
     }
 
+    private toggleItem(liElement: HTMLElement) {
+        const svgElement = liElement.firstElementChild.firstElementChild;
+        if (svgElement.classList.contains("b3-list-item__arrow--open")) {
+            svgElement.classList.remove("b3-list-item__arrow--open");
+            liElement.nextElementSibling?.classList.add("fn__none");
+        } else {
+            svgElement.classList.add("b3-list-item__arrow--open");
+            if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") {
+                liElement.nextElementSibling.classList.remove("fn__none");
+            } else {
+                fetchPost("/api/ref/getBacklinkDoc", {
+                    defID: this.blockId,
+                    refTreeID: liElement.getAttribute("data-node-id")
+                }, (response) => {
+                    const editorElement = document.createElement("div");
+                    liElement.after(editorElement);
+                    const editor = new Protyle(editorElement, {
+                        blockId: "",
+                        backlinkData: response.data.backlinks,
+                        render: {
+                            background: false,
+                            title: false,
+                            gutter: true,
+                            scroll: false,
+                            breadcrumb: false,
+                        }
+                    });
+                    this.editors.push(editor);
+                });
+            }
+        }
+    }
+
     private turnToRef(element: HTMLElement, isDynamic: boolean) {
         element.querySelector(".b3-list-item__action").innerHTML = '<svg class="fn__rotate"><use xlink:href="#iconRefresh"></use></svg>';
         this.element.querySelector('.block__icon[data-type="refresh"] svg').classList.add("fn__rotate");
@@ -434,6 +434,7 @@ export class Backlink extends Model {
         } else {
             countElement.classList.remove("fn__none");
             countElement.textContent = data.linkRefsCount.toString();
+            this.toggleItem(this.tree.element.firstElementChild.firstElementChild as HTMLElement);
         }
         const mCountElement = this.element.querySelector(".listMCount");
         if (data.mentionsCount === 0) {

app/src/protyle/ui/initUI.ts

@@ -92,7 +92,11 @@ export const setPadding = (protyle: IProtyle) => {
             bottomHeight = protyle.element.clientHeight / 2 + "px";
         }
     }
+    if (protyle.options.backlinkData) {
+        protyle.wysiwyg.element.style.padding = `4px ${min16}px 4px ${min24}px`;
+    } else {
         protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`;
+    }
     if (!isMobile()) {
         // 防止右侧分屏后，左侧页签抖动；10 为滚动条宽度
         if (!window.siyuan.config.editor.fullWidth) {