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

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

@@ -99,7 +99,7 @@ export const getEditHTML = (options: {
         }
     });
     let html = `<button class="b3-menu__item" data-type="nobg" data-col-id="${options.colId}">
-    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goProperties">
+    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="go-properties">
         <svg><use xlink:href="#iconLeft"></use></svg>
     </span>
     <span class="b3-menu__label ft__center">${window.siyuan.languages.edit}</span>

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

@@ -454,7 +454,7 @@ export const getFiltersHTML = (data: IAVTable) => {
     });
     return `<div class="b3-menu__items">
 <button class="b3-menu__item" data-type="nobg">
-    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
+    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="go-config">
         <svg><use xlink:href="#iconLeft"></use></svg>
     </span>
     <span class="b3-menu__label ft__center">${window.siyuan.languages.filter}</span>

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

@@ -25,6 +25,7 @@ import {addView, bindViewEvent, getSwitcherHTML, getViewHTML, openViewMenu} from
 import {removeBlock} from "../../wysiwyg/remove";
 import {getEditorRange} from "../../util/selection";
 import {avRender} from "./render";
+import {setPageSize} from "./row";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -379,14 +380,14 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
-                } else if (type === "goConfig") {
+                } else if (type === "go-config") {
                     menuElement.innerHTML = getViewHTML(data.view);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     bindViewEvent({protyle: options.protyle, data, menuElement});
                     event.preventDefault();
                     event.stopPropagation();
                     break;
-                } else if (type === "goProperties") {
+                } else if (type === "go-properties") {
                     menuElement.innerHTML = getPropertiesHTML(data.view);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.preventDefault();
@@ -572,6 +573,11 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "set-page-size") {
+                    setPageSize(target);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "duplicate-view") {
                     const id = Lute.NewNodeID();
                     transaction(options.protyle, [{
@@ -737,7 +743,7 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "hideCol") {
-                    const isEdit = menuElement.querySelector('[data-type="goProperties"]');
+                    const isEdit = menuElement.querySelector('[data-type="go-properties"]');
                     const colId = isEdit ? menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id") : target.parentElement.getAttribute("data-id");
                     transaction(options.protyle, [{
                         action: "setAttrViewColHidden",
@@ -766,7 +772,7 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "showCol") {
-                    const isEdit = menuElement.querySelector('[data-type="goProperties"]');
+                    const isEdit = menuElement.querySelector('[data-type="go-properties"]');
                     const colId = isEdit ? menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id") : target.parentElement.getAttribute("data-id");
                     transaction(options.protyle, [{
                         action: "setAttrViewColHidden",
@@ -1013,7 +1019,7 @@ ${hideHTML}`;
     }
     return `<div class="b3-menu__items">
 <button class="b3-menu__item" data-type="nobg">
-    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
+    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="go-config">
         <svg><use xlink:href="#iconLeft"></use></svg>
     </span>
     <span class="b3-menu__label ft__center">${window.siyuan.languages.attr}</span>

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

@@ -1,5 +1,6 @@
 import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
 import {focusBlock} from "../../util/selection";
+import {Menu} from "../../../plugin/Menu";
 
 export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => {
     const rowElement = hasClosestByClassName(checkElement, "av__row");
@@ -119,3 +120,53 @@ export const stickyRow = (blockElement: HTMLElement, elementRect: DOMRect, statu
         }
     }
 };
+
+const updatePageSize = (currentPageSIze: string, newPageSize: string) => {
+    if (currentPageSIze === newPageSize) {
+        return;
+    }
+}
+export const setPageSize = (target: HTMLElement) => {
+    const menu = new Menu("av-page-size");
+    if (menu.isOpen) {
+        return;
+    }
+    const currentPageSIze = target.querySelector(".b3-menu__accelerator").textContent
+    menu.addItem({
+        iconHTML: "",
+        label: "10",
+        accelerator: currentPageSIze === "10" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
+        click() {
+            updatePageSize(currentPageSIze, "10");
+        }
+    });
+    menu.addItem({
+        iconHTML: "",
+        accelerator: currentPageSIze === "25" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
+        label: "25",
+        click() {
+            updatePageSize(currentPageSIze, "25");
+        }
+    });
+    menu.addItem({
+        iconHTML: "",
+        accelerator: currentPageSIze === "50" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
+        label: "50",
+        click() {
+            updatePageSize(currentPageSIze, "50");
+        }
+    });
+    menu.addItem({
+        iconHTML: "",
+        accelerator: currentPageSIze === "100" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
+        label: "100",
+        click() {
+            updatePageSize(currentPageSIze, "100");
+        }
+    });
+    const rect = target.getBoundingClientRect();
+    menu.open({
+        x: rect.left,
+        y: rect.bottom
+    });
+}

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

@@ -108,7 +108,7 @@ export const getSortsHTML = (columns: IAVColumn[], sorts: IAVSort[]) => {
     });
     return `<div class="b3-menu__items">
 <button class="b3-menu__item" data-type="nobg">
-    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
+    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="go-config">
         <svg><use xlink:href="#iconLeft"></use></svg>
     </span>
     <span class="b3-menu__label ft__center">${window.siyuan.languages.sort}</span>

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

@@ -114,7 +114,7 @@ export const getViewHTML = (data: IAVTable) => {
     <span class="b3-menu__label" style="padding: 4px;display: flex;"><input data-type="name" class="b3-text-field fn__block" type="text" value="${data.name}" data-value="${data.name}"></span>
 </button>
 <button class="b3-menu__separator"></button>
-<button class="b3-menu__item" data-type="goProperties">
+<button class="b3-menu__item" data-type="go-properties">
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
     <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
@@ -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">
+<button class="b3-menu__item" data-type="set-page-size">
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
     <span class="b3-menu__accelerator">50</span>