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

app/src/assets/scss/business/_block.scss

@@ -134,7 +134,7 @@
     padding: 0 8px;
     display: flex;
     align-items: center;
-    height: 42px;
+    min-height: 42px;
     flex-shrink: 0;
 
     &--menu {
@@ -193,10 +193,10 @@
     svg {
       height: 16px;
       width: 16px;
-      padding: 8px 4px 8px 0;
+      padding: 4px;
+      flex-shrink: 0;
     }
 
-    white-space: nowrap;
     margin-right: 8px;
     display: flex;
     align-items: center;

app/src/layout/dock/Inbox.ts

@@ -38,21 +38,15 @@ export class Inbox extends Model {
     </div>
     <span class="fn__flex-1"></span>
     <span class="fn__space"></span>
-    <div class="fn__flex">
+    <input class="toolbar__icon" data-type="selectall" type="checkbox">  
-        <input class="fn__flex-center toolbar__icon" data-type="selectall" type="checkbox">  
+    <svg data-type="previous" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
-        <svg class="toolbar__icon" data-type="refresh"><use xlink:href='#iconRefresh'></use></svg>
+    <svg data-type="next" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconRight'></use></svg>
-        <svg data-type="more" class="toolbar__icon fn__none"><use xlink:href='#iconMore'></use></svg>
+    <svg data-type="more" class="toolbar__icon"><use xlink:href='#iconMore'></use></svg>
-        <svg data-type="previous" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
-        <svg data-type="next" disabled="disabled" class="toolbar__icon"><use xlink:href='#iconRight'></use></svg>
-    </div>
-    <div class="fn__flex fn__none">
-        <svg data-type="back" class="toolbar__icon"><use xlink:href='#iconLeft'></use></svg>
-        <svg data-type="refreshDetails" class="toolbar__icon"><use xlink:href='#iconRefresh'></use></svg>
-        <svg data-type="move" class="toolbar__icon"><use xlink:href='#iconMove'></use></svg>
-        <svg data-type="delete" class="toolbar__icon"><use xlink:href='#iconTrashcan'></use></svg>
-    </div>
 </div>
-<div class="fn__flex-1 fn__none inboxDetails ft__breakword" style="padding: 4px"></div>
+<div class="fn__loading fn__none">
+    <img width="64px" src="/stage/loading-pure.svg"></div>
+</div>
+<div class="fn__flex-1 fn__none inboxDetails fn__flex-column" style="min-height: auto"></div>
 <div class="fn__flex-1"></div>`;
         /// #else
         this.element.classList.add("fn__flex-column", "file-tree", "sy__inbox");
@@ -64,29 +58,20 @@ export class Inbox extends Model {
     </div>
     <span class="fn__flex-1"></span>
     <span class="fn__space"></span>
-    <div class="fn__flex">
+    <input class="block__icon" data-type="selectall" type="checkbox">  
-        <input class="fn__flex-center block__icon" data-type="selectall" type="checkbox">  
-        <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 data-type="more" data-menu="true" class="block__icon b3-tooltips b3-tooltips__sw fn__none" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href='#iconMore'></use></svg></span>
-        <span class="fn__space"></span>
-        <span data-type="previous" class="block__icon b3-tooltips b3-tooltips__sw" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
-        <span class="fn__space"></span>
-        <span data-type="next" class="block__icon b3-tooltips b3-tooltips__sw" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
-    </div>
-    <div class="fn__flex fn__none">
-        <span data-type="back" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.back}"><svg><use xlink:href='#iconLeft'></use></svg></span>
-        <span class="fn__space"></span>
-        <span data-type="refreshDetails" 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="move" data-menu="true" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.move}"><svg><use xlink:href='#iconMove'></use></svg></span>
-        <span class="fn__space"></span>
-        <span data-type="delete" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.remove}"><svg><use xlink:href='#iconTrashcan'></use></svg></span>
-    </div>
     <span class="fn__space"></span>
-    <span data-type="min" class="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>
+    <span data-type="previous" class="block__icon b3-tooltips b3-tooltips__w" disabled="disabled" aria-label="${window.siyuan.languages.previousLabel}"><svg><use xlink:href='#iconLeft'></use></svg></span>
+    <span class="fn__space"></span>
+    <span data-type="next" class="block__icon b3-tooltips b3-tooltips__w" disabled="disabled" aria-label="${window.siyuan.languages.nextLabel}"><svg><use xlink:href='#iconRight'></use></svg></span>
+    <span class="fn__space"></span>
+    <span data-type="more" data-menu="true" class="block__icon b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.more}"><svg><use xlink:href='#iconMore'></use></svg></span>
+    <span class="fn__space"></span>
+    <span data-type="min" class="block__icon b3-tooltips b3-tooltips__w" 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__flex-1 fn__none inboxDetails ft__breakword" style="padding: 8px"></div>
+<div class="fn__loading fn__none">
+    <img width="64px" src="/stage/loading-pure.svg"></div>
+</div>
+<div class="fn__flex-1 fn__none inboxDetails fn__flex-column" style="min-height: auto"></div>
 <div class="fn__flex-1"></div>`;
         /// #endif
         const countElement = this.element.querySelector(".inboxSelectCount");
@@ -98,6 +83,10 @@ export class Inbox extends Model {
             /// #endif
             let target = event.target as HTMLElement;
             while (target && !target.isEqualNode(this.element)) {
+                if (target.tagName === "A") {
+                    event.stopPropagation();
+                    break;
+                }
                 const type = target.getAttribute("data-type");
                 if (type === "min") {
                     getDockByType("inbox").toggleModel("inbox");
@@ -117,7 +106,6 @@ export class Inbox extends Model {
                             this.selectIds.splice(this.selectIds.indexOf(item.getAttribute("data-id")), 1);
                         });
                     }
-                    this.updateAction();
                     countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`;
                     event.stopPropagation();
                     break;
@@ -128,7 +116,6 @@ export class Inbox extends Model {
                     } else {
                         this.selectIds.splice(this.selectIds.indexOf(target.parentElement.getAttribute("data-id")), 1);
                     }
-                    this.updateAction();
                     countElement.innerHTML = `${this.selectIds.length.toString()}/${this.pageCount.toString()}`;
                     selectAllElement.checked = this.element.lastElementChild.querySelectorAll("input:checked").length === this.element.lastElementChild.querySelectorAll(".b3-list-item").length;
                     event.stopPropagation();
@@ -149,12 +136,6 @@ export class Inbox extends Model {
                     event.stopPropagation();
                     event.preventDefault();
                     break;
-                } else if (type === "refresh") {
-                    this.currentPage = 1;
-                    this.update();
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
                 } else if (type === "back") {
                     this.back();
                     event.stopPropagation();
@@ -165,60 +146,12 @@ export class Inbox extends Model {
                     event.stopPropagation();
                     event.preventDefault();
                     break;
-                } else if (type === "refreshDetails") {
-                    fetchPost("/api/inbox/getShorthand", {
-                        id: detailsElement.getAttribute("data-id")
-                    }, (response) => {
-                        detailsElement.innerHTML = `<h3 class="fn__ellipsis">${response.data.shorthandTitle}</h3>
-<div class="fn__hr"></div>
-<a href="${response.data.shorthandURL}" target="_blank">${response.data.shorthandURL}</a>
-<div class="fn__hr"></div>
-<div class="b3-typography b3-typography--default">
-${(Lute.New()).MarkdownStr("", response.data.shorthandContent)}
-</div>`;
-                        detailsElement.scrollTop = 0;
-                    });
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
-                } else if (type === "delete") {
-                    confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => {
-                        this.remove(detailsElement.getAttribute("data-id"));
-                    });
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
-                } else if (type === "move") {
-                    window.siyuan.menus.menu.remove();
-                    window.siyuan.notebooks.forEach((item) => {
-                        if (!item.closed) {
-                            window.siyuan.menus.menu.append(new MenuItem({
-                                iconHTML: `${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-menu__icon", true)}`,
-                                label: escapeHtml(item.name),
-                                click: () => {
-                                    this.move(item.id, detailsElement.getAttribute("data-id"));
-                                }
-                            }).element);
-                        }
-                    });
-                    window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
-                    window.siyuan.menus.menu.element.style.zIndex = "221";  // 移动端被右侧栏遮挡
-                    event.stopPropagation();
-                    event.preventDefault();
-                    break;
                 } else if (target.classList.contains("b3-list-item")) {
                     const data = this.data[target.getAttribute("data-id")];
-                    this.element.querySelector('[data-type="back"]').parentElement.classList.remove("fn__none");
+                    selectAllElement.classList.add("fn__none");
-                    this.element.querySelector('[data-type="more"]').parentElement.classList.add("fn__none");
+                    this.element.firstElementChild.querySelector('[data-type="previous"]').classList.add("fn__none");
-                    detailsElement.innerHTML = `<h3 class="fn__ellipsis">
+                    this.element.firstElementChild.querySelector('[data-type="next"]').classList.add("fn__none");
-${data.shorthandTitle}
+                    detailsElement.innerHTML = this.genDetail(data);
-</h3>
-<div class="fn__hr"></div>
-<a href="${data.shorthandURL}" target="_blank">${data.shorthandURL}</a>
-<div class="fn__hr"></div>
-<div class="b3-typography b3-typography--default">
-${(Lute.New()).MarkdownStr("", data.shorthandContent)}
-</div>`;
                     detailsElement.setAttribute("data-id", data.oId);
                     detailsElement.classList.remove("fn__none");
                     detailsElement.scrollTop = 0;
@@ -236,31 +169,66 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
         /// #endif
     }
 
