From 3791b61059fa6ac54963ca1f41a6f50687e586ba Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 8 Jun 2023 12:03:04 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/7536

---
 app/src/assets/scss/protyle/_wysiwyg.scss | 29 +++++++++++++++++++++--
 app/src/protyle/render/av/index.ts        | 24 +++++++++++++------
 app/src/protyle/scroll/event.ts           | 12 ++++++++++
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 806aabd56..4302e4ebe 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -33,8 +33,33 @@
     }
 
     &.av {
-      .av__scroll {
-        overflow: auto hidden;
+      .av {
+        &__scroll {
+          overflow: auto hidden;
+          cursor: pointer;
+        }
+
+        &__row {
+          display: flex;
+          border-bottom: 1px solid var(--b3-theme-surface-lighter);
+        }
+
+        &__cell {
+          padding: 5px;
+          flex-shrink: 0;
+          border-right: 1px solid var(--b3-theme-surface-lighter)
+        }
+
+        &__firstcol {
+          input {
+            margin: 11px 5px;
+            opacity: 0;
+          }
+
+          &:hover input {
+            opacity: 1;
+          }
+        }
       }
     }
 
diff --git a/app/src/protyle/render/av/index.ts b/app/src/protyle/render/av/index.ts
index 1b7484cdf..af975667b 100644
--- a/app/src/protyle/render/av/index.ts
+++ b/app/src/protyle/render/av/index.ts
@@ -53,17 +53,23 @@ export const avRender = (element: Element) => {
                     }]
                 }]
             };
-            let tableHTML = "<div class='fn__flex'>";
+            let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
             data.columns.forEach((column) => {
-                tableHTML += `<div style="flex-shrink: 0;width: ${column.width}px;">${column.name}</div>`
+                tableHTML += `
+<div class="av__cell" style="width: ${column.width}px;">${column.name}</div>`
             });
-            tableHTML += "</div>";
+            tableHTML += `<div class="block__icons">
+    <div class="block__icon block__icon--show"><svg><use xlink:href="#iconAdd"></use></svg></div>
+    <div class="fn__space"></div>
+    <div class="block__icon block__icon--show"><svg><use xlink:href="#iconMore"></use></svg></div>
+</div>
+</div>`;
             data.rows.forEach((row) => {
-                tableHTML += "<div class='fn__flex'>";
+                tableHTML += '<div class="av__row"><div class="av__firstcol"><input type="checkbox"></div>';
                 row.cells.forEach((cell, index) => {
-                    tableHTML += `<div style="flex-shrink: 0;width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
+                    tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
                 });
-                tableHTML += "</div>";
+                tableHTML += `<div></div></div>`;
             });
             const paddingLeft = e.parentElement.style.paddingLeft;
             const paddingRight = e.parentElement.style.paddingRight;
@@ -82,7 +88,11 @@ export const avRender = (element: Element) => {
     <div class="av__scroll">
         <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};min-width: 100%;float: left;">
             ${tableHTML}
-            <div>add</div>
+            <div class="block__icon block__icon--show">
+                <div class="fn__space"></div>
+                <svg><use xlink:href="#iconAdd"></use></svg><span class="fn__space"></span>
+                ${window.siyuan.languages.addAttr}
+            </div>
         </div>
     </div>
 </div>`;
diff --git a/app/src/protyle/scroll/event.ts b/app/src/protyle/scroll/event.ts
index 4fb3e5cfb..a42fbf923 100644
--- a/app/src/protyle/scroll/event.ts
+++ b/app/src/protyle/scroll/event.ts
@@ -24,6 +24,18 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
             }
         }
 
+        protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
+            if (item.parentElement.classList.contains("protyle-wysiwyg")) {
+                const headerTop = item.offsetTop - 30 + 56
+                const headerElement = item.querySelector(".av__row--header") as HTMLElement
+                if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
+                    headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
+                } else {
+                    headerElement.style.transform = "";
+                }
+            }
+        });
+
         if (!protyle.element.classList.contains("block__edit") && !isMobile()) {
             protyle.contentElement.setAttribute("data-scrolltop", element.scrollTop.toString());
         }