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

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

@@ -913,10 +913,8 @@
       position: sticky;
       left: 0;
       clear: both;
-      display: flex;
       font-size: 87.5%;
-      align-items: center;
+      padding: 16px 0 0 0;
-      padding-top: 16px;
 
       .counter:hover {
         background-color: var(--b3-list-icon-hover);

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

@@ -157,7 +157,13 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.stopPropagation();
             return true;
         } else if (type === "av-add-more") {
-            insertRows({blockElement, protyle, count: 1, previousID: ""});
+            insertRows({
+                blockElement,
+                protyle,
+                count: 1,
+                previousID: "",
+                groupID: blockElement.querySelector(".av__body")?.getAttribute("data-group-id") || ""
+            });
             event.preventDefault();
             event.stopPropagation();
             return true;
@@ -221,6 +227,18 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
+        } else if (type === "av-add-top") {
+            const titleElement = hasClosestByClassName(target, "av__group-title");
+            insertRows({
+                blockElement,
+                protyle,
+                count: 1,
+                previousID: "",
+                groupID: titleElement ? titleElement.nextElementSibling.getAttribute("data-group-id") : ""
+            });
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
         } else if (target.classList.contains("av__cell--header")) {
             showColMenu(protyle, blockElement, target);
             event.preventDefault();

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

@@ -7,7 +7,7 @@ import {cellValueIsEmpty, renderCell} from "../cell";
 import {focusBlock} from "../../../util/selection";
 import {electronUndo} from "../../../undo";
 import {addClearButton} from "../../../../util/addClearButton";
-import {avRender, genTabHeaderHTML, updateSearch} from "../render";
+import {avRender, genTabHeaderHTML, getGroupTitleHTML, updateSearch} from "../render";
 import {processRender} from "../../../util/processCode";
 import {getColIconByType, getColNameByType} from "../col";
 import {getCompressURL} from "../../../../util/image";
@@ -106,11 +106,7 @@ const renderGroupGallery = (options: ITableOptions) => {
     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">
+            avBodyHTML += `${getGroupTitleHTML(group, group.fields.length)}
-    <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>`;
         }
     });

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

@@ -223,6 +223,19 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
 <div class="av__row--footer${hasCalc ? " av__readonly--show" : ""}">${calcHTML}</div>`;
 };
 
+export const getGroupTitleHTML = (group: IAVView, counter: number) => {
+    return `<div class="av__group-title block__icons">
+    <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="${counter === 0 ? "fn__none" : "counter"}">${counter}</span>
+    <span class="fn__space"></span>
+    <span class="block__icon ariaLabel" data-type="av-add-top" data-position="north" aria-label="${window.siyuan.languages.newRow}"><svg><use xlink:href="#iconAdd"></use></svg></span>
+</div>`;
+};
+
 const renderGroupTable = (options: ITableOptions) => {
     const searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
     const isSearching = searchInputElement && document.activeElement === searchInputElement;
@@ -232,11 +245,7 @@ const renderGroupTable = (options: ITableOptions) => {
     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">
+            avBodyHTML += `${getGroupTitleHTML(group, group.rows.length)}
-    <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.rows.length === 0 ? "fn__none" : "counter"}">${group.rows.length}</span>
-</div>
 <div data-group-id="${group.id}" style="float: left" class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement)}</div>`;
         }
     });