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

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

@@ -118,9 +118,12 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         if (viewItemElement.classList.contains("item--focus")) {
             openViewMenu({protyle, blockElement, element: viewItemElement});
         } else {
-            blockElement.removeAttribute("data-render");
+            transaction(protyle, [{
-            blockElement.setAttribute("data-av-type", viewItemElement.dataset.avType);
+                action: "setAttrViewBlockView",
-            avRender(blockElement, protyle, undefined, viewItemElement.dataset.id);
+                blockID: blockElement.getAttribute("data-node-id"),
+                id: viewItemElement.dataset.id,
+                avID: blockElement.getAttribute("data-av-id"),
+            }]);
         }
         event.preventDefault();
         event.stopPropagation();

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

@@ -14,7 +14,6 @@ export const renderGallery = (options: {
     blockElement: HTMLElement,
     protyle: IProtyle,
     cb?: (data: IAV) => void,
-    viewID?: string,
     renderAll: boolean
 }) => {
     const alignSelf = options.blockElement.style.alignSelf;
@@ -42,20 +41,6 @@ export const renderGallery = (options: {
     });
     const created = options.protyle.options.history?.created;
     const snapshot = options.protyle.options.history?.snapshot;
-    let newViewID = options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "";
-    if (typeof options.viewID === "string") {
-        const viewTabElement = options.blockElement.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${options.viewID}"]`) as HTMLElement;
-        if (viewTabElement) {
-            options.blockElement.dataset.pageSize = viewTabElement.dataset.page;
-        }
-        newViewID = options.viewID;
-        fetchPost("/api/av/setDatabaseBlockView", {
-            id: options.blockElement.dataset.nodeId,
-            avID: options.blockElement.dataset.avId,
-            viewID: options.viewID
-        });
-        options.blockElement.setAttribute(Constants.CUSTOM_SY_AV_VIEW, newViewID);
-    }
     let searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
     const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement);
     const query = searchInputElement?.value || "";
