From 3f8777be963de4c933b41d9ab4d3422aceea01da Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 5 Aug 2025 12:28:10 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/15433

---
 app/src/assets/scss/business/_av.scss | 39 ++++++++++++++++++++++++---
 app/src/protyle/render/av/render.ts   |  9 +++----
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 011b58de1..75e6dc535 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -913,18 +913,49 @@
       position: sticky;
       left: 0;
       clear: both;
-      font-size: 87.5%;
-      padding: 16px 0 0 0;
+      padding: 16px 0 8px 0;
+      display: flex;
+      align-items: center;
 
-      .counter:hover {
+      &:hover .av__group-icon--hover {
+        display: block;
+      }
+    }
+
+    &-counter {
+      font-size: 87.5%;
+      color: var(--b3-theme-on-surface-light);
+      margin: 0 8px;
+    }
+
+    &-icon {
+      cursor: pointer;
+      color: var(--b3-theme-on-surface-light);
+      translate: var(--b3-transition);
+      border-radius: var(--b3-border-radius);
+
+      &:hover {
+        color: var(--b3-theme-on-background);
         background-color: var(--b3-list-icon-hover);
       }
 
       svg {
+        padding: 4px;
+        float: left;
+        width: calc(1em - 6px);
+        height: calc(1em - 6px);
         transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1);
       }
-    }
 
+      &--hover {
+        display: none;
+
+        svg {
+          width: calc(1em - 4px);
+          height: calc(1em - 4px);
+        }
+      }
+    }
 
     &-arrow--open {
       transform: rotate(90deg);
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index bdc99ce45..0dea9283b 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -226,15 +226,14 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
 };
 
 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}">
+    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}
-    <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>
+    <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>`;
 };