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

app/src/assets/scss/base.scss

@@ -62,6 +62,12 @@ progressLoading: 400 // 需大于 .b3-dialog
   }
 }
 
+.outline__title {
+  padding: 0 8px;
+  white-space: nowrap;
+  line-height: 30px;
+}
+
 .fullscreen {
   position: fixed;
   top: 0;

app/src/editor/util.ts

@@ -439,6 +439,7 @@ const updateOutline = (models: IModels, protyle: IProtyle, reload = false) => {
             fetchPost("/api/outline/getDocOutline", {
                 id: blockId,
             }, response => {
+                item.updateDocTitle(protyle.title.editElement.textContent);
                 item.update(response, blockId);
                 if (protyle && getSelection().rangeCount > 0) {
                     const startContainer = getSelection().getRangeAt(0).startContainer;

app/src/layout/dock/Outline.ts

@@ -10,6 +10,7 @@ import {openFileById, updateBacklinkGraph} from "../../editor/util";
 import {Constants} from "../../constants";
 import {focusBlock} from "../../protyle/util/selection";
 import {pushBack} from "../../util/backForward";
+import {escapeHtml} from "../../util/escape";
 
 export class Outline extends Model {
     private tree: Tree;
@@ -45,11 +46,7 @@ export class Outline extends Model {
                             if (this.type === "local" && this.blockId === data.data.id) {
                                 this.parent.updateTitle(data.data.title);
                             } else {
-                                fetchPost("/api/outline/getDocOutline", {
-                                    id: this.blockId,
-                                }, response => {
-                                    this.update(response);
-                                });
+                                this.updateDocTitle(data.data.title);
                             }
                             break;
                         case "unmount":
@@ -84,6 +81,7 @@ export class Outline extends Model {
     <span class="${this.type === "local" ? "fn__none " : ""}fn__space"></span>
     <span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
+<div class="fn__ellipsis outline__title"></div>
 <div class="fn__flex-1"></div>`;
         this.element = options.tab.panelElement.lastElementChild as HTMLElement;
         this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement;
@@ -117,7 +115,7 @@ export class Outline extends Model {
         });
         // 为了快捷键的 dispatch
         options.tab.panelElement.querySelector('[data-type="collapse"]').addEventListener("click", () => {
-            this.tree.collapseAll(true);
+            this.tree.collapseAll();
         });
         options.tab.panelElement.querySelector('[data-type="expand"]').addEventListener("click", (event: MouseEvent & { target: Element }) => {
             const iconElement = hasClosestByClassName(event.target, "block__icon");
@@ -154,6 +152,7 @@ export class Outline extends Model {
         fetchPost("/api/outline/getDocOutline", {
             id: this.blockId,
         }, response => {
+            this.updateDocTitle();
             this.update(response);
         });
 
@@ -162,6 +161,13 @@ export class Outline extends Model {
         }
     }
 
+    public updateDocTitle(title = "") {
+        if (this.type === "pin") {
+            this.headerElement.nextElementSibling.innerHTML = escapeHtml(title);
+            this.headerElement.nextElementSibling.setAttribute("title", title);
+        }
+    }
+
     private onTransaction(data: IWebSocketData) {
         let needReload = false;
         data.data[0].doOperations.forEach((item: IOperation) => {

app/src/mobile/util/MobileOutline.ts

@@ -45,7 +45,7 @@ export class MobileOutline {
             }
         });
         this.element.firstElementChild.querySelector('[data-type="collapse"]').addEventListener(getEventName(), () => {
-            this.tree.collapseAll(true);
+            this.tree.collapseAll();
         });
         const expandElement = this.element.firstElementChild.querySelector('[data-type="expand"]');
         expandElement.addEventListener(getEventName(), () => {

app/src/util/Tree.ts

@@ -226,22 +226,14 @@ data-def-path="${item.defPath}">
         });
     }
 
-    public collapseAll(isFirst = false) {
+    public collapseAll() {
         this.element.querySelectorAll("ul").forEach(item => {
             if (!item.classList.contains("b3-list")) {
-                if (isFirst && item.parentElement.classList.contains("b3-list")) {
-                    // 第一层级不进行缩放
-                } else {
-                    item.classList.add("fn__none");
-                }
+                item.classList.add("fn__none");
             }
         });
         this.element.querySelectorAll(".b3-list-item__arrow").forEach(item => {
-            if (isFirst && item.parentElement.parentElement.parentElement.classList.contains("b3-list")) {
-                // 第一层级不进行缩放
-            } else {
-                item.classList.remove("b3-list-item__arrow--open");
-            }
+            item.classList.remove("b3-list-item__arrow--open");
         });
     }