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

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

@@ -920,6 +920,16 @@
       &:hover .av__group-icon--hover {
         display: block;
       }
+
+      .b3-chip {
+        padding: 2px 6px;
+        line-height: calc(1.625em - 4px);
+        font-size: inherit;
+      }
+
+      & + .av__body .av__gallery {
+        margin-top: 0;
+      }
     }
 
     &-counter {

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

@@ -114,7 +114,7 @@ const renderGroupGallery = (options: ITableOptions) => {
     });
     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"))}
+    ${genTabHeaderHTML(options.data, isSearching || !!query, !options.protyle.disabled && !hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
     <div>
         ${avBodyHTML}
     </div>
@@ -143,7 +143,7 @@ const afterRenderGallery = (options: ITableOptions) => {
             (options.blockElement.querySelector(".av__body") as HTMLElement).dataset.pageSize = options.resetData.pageSizes[groupId];
             return;
         }
-        const bodyElement = options.blockElement.querySelector(`.av__body[data-group-id="${groupId}"]`) as HTMLElement
+        const bodyElement = options.blockElement.querySelector(`.av__body[data-group-id="${groupId}"]`) as HTMLElement;
         if (bodyElement) {
             bodyElement.dataset.pageSize = options.resetData.pageSizes[groupId];
         }
@@ -162,9 +162,6 @@ const afterRenderGallery = (options: ITableOptions) => {
     if (options.cb) {
         options.cb(options.data);
     }
-    if (options.data.view.hideAttrViewName) {
-        options.blockElement.querySelector(".av__gallery").classList.add("av__gallery--top");
-    }
     if (!options.renderAll) {
         return;
     }
@@ -302,7 +299,7 @@ export const renderGallery = async (options: {
     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"))}
+    ${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, !options.protyle.disabled && !hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
     <div>
         <div class="av__body" data-page-size="${view.pageSize}">
             ${bodyHTML}
@@ -323,4 +320,7 @@ export const renderGallery = async (options: {
         protyle: options.protyle,
         blockElement: options.blockElement,
     });
+    if (options.data.view.hideAttrViewName) {
+        options.blockElement.querySelector(".av__gallery").classList.add("av__gallery--top");
+    }
 };

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

@@ -225,12 +225,20 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
 };
 
 export const getGroupTitleHTML = (group: IAVView, counter: number) => {
+    let nameHTML = '';
+    if (["mSelect", "select"].includes(group.groupValue.type)) {
+        group.groupValue.mSelect.forEach((item) => {
+            nameHTML += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
+        });
+    } else {
+        nameHTML = group.name;
+    }
     return `<div class="av__group-title">
     <div class="av__group-icon" 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}
+    ${nameHTML}
     <span class="${counter === 0 ? "fn__none" : "av__group-counter"}">${counter}</span>
     <span class="av__group-icon av__group-icon--hover ariaLabel" data-type="av-add-top" data-position="north" aria-label="${window.siyuan.languages.newRow}"><svg><use xlink:href="#iconAdd"></use></svg></span>
 </div>`;
@@ -609,7 +617,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                     // hide
                     titleElement.classList.add("fn__none");
                 }
-                if (item.getAttribute("data-av-type") === "gallery") {
+                if (item.getAttribute("data-av-type") === "gallery" && !item.querySelector(".av__group-title")) {
                     const galleryElement = item.querySelector(".av__gallery");
                     if (!operation.data) {
                         galleryElement.classList.remove("av__gallery--top");

app/src/types/index.d.ts

@@ -863,6 +863,7 @@ interface IAVView {
     sorts: IAVSort[],
     groups: IAVView[]
     group: IAVGroup
+    groupValue: IAVCellValue
 }
 
 interface IAVTable extends IAVView {