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

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

@@ -127,10 +127,6 @@
     overflow: auto hidden;
   }
 
-  &__body {
-    float: left;
-  }
-
   &__row {
     display: flex;
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
@@ -256,6 +252,7 @@
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 16px;
     width: 100%;
+    margin-top: 8px;
 
     &--top {
       margin-top: 16px;
@@ -919,6 +916,7 @@
       display: flex;
       font-size: 87.5%;
       align-items: center;
+      padding-top: 16px;
 
       .counter:hover {
         background-color: var(--b3-list-icon-hover);

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

@@ -1,6 +1,6 @@
 import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../../util/hasClosest";
 import {Constants} from "../../../../constants";
-import {fetchPost} from "../../../../util/fetch";
+import {fetchSyncPost} from "../../../../util/fetch";
 import {escapeAttr} from "../../../../util/escape";
 import {unicode2Emoji} from "../../../../emoji";
 import {cellValueIsEmpty, renderCell} from "../cell";
@@ -12,68 +12,34 @@ import {processRender} from "../../../util/processCode";
 import {getColIconByType, getColNameByType} from "../col";
 import {getCompressURL} from "../../../../util/image";
 
-export const renderGallery = (options: {
+interface ITableOptions {
-    blockElement: HTMLElement,
     protyle: IProtyle,
-    cb?: (data: IAV) => void,
+    blockElement: HTMLElement,
-    renderAll: boolean
+    cb: (data: IAV) => void,
-}) => {
+    data: IAV,
-    const alignSelf = options.blockElement.style.alignSelf;
+    renderAll: boolean,
-    let oldOffset: number;
+    resetData: {
-    if (options.blockElement.firstElementChild.innerHTML === "") {
+        alignSelf: string,
-        options.blockElement.style.alignSelf = "";
+        selectItemIds: string[],
-        options.blockElement.firstElementChild.outerHTML = `<div class="av__gallery">
+        isSearching: boolean,
-    <span style="width: 100%;height: 178px;" class="av__pulse"></span>
+        editIds: string[],
-    <span style="width: 100%;height: 178px;" class="av__pulse"></span>
+        query: string,
-    <span style="width: 100%;height: 178px;" class="av__pulse"></span>
+        oldOffset: number,
-</div>`;
-    } else {
-        oldOffset = options.protyle.contentElement.scrollTop;
     }
-    const editIds: string[] = [];
-    options.blockElement.querySelectorAll(".av__gallery-fields--edit").forEach(item => {
-        editIds.push(item.parentElement.getAttribute("data-id"));
-    });
-    const selectItemIds: string[] = [];
-    options.blockElement.querySelectorAll(".av__gallery-item--select").forEach(rowItem => {
-        const rowId = rowItem.getAttribute("data-id");
-        if (rowId) {
-            selectItemIds.push(rowId);
-        }
-    });
-    const created = options.protyle.options.history?.created;
-    const snapshot = options.protyle.options.history?.snapshot;
-    let searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
-    const isSearching = searchInputElement && document.activeElement === searchInputElement;
-    const query = searchInputElement?.value || "";
-    fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
-        id: options.blockElement.getAttribute("data-av-id"),
-        created,
-        snapshot,
-        pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
-        viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
-        query: query.trim()
-    }, (response) => {
-        const view: IAVGallery = response.data.view;
-        if (response.data.viewType === "table") {
-            options.blockElement.setAttribute("data-av-type", "table");
-            avRender(options.blockElement, options.protyle, options.cb, options.renderAll);
-            return;
-        }
-        if (!options.blockElement.dataset.pageSize) {
-            options.blockElement.dataset.pageSize = view.pageSize.toString();
 }
+
+const getGalleryHTML = (data: IAVGallery, selectItemIds: string[], editIds: string[]) => {
     let galleryHTML = "";
     // body
-        view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
+    data.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
         galleryHTML += `<div data-id="${item.id}" draggable="true" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
-            if (view.coverFrom !== 0) {
+        if (data.coverFrom !== 0) {
-                const coverClass = "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio;
+            const coverClass = "av__gallery-cover av__gallery-cover--" + data.cardAspectRatio;
             if (item.coverURL) {
                 if (item.coverURL.startsWith("background")) {
                     galleryHTML += `<div class="${coverClass}"><img class="av__gallery-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" style="${item.coverURL}"></div>`;
                 } else {
-                        galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" src="${getCompressURL(item.coverURL)}"></div>`;
+                    galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img${data.fitImage ? " av__gallery-img--fit" : ""}" src="${getCompressURL(item.coverURL)}"></div>`;
                 }
             } else if (item.coverContent) {
                 galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
@@ -83,7 +49,7 @@ export const renderGallery = (options: {
         }
         galleryHTML += `<div class="av__gallery-fields${editIds.includes(item.id) ? " av__gallery-fields--edit" : ""}">`;
         item.values.forEach((cell, fieldsIndex) => {
-                if (view.fields[fieldsIndex].hidden) {
+            if (data.fields[fieldsIndex].hidden) {
                 return;
             }
             let checkClass = "";
@@ -92,21 +58,21 @@ export const renderGallery = (options: {
             }
             const isEmpty = cellValueIsEmpty(cell.value);
             // NOTE: innerHTML 中不能换行否则 https://github.com/siyuan-note/siyuan/issues/15132
-                let ariaLabel = escapeAttr(view.fields[fieldsIndex].name) || getColNameByType(view.fields[fieldsIndex].type);
+            let ariaLabel = escapeAttr(data.fields[fieldsIndex].name) || getColNameByType(data.fields[fieldsIndex].type);
-                if (view.fields[fieldsIndex].desc) {
+            if (data.fields[fieldsIndex].desc) {
-                    ariaLabel += escapeAttr(`<div class="ft__on-surface">${view.fields[fieldsIndex].desc}</div>`);
+                ariaLabel += escapeAttr(`<div class="ft__on-surface">${data.fields[fieldsIndex].desc}</div>`);
             }
-                galleryHTML += `<div class="av__cell${checkClass} ariaLabel" data-wrap="${view.fields[fieldsIndex].wrap}" 
+            galleryHTML += `<div class="av__cell${checkClass} ariaLabel" data-wrap="${data.fields[fieldsIndex].wrap}" 
 data-empty="${isEmpty}" 
 aria-label="${ariaLabel}" 
 data-position="5west"
 data-id="${cell.id}" 
-data-field-id="${view.fields[fieldsIndex].id}"
+data-field-id="${data.fields[fieldsIndex].id}"
 ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} 
 data-dtype="${cell.valueType}" 
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
 style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
-${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, view.showIcon, "gallery")}<div class="av__gallery-tip">${view.fields[fieldsIndex].icon ? unicode2Emoji(view.fields[fieldsIndex].icon, undefined, true) : `<svg><use xlink:href="#${getColIconByType(view.fields[fieldsIndex].type)}"></use></svg>`}${window.siyuan.languages.edit} ${Lute.EscapeHTMLStr(view.fields[fieldsIndex].name)}</div></div>`;
+${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, data.showIcon, "gallery")}<div class="av__gallery-tip">${data.fields[fieldsIndex].icon ? unicode2Emoji(data.fields[fieldsIndex].icon, undefined, true) : `<svg><use xlink:href="#${getColIconByType(data.fields[fieldsIndex].type)}"></use></svg>`}${window.siyuan.languages.edit} ${Lute.EscapeHTMLStr(data.fields[fieldsIndex].name)}</div></div>`;
         });
         galleryHTML += `</div>
     <div class="av__gallery-actions">
@@ -116,62 +82,85 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
 </div>`;
     });
     galleryHTML += `<div class="av__gallery-add" data-type="av-add-bottom"><svg class="svg"><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>${window.siyuan.languages.newRow}</div>`;
-        if (options.renderAll) {
+    return `<div class="av__gallery${data.cardSize === 0 ? " av__gallery--small" : (data.cardSize === 2 ? " av__gallery--big" : "")}">
-            options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
-    ${genTabHeaderHTML(response.data,  isSearching || !!query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
-    <div class="av__gallery${view.cardSize === 0 ? " av__gallery--small" : (view.cardSize === 2 ? " av__gallery--big" : "")}
-${view.hideAttrViewName ? " av__gallery--top" : ""}">
     ${galleryHTML}
 </div>
-    <div class="av__gallery-load${view.cardCount > view.cards.length ? "" : " fn__none"}">
+<div class="av__gallery-load${data.cardCount > data.cards.length ? "" : " fn__none"}">
     <button class="b3-button av__button" data-type="av-load-more">
         <svg><use xlink:href="#iconArrowDown"></use></svg>
         <span>${window.siyuan.languages.loadMore}</span>
-            <svg data-type="set-page-size" data-size="${view.pageSize}"><use xlink:href="#iconMore"></use></svg>
+        <svg data-type="set-page-size" data-size="${data.pageSize}"><use xlink:href="#iconMore"></use></svg>
     </button>
+</div>`;
+};
+
+const renderGroupGallery = (options: ITableOptions) => {
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
+    const isSearching = searchInputElement && document.activeElement === searchInputElement;
+    const query = searchInputElement?.value || "";
+
+    let avBodyHTML = "";
+    options.data.view.groups.forEach((group: IAVGallery) => {
+        if (group.groupHidden === 0) {
+            group.fields = (options.data.view as IAVGallery).fields;
+            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}<span class="${group.cards.length === 0 ? "fn__none" : "counter"}">${group.cards.length}</span>
+</div>
+<div data-group-id="${group.id}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group, options.resetData.selectItemIds, options.resetData.editIds)}</div>`;
+        }
+    });
+    if (options.renderAll) {
+        options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
+    ${genTabHeaderHTML(options.data, isSearching || !!query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
+    <div>
+        ${avBodyHTML}
     </div>
     <div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
 </div>`;
     } else {
-            const galleryElement = options.blockElement.firstElementChild.querySelector(".av__gallery");
+        options.blockElement.querySelector(".av__header").nextElementSibling.innerHTML = avBodyHTML;
-            galleryElement.innerHTML = galleryHTML;
-            if (view.hideAttrViewName) {
-                galleryElement.classList.add("av__gallery--top");
-            } else {
-                galleryElement.classList.remove("av__gallery--top");
-            }
     }
+    afterRenderGallery(options);
+};
+
+const afterRenderGallery = (options: ITableOptions) => {
+    const view = options.data.view as IAVGallery;
     if (view.coverFrom === 1 || view.coverFrom === 3) {
         processRender(options.blockElement);
     }
-        if (typeof oldOffset === "number") {
+    if (typeof options.resetData.oldOffset === "number") {
-            options.protyle.contentElement.scrollTop = oldOffset;
+        options.protyle.contentElement.scrollTop = options.resetData.oldOffset;
     }
     options.blockElement.setAttribute("data-render", "true");
-        if (alignSelf) {
+    if (options.resetData.alignSelf) {
-            options.blockElement.style.alignSelf = alignSelf;
+        options.blockElement.style.alignSelf = options.resetData.alignSelf;
     }
     if (getSelection().rangeCount > 0) {
         // 修改表头后光标重新定位
         const range = getSelection().getRangeAt(0);
         if (!hasClosestByClassName(range.startContainer, "av__title")) {
             const blockElement = hasClosestBlock(range.startContainer);
-                if (blockElement && options.blockElement === blockElement && !isSearching) {
+            if (blockElement && options.blockElement === blockElement && !options.resetData.isSearching) {
                 focusBlock(options.blockElement);
             }
         }
     }
     options.blockElement.querySelector(".layout-tab-bar").scrollLeft = (options.blockElement.querySelector(".layout-tab-bar .item--focus") as HTMLElement).offsetLeft - 30;
     if (options.cb) {
-            options.cb(response.data);
+        options.cb(options.data);
+    }
+    if (options.data.view.hideAttrViewName) {
+        options.blockElement.querySelector(".av__gallery").classList.add("av__gallery--top");
     }
     if (!options.renderAll) {
         return;
     }
     const viewsElement = options.blockElement.querySelector(".av__views") as HTMLElement;
-        searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
-        searchInputElement.value = query || "";
+    searchInputElement.value = options.resetData.query || "";
-        if (isSearching) {
+    if (options.resetData.isSearching) {
         searchInputElement.focus();
     }
     searchInputElement.addEventListener("compositionstart", (event: KeyboardEvent) => {
@@ -223,5 +212,98 @@ ${view.hideAttrViewName ? " av__gallery--top" : ""}">
             updateSearch(options.blockElement, options.protyle);
         }
     });
+};
+
+export const renderGallery = async (options: {
+    blockElement: HTMLElement,
+    protyle: IProtyle,
+    cb?: (data: IAV) => void,
+    renderAll: boolean,
+    data?: IAV,
+}) => {
+    const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
+    const editIds: string[] = [];
+    options.blockElement.querySelectorAll(".av__gallery-fields--edit").forEach(item => {
+        editIds.push(item.parentElement.getAttribute("data-id"));
+    });
+    const selectItemIds: string[] = [];
+    options.blockElement.querySelectorAll(".av__gallery-item--select").forEach(rowItem => {
+        const rowId = rowItem.getAttribute("data-id");
+        if (rowId) {
+            selectItemIds.push(rowId);
+        }
+    });
+    const resetData = {
+        isSearching: searchInputElement && document.activeElement === searchInputElement,
+        query: searchInputElement?.value || "",
+        alignSelf: options.blockElement.style.alignSelf,
+        oldOffset: options.protyle.contentElement.scrollTop,
+        editIds,
+        selectItemIds,
+    };
+    if (options.blockElement.firstElementChild.innerHTML === "") {
+        options.blockElement.style.alignSelf = "";
+        options.blockElement.firstElementChild.outerHTML = `<div class="av__gallery">
+    <span style="width: 100%;height: 178px;" class="av__pulse"></span>
+    <span style="width: 100%;height: 178px;" class="av__pulse"></span>
+    <span style="width: 100%;height: 178px;" class="av__pulse"></span>
+</div>`;
+    }
+    const created = options.protyle.options.history?.created;
+    const snapshot = options.protyle.options.history?.snapshot;
+
+    let data: IAV = options.data;
+    if (!data) {
+        const response = await fetchSyncPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
+            id: options.blockElement.getAttribute("data-av-id"),
+            created,
+            snapshot,
+            pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
+            viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
+            query: resetData.query.trim()
+        });
+        data = response.data;
+    }
+    if (data.viewType === "table") {
+        options.blockElement.setAttribute("data-av-type", "table");
+        avRender(options.blockElement, options.protyle, options.cb, options.renderAll);
+        return;
+    }
+    const view: IAVGallery = data.view as IAVGallery;
+    if (view.groups?.length > 0) {
+        renderGroupGallery({
+            blockElement: options.blockElement,
+            protyle: options.protyle,
+            cb: options.cb,
+            renderAll: options.renderAll,
+            data,
+            resetData
+        });
+        return;
+    }
+    if (!options.blockElement.dataset.pageSize) {
+        options.blockElement.dataset.pageSize = view.pageSize.toString();
+    }
+    const bodyHTML = getGalleryHTML(view, selectItemIds, editIds);
+    if (options.renderAll) {
+        options.blockElement.firstElementChild.outerHTML = `<div class="av__container fn__block">
+    ${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
+    <div>
+        <div class="av__body">
+            ${bodyHTML}
+        </div>
+    </div>
+    <div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
+</div>`;
+    } else {
+        options.blockElement.querySelector(".av__body").innerHTML = bodyHTML;
+    }
+    afterRenderGallery({
+        resetData,
+        renderAll: options.renderAll,
+        data,
+        cb: options.cb,
+        protyle: options.protyle,
+        blockElement: options.blockElement,
     });
 };

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

@@ -239,7 +239,7 @@ const renderGroupTable = (options: ITableOptions) => {
         <svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg>
     </div><span class="fn__space"></span>${group.name}<span class="${group.rows.length === 0 ? "fn__none" : "counter"}">${group.rows.length}</span>
 </div>
-<div data-group-id="${group.id}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
+<div data-group-id="${group.id}" style="float: left" class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
         }
     });
     if (options.renderAll) {
@@ -475,7 +475,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
                 const data = response.data.view as IAVTable;
                 if (response.data.viewType === "gallery") {
                     e.setAttribute("data-av-type", "table");
-                    renderGallery({blockElement: e, protyle, cb, renderAll});
+                    renderGallery({blockElement: e, protyle, cb, renderAll, data: response.data});
                     return;
                 }
                 if (data.groups?.length > 0) {
@@ -486,7 +486,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
                     e.dataset.pageSize = data.pageSize.toString();
                 }
                 const tableHTMLs = getTableHTMLs(data, e);
-                const avBodyHTML = `<div class="av__body">
+                const avBodyHTML = `<div class="av__body" style="float: left">
     ${tableHTMLs.contentHTML}
     ${tableHTMLs.footerHTML}
 </div>`;