-    private updateAction() {
-        if (this.selectIds.length === 0) {
-            this.element.querySelector('[data-type="refresh"]').classList.remove("fn__none");
-            this.element.querySelector('[data-type="more"]').classList.add("fn__none");
-        } else {
-            this.element.querySelector('[data-type="refresh"]').classList.add("fn__none");
-            this.element.querySelector('[data-type="more"]').classList.remove("fn__none");
-        }
-    }
-
     private back() {
-        this.element.querySelector('[data-type="back"]').parentElement.classList.add("fn__none");
+        this.element.firstElementChild.querySelector("input").classList.remove("fn__none");
-        this.element.querySelector('[data-type="more"]').parentElement.classList.remove("fn__none");
+        this.element.firstElementChild.querySelector('[data-type="previous"]').classList.remove("fn__none");
+        this.element.firstElementChild.querySelector('[data-type="next"]').classList.remove("fn__none");
         this.element.querySelector(".inboxDetails").classList.add("fn__none");
         this.element.lastElementChild.classList.remove("fn__none");
     }
 
+    private genDetail(data:IInbox) {
+        let linkHTML = "";
+        /// #if MOBILE
+        if (data.shorthandURL) {
+            linkHTML = `<a href="${data.shorthandURL}" target="_blank">
+        <svg class="toolbar__icon" style="float: left"><use xlink:href="#iconLink"></use></svg>
+    </a>`;
+        }
+        return `<div class="toolbar toolbar--dark">
+    <svg data-type="back" class="toolbar__icon"><use xlink:href="#iconLeft"></use></svg>
+    <span data-type="back" class="toolbar__text fn__flex-1">${data.shorthandTitle}</span>
+    ${linkHTML}
+</div>
+<div class="b3-typography b3-typography--default" style="padding: 0 8px 8px">
+${(Lute.New()).MarkdownStr("", data.shorthandContent)}
+</div>`;
+        /// #else
+        if (data.shorthandURL) {
+            linkHTML = `<span class="fn__space"></span><a href="${data.shorthandURL}" target="_blank" class="block__icon block__icon--show b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.link}">
+        <svg><use xlink:href="#iconLink"></use></svg>
+    </a>`;
+        }
+        return `<div class="block__icons">
+    <div class="block__logo fn__pointer fn__flex-1" data-type="back">
+        <svg><use xlink:href="#iconLeft"></use></svg><span class="ft__breakword">${data.shorthandTitle}</span>
+    </div>
+    ${linkHTML}
+</div>
+<div class="b3-typography b3-typography--default" style="padding: 0 8px 8px">
+${(Lute.New()).MarkdownStr("", data.shorthandContent)}
+</div>`;
+        /// #endif
+    }
+
     private more(event: MouseEvent) {
+        const detailsElement = this.element.querySelector(".inboxDetails");
         window.siyuan.menus.menu.remove();
         window.siyuan.menus.menu.append(new MenuItem({
             label: window.siyuan.languages.refresh,
             icon: "iconRefresh",
             click: () => {
-                this.currentPage = 1;
+                if (detailsElement.classList.contains("fn__none")) {
-                this.update();
+                    this.currentPage = 1;
+                    this.update();
+                } else {
+                    fetchPost("/api/inbox/getShorthand", {
+                        id: detailsElement.getAttribute("data-id")
+                    }, (response) => {
+                        detailsElement.innerHTML = this.genDetail(response.data);
+                        detailsElement.scrollTop = 0;
+                    });
+                }
             }
         }).element);
         const submenu: IMenu[] = [];
@@ -270,7 +238,11 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
                     iconHTML: `${unicode2Emoji(item.icon || Constants.SIYUAN_IMAGE_NOTE, false, "b3-menu__icon", true)}`,
                     label: escapeHtml(item.name),
                     click: () => {
-                        this.move(item.id);
+                        if (detailsElement.classList.contains("fn__none")) {
+                            this.move(item.id);
+                        } else {
+                            this.move(item.id, detailsElement.getAttribute("data-id"));
+                        }
                     }
                 });
             }