@@ -64,7 +49,7 @@ export const renderGallery = (options: {
         created,
         snapshot,
         pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
-        viewID: newViewID,
+        viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
         query: query.trim()
     }, (response) => {
         const view: IAVGallery = response.data.view;

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

@@ -1,5 +1,6 @@
 import {transaction} from "../../wysiwyg/transaction";
 import {Constants} from "../../../constants";
+import {fetchPost} from "../../../util/fetch";
 
 export const getLayoutHTML = (data: IAV) => {
     let html = "";
@@ -189,7 +190,7 @@ export const bindLayoutEvent = (options: {
             blockID,
             data: !checked
         }]);
-        options.blockElement.querySelectorAll('.av__gallery-fields').forEach(item => {
+        options.blockElement.querySelectorAll(".av__gallery-fields").forEach(item => {
             if (checked) {
                 item.classList.add("av__gallery-fields--wrap");
             } else {
@@ -205,23 +206,25 @@ export const updateLayout = (options: {
     protyle: IProtyle,
     target: HTMLElement
 }) => {
-    if (options.target.classList.contains("av__layout-item--select")) {
+    if (options.target.classList.contains("av__layout-item--select") || options.target.dataset.load === "true") {
         return;
     }
-    const avID = options.nodeElement.getAttribute("data-av-id");
+    options.target.dataset.load = "true";
-    const blockID = options.nodeElement.getAttribute("data-node-id");
-    const layout = options.target.getAttribute("data-view-type");
-    transaction(options.protyle, [{
-        action: "changeAttrViewLayout",
-        avID,
-        blockID,
-        layout
-    }], [{
-        action: "changeAttrViewLayout",
-        avID,
-        blockID,
-        layout: options.data.viewType
-    }]);
     options.target.parentElement.querySelector(".av__layout-item--select").classList.remove("av__layout-item--select");
     options.target.classList.add("av__layout-item--select");
+    fetchPost("/api/av/changeAttrViewLayout", {
+        blockID: options.nodeElement.getAttribute("data-node-id"),
+        avID: options.nodeElement.getAttribute("data-av-id"),
+        layoutType:  options.target.getAttribute("data-view-type")
+    }, (response) => {
+        const menuElement = document.querySelector(".av__panel").lastElementChild as HTMLElement;
+        menuElement.innerHTML = getLayoutHTML(response.data);
+        bindLayoutEvent({
+            protyle: options.protyle,
+            data: response.data,
+            menuElement,
+            blockElement: options.nodeElement
+        });
+        options.target.removeAttribute("data-load");
+    });
 };

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

@@ -1340,9 +1340,12 @@ export const openMenuPanel = (options: {
                     if (!target.parentElement.classList.contains("b3-menu__item--current")) {
                         avPanelElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
                         target.parentElement.classList.add("b3-menu__item--current");
-                        options.blockElement.removeAttribute("data-render");
+                        transaction(options.protyle, [{
-                        options.blockElement.setAttribute("data-av-type", target.dataset.avType);
+                            action: "setAttrViewBlockView",
-                        avRender(options.blockElement, options.protyle, undefined, target.parentElement.dataset.id);
+                            blockID,
+                            id: target.parentElement.dataset.id,
+                            avID
+                        }]);
                     }
                     event.preventDefault();
                     event.stopPropagation();
@@ -1357,16 +1360,18 @@ export const openMenuPanel = (options: {
                     } else {
                         avPanelElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
                         target.parentElement.classList.add("b3-menu__item--current");
-                        options.blockElement.removeAttribute("data-render");
+                        transaction(options.protyle, [{
-                        avRender(options.blockElement, options.protyle, () => {
+                            action: "setAttrViewBlockView",
+                            blockID,
+                            id: target.parentElement.dataset.id,
+                            avID,
+                        }]);
+                        window.siyuan.menus.menu.remove();
                         openViewMenu({
                             protyle: options.protyle,
                             blockElement: options.blockElement as HTMLElement,
                             element: target.parentElement
                         });
-                            avPanelElement.querySelector(".b3-chip--primary").classList.remove("b3-chip--primary");
-                            target.parentElement.querySelector(".b3-chip").classList.add("b3-chip--primary");
-                        }, target.parentElement.dataset.id);
                     }
                     event.preventDefault();
                     event.stopPropagation();

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

@@ -16,10 +16,8 @@ import {isInAndroid, isInHarmony, isInIOS} from "../../util/compatibility";
 import {isMobile} from "../../../util/functions";
 import {renderGallery} from "./gallery/render";
 import {getViewIcon} from "./view";
-import {bindLayoutEvent, getLayoutHTML} from "./layout";
-import {setPosition} from "../../../util/setPosition";
 
-export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) => void, viewID?: string, renderAll = true) => {
+export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) => void, renderAll = true) => {
     let avElements: Element[] = [];
     if (element.getAttribute("data-type") === "NodeAttributeView") {
         // 编辑器内代码块编辑渲染
@@ -40,7 +38,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
             }
 
             if (e.getAttribute("data-av-type") === "gallery") {
-                renderGallery({blockElement: e, protyle, cb, viewID, renderAll});
+                renderGallery({blockElement: e, protyle, cb, renderAll});
                 return;
             }
 
@@ -85,16 +83,6 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
             });
             const created = protyle.options.history?.created;
             const snapshot = protyle.options.history?.snapshot;
-            let newViewID = e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "";
-            if (typeof viewID === "string") {
-                const viewTabElement = e.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${viewID}"]`) as HTMLElement;
-                if (viewTabElement) {
-                    e.dataset.pageSize = viewTabElement.dataset.page;
-                }
-                newViewID = viewID;
-                fetchPost("/api/av/setDatabaseBlockView", {id: e.dataset.nodeId, viewID, avID: e.dataset.avId,});
-                e.setAttribute(Constants.CUSTOM_SY_AV_VIEW, newViewID);
-            }
             let searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
             const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement);
             const query = searchInputElement?.value || "";
@@ -103,7 +91,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
                 created,
                 snapshot,
                 pageSize: parseInt(e.dataset.pageSize) || undefined,
-                viewID: newViewID,
+                viewID: e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
                 query: query.trim()
             }, (response) => {
                 const data = response.data.view as IAVTable;
@@ -443,7 +431,7 @@ export const updateSearch = (e: HTMLElement, protyle: IProtyle) => {
     clearTimeout(searchTimeout);
     searchTimeout = window.setTimeout(() => {
         e.removeAttribute("data-render");
-        avRender(e, protyle, undefined, undefined, false);
+        avRender(e, protyle, undefined, false);
     }, Constants.TIMEOUT_INPUT);
 };
 
@@ -489,18 +477,14 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 }
                 if (operation.action === "removeAttrViewView") {
                     item.setAttribute("data-av-type", operation.retData);
+                } else if (operation.action === "setAttrViewBlockView") {
+                    const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement;
+                    if (viewTabElement) {
+                        item.dataset.pageSize = viewTabElement.dataset.page;
+                        item.setAttribute("data-av-type", viewTabElement.dataset.avType);
                     }
-                if (operation.action === "changeAttrViewLayout") {
-                    item.setAttribute("data-av-type", operation.layout);
-                }
-                avRender(item, protyle, (data) => {
-                    if (operation.action === "changeAttrViewLayout") {
-                        const menuElement = document.querySelector(".av__panel").lastElementChild as HTMLElement;
-                        menuElement.innerHTML = getLayoutHTML(data);
-                        const tabRect = item.querySelector(".av__views").getBoundingClientRect();
-                        setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
-                        bindLayoutEvent({protyle: protyle, data, menuElement, blockElement: item});
                 }
+                avRender(item, protyle, () => {
                     const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${avID}"]`) as HTMLElement;
                     if (attrElement) {
                         // 更新属性面板

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

@@ -89,7 +89,8 @@ export const updateHeader = (rowElement: HTMLElement) => {
 export const setPage = (blockElement: Element) => {
     const pageSize = parseInt(blockElement.getAttribute("data-page-size"));
     if (pageSize) {
-        const currentCount = blockElement.querySelectorAll(".av__row:not(.av__row--header)").length;
+        const avType = blockElement.getAttribute("data-av-type") as TAVView;
+        const currentCount = blockElement.querySelectorAll(avType === "table" ? ".av__row:not(.av__row--header)" : ".av__gallery-item").length;
         if (pageSize < currentCount) {
             blockElement.setAttribute("data-page-size", currentCount.toString());
         }

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

@@ -245,8 +245,12 @@ export const bindSwitcherEvent = (options: { protyle: IProtyle, menuElement: Ele
         if (event.key === "Enter") {
             const currentElement = options.menuElement.querySelector(".b3-menu__item--current") as HTMLElement;
             if (currentElement) {
-                options.blockElement.removeAttribute("data-render");
+                transaction(options.protyle, [{
-                avRender(options.blockElement, options.protyle, undefined, currentElement.dataset.id);
+                    action: "setAttrViewBlockView",
+                    blockID: options.blockElement.getAttribute("data-node-id"),
+                    id: currentElement.dataset.id,
+                    avID: options.blockElement.getAttribute("data-av-id"),
+                }]);
                 options.menuElement.remove();
                 focusBlock(options.blockElement);
             }
@@ -386,4 +390,4 @@ export const getViewName = (type: string) => {
 
 export const getFieldsByData = (data: IAV) => {
     return data.viewType === "table" ? (data.view as IAVTable).columns : (data.view as IAVGallery).fields;
-}
+};

app/src/protyle/wysiwyg/index.ts

@@ -1848,15 +1848,18 @@ export class WYSIWYG {
                 if (avTabHeaderElement.classList.contains("item--focus")) {
                     openViewMenu({protyle, blockElement: nodeElement, element: avTabHeaderElement});
                 } else {
-                    nodeElement.setAttribute("data-av-type", avTabHeaderElement.dataset.avType);
+                    transaction(protyle, [{
-                    nodeElement.removeAttribute("data-render");
+                        action: "setAttrViewBlockView",
-                    avRender(nodeElement, protyle, () => {
+                        blockID: nodeElement.getAttribute("data-node-id"),
+                        id: avTabHeaderElement.dataset.id,
+                        avID: nodeElement.getAttribute("data-av-id"),
+                    }]);
+                    window.siyuan.menus.menu.remove();
                     openViewMenu({
                         protyle,
                         blockElement: nodeElement,
-                            element: nodeElement.querySelector(".item.item--focus")
+                        element: avTabHeaderElement
                     });
-                    }, avTabHeaderElement.dataset.id);
                 }
                 event.stopPropagation();
                 event.preventDefault();

app/src/protyle/wysiwyg/transaction.ts

@@ -851,7 +851,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
         "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
         "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
-        "changeAttrViewLayout"].includes(operation.action)) {
+        "setAttrViewBlockView"].includes(operation.action)) {
         if (!isUndo) {
             // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
             refreshAV(protyle, operation);

app/src/types/index.d.ts

@@ -57,11 +57,11 @@ type TOperation =
     | "setAttrViewFitImage"
     | "setAttrViewShowIcon"
     | "setAttrViewWrapField"
-    | "changeAttrViewLayout"
     | "setAttrViewColDate"
     | "unbindAttrViewBlock"
     | "setAttrViewViewDesc"
     | "setAttrViewColDesc"
+    | "setAttrViewBlockView"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |