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

app/src/assets/scss/business/_av.scss

@@ -205,27 +205,35 @@
       }
     }
 
-    &--add {
+    &--util {
-      color: var(--b3-theme-on-surface);
-      transition: background 20ms ease-in 0s;
-      font-size: 87.5%;
-      align-items: center;
       display: flex;
 
-      .av__colsticky {
+      .b3-button {
-        align-items: center;
+        margin: 3px 0 3px 24px;
+        color: var(--b3-theme-on-surface);
+        background-color: transparent;
+        font-size: 75%;
 
-        svg {
+        &:hover,
-          height: 14px;
+        &:focus {
-          width: 14px;
+          background-color: var(--b3-av-hover);
-          color: var(--b3-theme-on-surface);
+          box-shadow: none;
-          padding: 10px 10px 10px 5px;
-          flex-shrink: 0;
         }
       }
 
-      &:hover {
+      svg {
-        background-color: var(--b3-av-hover);
+        width: 12px;
+        height: 20px;
+
+        &[data-type="set-page-size"] {
+          margin: 0 0 0 4px;
+          border-radius: var(--b3-border-radius);
+          padding: 0 4px;
+
+          &:hover {
+            background-color: var(--b3-theme-background);
+          }
+        }
       }
     }
   }

app/src/protyle/render/av/action.ts

@@ -5,7 +5,7 @@ import {openEditorTab} from "../../../menus/util";
 import {copySubMenu} from "../../../menus/commonMenuItem";
 import {getTypeByCellElement, popTextCell} from "./cell";
 import {getColIconByType, showColMenu} from "./col";
-import {insertAttrViewBlockAnimation, stickyRow, updateHeader} from "./row";
+import {insertAttrViewBlockAnimation, setPageSize, stickyRow, updateHeader} from "./row";
 import {emitOpenMenu} from "../../../plugin/EventBus";
 import {addCol} from "./col";
 import {openMenuPanel} from "./openMenuPanel";
@@ -104,7 +104,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-        }  else if (type === "av-sort") {
+        } else if (type === "av-sort") {
             openMenuPanel({protyle, blockElement, type: "sorts"});
             event.preventDefault();
             event.stopPropagation();
@@ -127,6 +127,30 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
+        } else if (type === "set-page-size") {
+            setPageSize(target);
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        } else if (type === "av-add-bottom") {
+            const avID = blockElement.getAttribute("data-av-id");
+            const srcIDs = [Lute.NewNodeID()];
+            const previousID = blockElement.querySelector(".av__row--util").previousElementSibling.getAttribute("data-id") || "";
+            transaction(protyle, [{
+                action: "insertAttrViewBlock",
+                avID,
+                previousID,
+                srcIDs,
+                isDetached: true,
+            }], [{
+                action: "removeAttrViewBlock",
+                srcIDs,
+                avID,
+            }]);
+            insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
         } else if (target.classList.contains("av__gutter")) {
             const rowElement = hasClosestByClassName(target, "av__row");
             if (!rowElement) {
@@ -233,25 +257,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-        } else if (target.classList.contains("av__row--add")) {
-            const avID = blockElement.getAttribute("data-av-id");
-            const srcIDs = [Lute.NewNodeID()];
-            const previousID = target.previousElementSibling.getAttribute("data-id") || "";
-            transaction(protyle, [{
-                action: "insertAttrViewBlock",
-                avID,
-                previousID,
-                srcIDs,
-                isDetached: true,
-            }], [{
-                action: "removeAttrViewBlock",
-                srcIDs,
-                avID,
-            }]);
-            insertAttrViewBlockAnimation(blockElement, 1, previousID, avID);
-            event.preventDefault();
-            event.stopPropagation();
-            return true;
         } else if (target.classList.contains("item") && target.parentElement.classList.contains("layout-tab-bar")) {
             if (target.classList.contains("item--focus")) {
                 openViewMenu({protyle, blockElement, element: target});

app/src/protyle/render/av/keydown.ts

@@ -149,7 +149,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
         if (event.key === "ArrowDown") {
             const nextRowElement = selectRowElements[selectRowElements.length - 1].nextElementSibling;
             selectRow(selectRowElements[0].querySelector(".av__firstcol"), "unselectAll");
-            if (nextRowElement && !nextRowElement.classList.contains("av__row--add")) {
+            if (nextRowElement && !nextRowElement.classList.contains("av__row--util")) {
                 selectRow(nextRowElement.querySelector(".av__firstcol"), "select");
                 cellScrollIntoView(nodeElement, nextRowElement);
             } else {

app/src/protyle/render/av/render.ts

@@ -127,7 +127,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                     if (pinIndex > -1) {
                         tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
                     } else {
-                        tableHTML += "<div class=\"av__firstcol av__colsticky\"><svg><use xlink:href=\"#iconUncheck\"></use></svg></div>";
+                        tableHTML += '<div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
                     }
 
                     row.cells.forEach((cell, index) => {
@@ -252,14 +252,20 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
     <div class="av__scroll">
         <div class="av__body">
             ${tableHTML}
-            <div class="av__row--add">
+            <div class="av__row--util">
                 <div class="av__colsticky">
-                    <svg><use xlink:href="#iconAdd"></use></svg>
+                    <button class="b3-button" data-type="av-add-bottom">
-                    ${window.siyuan.languages.addAttr}
+                        <svg><use xlink:href="#iconAdd"></use></svg>
-                    
+                        ${window.siyuan.languages.addAttr}
-                    <svg><use xlink:href="#loadMore"></use></svg>
+                    </button>
-                    ${window.siyuan.languages.nextLabel}
+                    <span class="fn__space"></span>
-                    <svg data-type="set-page-size"><use xlink:href="#iconMore"></use></svg>
+                    <button class="b3-button">
+                        <svg data-type="av-load-more"><use xlink:href="#iconArrowDown"></use></svg>
+                        <span data-type="av-load-more">
+                            ${window.siyuan.languages.loadMore}
+                        </span>
+                        <svg data-type="set-page-size" data-size="50"><use xlink:href="#iconMore"></use></svg>
+                    </button>
                 </div>
             </div>
             <div class="av__row--footer">${calcHTML}</div>

app/src/protyle/render/av/row.ts

@@ -73,7 +73,7 @@ export const insertAttrViewBlockAnimation = (blockElement: Element, size: number
     let colHTML = '<div style="width: 24px"></div>';
     const pinIndex = previousElement.querySelectorAll(".av__colsticky .av__cell").length - 1;
     if (pinIndex > -1) {
-        colHTML = "<div class=\"av__colsticky\"><div style=\"width: 24px\"></div>";
+        colHTML = '<div class="av__colsticky"><div style="width: 24px"></div>';
     }
     previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => {
         colHTML += `<div class="av__cell" style="width: ${item.style.width}" ${(item.getAttribute("data-block-id") || item.dataset.dtype === "block") ? ' data-detached="true"' : ""}><span class="av__pulse"></span></div>`;
@@ -132,7 +132,7 @@ export const setPageSize = (target: HTMLElement) => {
     if (menu.isOpen) {
         return;
     }
-    const currentPageSIze = target.querySelector(".b3-menu__accelerator").textContent
+    const currentPageSIze = target.dataset.size;
     menu.addItem({
         iconHTML: "",
         label: "10",

app/src/protyle/render/av/view.ts

@@ -132,7 +132,7 @@ export const getViewHTML = (data: IAVTable) => {
     <span class="b3-menu__accelerator">${data.sorts.length}</span>
     <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
 </button>
-<button class="b3-menu__item" data-type="set-page-size">
+<button class="b3-menu__item" data-type="set-page-size" data-size="50">
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
     <span class="b3-menu__accelerator">50</span>