@@ -285,7 +257,11 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
             icon: "iconTrashcan",
             click: () => {
                 confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete + "?", () => {
-                    this.remove();
+                    if (detailsElement.classList.contains("fn__none")) {
+                        this.remove();
+                    } else {
+                        this.remove(detailsElement.getAttribute("data-id"));
+                    }
                 });
             }
         }).element);
@@ -312,7 +288,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
             } else {
                 this.selectIds = [];
             }
-            this.updateAction();
             this.currentPage = 1;
             this.update();
         });
@@ -339,6 +314,7 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
     }
 
     private update() {
+        const loadingElement = this.element.querySelector(".fn__loading");
         if (needSubscribe("")) {
             this.element.lastElementChild.innerHTML = `<ul class="b3-list b3-list--background">
     <li class="b3-list--empty">
@@ -348,15 +324,15 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
         ${window.siyuan.config.system.container === "ios" ? window.siyuan.languages._kernel[122] : window.siyuan.languages._kernel[29]}
     </li>
 </ul>`;
+            loadingElement.classList.add("fn__none");
             return;
         }
-        const refreshElement = this.element.querySelector(`[data-type="refresh"]${isMobile() ? "" : " svg"}`);
+        if (!loadingElement.classList.contains("fn__none")) {
-        if (refreshElement.classList.contains("fn__rotate")) {
             return;
         }
-        refreshElement.classList.add("fn__rotate");
+        loadingElement.classList.remove("fn__none");
         fetchPost("/api/inbox/getShorthands", {page: this.currentPage}, (response) => {
-            refreshElement.classList.remove("fn__rotate");
+            loadingElement.classList.add("fn__none");
             let html = "";
             if (response.data.data.shorthands.length === 0) {
                 html = '<ul class="b3-list b3-list--background"><li class="b3-list--empty">打开帮助文档搜索 <b>收集箱</b> 查看使用说明</li></ul>';