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

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

@@ -916,6 +916,17 @@
       position: sticky;
       left: 0;
       clear: both;
+      display: flex;
+      font-size: 87.5%;
+
+      svg {
+        transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+
+
+    &-arrow--open {
+      transform: rotate(90deg);
     }
   }
 }

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

@@ -294,6 +294,34 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
+        } else if (type === "av-group-fold") {
+            if (target.getAttribute("disabled") !== "true") {
+                target.setAttribute("disabled", "true");
+                const isOpen = target.firstElementChild.classList.contains("av__group-arrow--open");
+                transaction(protyle, [{
+                    action: "foldAttrViewGroup",
+                    avID: blockElement.dataset.avId,
+                    blockID: blockElement.dataset.nodeId,
+                    id: target.dataset.id,
+                    data: isOpen
+                }], [{
+                    action: "foldAttrViewGroup",
+                    avID: blockElement.dataset.avId,
+                    blockID: blockElement.dataset.nodeId,
+                    id: target.dataset.id,
+                    data: !isOpen
+                }]);
+                if (isOpen) {
+                    target.firstElementChild.classList.remove("av__group-arrow--open");
+                    target.parentElement.nextElementSibling.classList.add("fn__none");
+                } else {
+                    target.firstElementChild.classList.add("av__group-arrow--open");
+                    target.parentElement.nextElementSibling.classList.remove("fn__none");
+                }
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
         }
         target = target.parentElement;
     }

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

@@ -220,7 +220,13 @@ const renderGroupTable = (options: {
     options.data.view.groups.forEach((group: IAVTable) => {
         if (group.groupHidden === 0) {
             group.columns = (options.data.view as IAVTable).columns;
-            avBodyHTML += `<div class="av__group-title">${group.name}</div><div class="av__body">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
+            avBodyHTML += `<div class="av__group-title">
+    <div class="block__icon block__icon--show" data-type="av-group-fold" data-id="${group.id}">
+        <svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg>
+    </div><span class="fn__space"></span>
+    ${group.name}
+</div>
+<div class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
         }
     });
     if (options.renderAll) {
@@ -514,9 +520,6 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
             titleElement.dataset.title = operation.data;
         });
     }
-    // 只能 setTimeout，以前方案快速输入后最后一次修改会被忽略；必须为每一个 protyle 单独设置，否则有多个 protyle 时，其余无法被执行
-    clearTimeout(refreshTimeouts[protyle.id]);
-    refreshTimeouts[protyle.id] = window.setTimeout(() => {
     if (operation.action === "setAttrViewColWidth") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement;
@@ -527,7 +530,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 (rowItem.querySelector(`[data-col-id="${operation.id}"]`) as HTMLElement).style.width = operation.data;
             });
         });
-        } else if (operation.action === "setAttrViewCardSize") {
+        return;
+    }
+    if (operation.action === "setAttrViewCardSize") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             const galleryElement = item.querySelector(".av__gallery") as HTMLElement;
             if (galleryElement) {
@@ -539,13 +544,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 }
             }
         });
-        } else if (operation.action === "setAttrViewCardAspectRatio") {
+        return;
+    }
+    if (operation.action === "setAttrViewCardAspectRatio") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             item.querySelectorAll(".av__gallery-cover").forEach(coverItem => {
                 coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data;
             });
         });
-        } else if (operation.action === "hideAttrViewName") {
+        return;
+    }
+    if (operation.action === "hideAttrViewName") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             const titleElement = item.querySelector(".av__title");
             if (titleElement) {
@@ -566,13 +575,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 }
             }
         });
-        } else if (operation.action === "setAttrViewWrapField") {
+        return;
+    }
+    if (operation.action === "setAttrViewWrapField") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             item.querySelectorAll(".av__cell").forEach(fieldItem => {
                 fieldItem.setAttribute("data-wrap", operation.data.toString());
             });
         });
-        } else if (operation.action === "setAttrViewShowIcon") {
+        return;
+    }
+    if (operation.action === "setAttrViewShowIcon") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => {
                 if (operation.data) {
@@ -582,13 +595,33 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 }
             });
         });
-        } else if (operation.action === "setAttrViewColWrap") {
+        return;
+    }
+    if (operation.action === "setAttrViewColWrap") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
             item.querySelectorAll(`.av__cell[data-col-id="${operation.id}"],.av__cell[data-field-id="${operation.id}"]`).forEach(cellItem => {
                 cellItem.setAttribute("data-wrap", operation.data.toString());
             });
         });
+        return;
+    }
+    if (operation.action === "foldAttrViewGroup") {
+        Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
+            const foldElement = item.querySelector(`[data-type="av-group-fold"][data-id="${operation.id}"]`);
+            if (operation.data) {
+                foldElement.firstElementChild.classList.remove("av__group-arrow--open");
+                foldElement.parentElement.nextElementSibling.classList.add("fn__none");
             } else {
+                foldElement.firstElementChild.classList.add("av__group-arrow--open");
+                foldElement.parentElement.nextElementSibling.classList.remove("fn__none");
+            }
+            foldElement.removeAttribute("disabled");
+        });
+        return;
+    }
+    // 只能 setTimeout，以前方案快速输入后最后一次修改会被忽略；必须为每一个 protyle 单独设置，否则有多个 protyle 时，其余无法被执行
+    clearTimeout(refreshTimeouts[protyle.id]);
+    refreshTimeouts[protyle.id] = window.setTimeout(() => {
         // 修改表格名 avID 传入到 id 上了 https://github.com/siyuan-note/siyuan/issues/12724
         const avID = operation.action === "setAttrViewName" ? operation.id : operation.avID;
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avID}"]`)).forEach((item: HTMLElement) => {
@@ -645,6 +678,5 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 item.removeAttribute("data-loading");
             });
         });
-        }
     }, ["insertAttrViewBlock"].includes(operation.action) ? 2 : 100);
 };

app/src/protyle/wysiwyg/transaction.ts

@@ -860,7 +860,8 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
         "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
         "setAttrViewBlockView", "setAttrViewCardSize", "setAttrViewCardAspectRatio", "hideAttrViewName", "setAttrViewShowIcon",
-        "setAttrViewWrapField", "setAttrViewGroup", "removeAttrViewGroup", "hideAttrViewGroup", "sortAttrViewGroup"].includes(operation.action)) {
+        "setAttrViewWrapField", "setAttrViewGroup", "removeAttrViewGroup", "hideAttrViewGroup", "sortAttrViewGroup",
+        "foldAttrViewGroup"].includes(operation.action)) {
         if (!isUndo) {
             // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
             refreshAV(protyle, operation);

app/src/types/index.d.ts

@@ -68,6 +68,7 @@ type TOperation =
     | "syncAttrViewTableColWidth"
     | "hideAttrViewGroup"
     | "sortAttrViewGroup"
+    | "foldAttrViewGroup"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |
@@ -856,6 +857,7 @@ interface IAVView {
     showIcon: boolean;
     wrapField: boolean;
     groupHidden?: number,  // 0：显示，1：空白隐藏，2：手动隐藏
+    groupFolded?: boolean,
     filters: IAVFilter[],
     sorts: IAVSort[],
     groups: IAVView[]