From f58587fc097849bfc970f3e0189419009de16bb0 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 5 Nov 2025 12:08:17 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8873

---
 app/src/assets/scss/business/_av.scss      |  1 +
 app/src/protyle/render/av/kanban/render.ts |  6 +--
 app/src/protyle/render/av/layout.ts        | 38 ++++++++---------
 app/src/protyle/render/av/render.ts        | 47 ++++++++++++++--------
 4 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index ca0c27782..27c3b8907 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -978,6 +978,7 @@
     gap: 16px;
     padding: 16px 1px;
     display: flex;
+    align-items: flex-start;
 
     &-group {
       width: 260px;
diff --git a/app/src/protyle/render/av/kanban/render.ts b/app/src/protyle/render/av/kanban/render.ts
index 3c9237c77..485693013 100644
--- a/app/src/protyle/render/av/kanban/render.ts
+++ b/app/src/protyle/render/av/kanban/render.ts
@@ -50,8 +50,6 @@ const getKanbanHTML = (data: IAVKanban) => {
                 }
             } else if (item.coverContent) {
                 galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
-            } else {
-                galleryHTML += `<div class="${coverClass}"></div>`;
             }
         }
         galleryHTML += '<div class="av__gallery-fields">';
@@ -108,7 +106,7 @@ ${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>`;
-    return `<div class="av__gallery${data.cardSize === 0 ? " av__gallery--small" : (data.cardSize === 2 ? " av__gallery--big" : "")}">
+    return `<div class="av__gallery av__gallery--small">
     ${galleryHTML}
 </div>
 <div class="av__gallery-load${data.cardCount > data.cards.length ? "" : " fn__none"}">
@@ -212,7 +210,7 @@ export const renderKanban = async (options: {
                     selectBg = `style="--b3-av-kanban-border:${color};--b3-av-kanban-bg:${color}29;--b3-av-kanban-content-bg:${color}47;--b3-av-kanban-content-hover-bg:${color}5c;"`;
                 }
             }
-            bodyHTML += `<div class="av__kanban-group"${selectBg}>
+            bodyHTML += `<div class="av__kanban-group${group.cardSize === 0 ? " av__kanban-group--small" : (group.cardSize === 2 ? " av__kanban-group--big" : "")}"${selectBg}>
     ${getKanbanTitleHTML(group, group.cards.length)}
     <div data-group-id="${group.id}" data-page-size="${group.pageSize}" data-dtype="${group.groupKey.type}" data-content="${Lute.EscapeHTMLStr(group.groupValue.text?.content)}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getKanbanHTML(group)}</div>
 </div>`;
diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts
index 1a1f5e28a..8e729579c 100644
--- a/app/src/protyle/render/av/layout.ts
+++ b/app/src/protyle/render/av/layout.ts
@@ -154,24 +154,6 @@ export const bindLayoutEvent = (options: {
         }]);
         options.data.view.showIcon = checked;
     });
-    const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
-    toggleBgElement.addEventListener("change", () => {
-        const avID = options.blockElement.getAttribute("data-av-id");
-        const blockID = options.blockElement.getAttribute("data-node-id");
-        const checked = toggleBgElement.checked;
-        transaction(options.protyle, [{
-            action: "setAttrViewFillColBackgroundColor",
-            avID,
-            blockID,
-            data: checked
-        }], [{
-            action: "setAttrViewFillColBackgroundColor",
-            avID,
-            blockID,
-            data: !checked
-        }]);
-        (options.data.view as IAVKanban).fillColBackgroundColor = checked;
-    })
     const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement;
     toggleWrapElement.addEventListener("change", () => {
         const avID = options.blockElement.getAttribute("data-av-id");
@@ -193,9 +175,27 @@ export const bindLayoutEvent = (options: {
         });
         options.data.view.wrapField = checked;
     });
-    if (options.data.viewType !== "gallery") {
+    if (options.data.viewType === "table") {
         return;
     }
+    const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
+    toggleBgElement.addEventListener("change", () => {
+        const avID = options.blockElement.getAttribute("data-av-id");
+        const blockID = options.blockElement.getAttribute("data-node-id");
+        const checked = toggleBgElement.checked;
+        transaction(options.protyle, [{
+            action: "setAttrViewFillColBackgroundColor",
+            avID,
+            blockID,
+            data: checked
+        }], [{
+            action: "setAttrViewFillColBackgroundColor",
+            avID,
+            blockID,
+            data: !checked
+        }]);
+        (options.data.view as IAVKanban).fillColBackgroundColor = checked;
+    })
     const toggleFitElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-fit"]') as HTMLInputElement;
     toggleFitElement.addEventListener("change", () => {
         const avID = options.blockElement.getAttribute("data-av-id");
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 8dede213c..e8195464e 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -638,14 +638,25 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
     }
     if (operation.action === "setAttrViewCardSize") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
-            item.querySelectorAll(".av__gallery").forEach(galleryItem => {
-                galleryItem.classList.remove("av__gallery--small", "av__gallery--big");
-                if (operation.data === 0) {
-                    galleryItem.classList.add("av__gallery--small");
-                } else if (operation.data === 2) {
-                    galleryItem.classList.add("av__gallery--big");
-                }
-            });
+            if (item.getAttribute("data-av-type") === "kanban") {
+                item.querySelectorAll(".av__kanban-group").forEach(galleryItem => {
+                    galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big");
+                    if (operation.data === 0) {
+                        galleryItem.classList.add("av__kanban-group--small");
+                    } else if (operation.data === 2) {
+                        galleryItem.classList.add("av__kanban-group--big");
+                    }
+                });
+            } else {
+                item.querySelectorAll(".av__gallery").forEach(galleryItem => {
+                    galleryItem.classList.remove("av__gallery--small", "av__gallery--big");
+                    if (operation.data === 0) {
+                        galleryItem.classList.add("av__gallery--small");
+                    } else if (operation.data === 2) {
+                        galleryItem.classList.add("av__gallery--big");
+                    }
+                });
+            }
         });
         return;
     }
@@ -691,16 +702,18 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
     if (operation.action === "setAttrViewFillColBackgroundColor") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => {
             avItem.querySelectorAll(".av__kanban-group").forEach(item => {
-                if (item.getAttribute("style")) {
-                    let selectBg;
-                    const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
-                    if (nameElement) {
-                        selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
-                    } else {
-                        selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
-                    }
-                    item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
+                if (!operation.data) {
+                    item.removeAttribute("style");
+                    return;
                 }
+                let selectBg;
+                const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+                if (nameElement) {
+                    selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+                } else {
+                    selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
+                }
+                item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
             });
         });
         return;