🎨 https://github.com/siyuan-note/siyuan/pull/16340

app/appearance/themes/daylight/theme.css

@@ -188,7 +188,6 @@
 
     /* 数据库 */
     --b3-av-gallery-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, var(--b3-border-color) 0px 0px 0px 1px;
-    --b3-av-kanban-content-hover-bg: var(--b3-theme-surface);
 
     /* 嵌入块 */
     --b3-embed-background: transparent;

app/appearance/themes/midnight/theme.css

@@ -187,7 +187,6 @@
 
     /* 数据库 */
     --b3-av-gallery-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, var(--b3-border-color) 0px 0px 0px 1px;
-    --b3-av-kanban-content-hover-bg: var(--b3-theme-surface);
 
     /* 嵌入块 */
     --b3-embed-background: transparent;

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

@@ -278,13 +278,18 @@
       position: relative;
       min-height: 40px;
 
-      &:hover {
+      &::before {
-        .av__gallery-cover {
+        transition: background 100ms ease-out;
-          background-color: var(--b3-theme-surface-light);
+        content: "";
-        }
+        inset: 0;
+        position: absolute;
+        border-radius: inherit;
+        background-color: var(--b3-theme-background);
+      }
 
-        .av__gallery-fields {
+      &:hover {
-          background-color: var(--b3-theme-surface);
+        &:not(.av__gallery-item--select)::before {
+          background-color: var(--b3-theme-surface-light);
         }
 
         .av__gallery-actions {
@@ -292,22 +297,16 @@
         }
       }
 
-      &--select:before {
+      &--select::before {
-        content: "";
+        background-color: var(--b3-theme-primary-lightest) !important;
-        background-color: var(--b3-theme-primary-lightest);
+        opacity: 1 !important;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-        position: absolute;
       }
     }
 
     &-cover {
       border-bottom: 1px solid var(--b3-border-color);
-      background-color: var(--b3-theme-surface);
       border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;
       overflow: hidden;
-      transition: background 100ms ease-out;
       position: relative;
       cursor: pointer;
 
@@ -376,9 +375,8 @@
     }
 
     &-fields {
-      border-radius: var(--b3-border-radius);
+      border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
       flex: 1;
-      transition: background 100ms ease-out;
       white-space: nowrap;
       font-size: 85%;
       min-height: 23px;
@@ -430,10 +428,6 @@
       }
     }
 
-    &-cover + &-fields {
-      border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
-    }
-
     &-field {
       position: relative;
     }
@@ -492,7 +486,7 @@
       position: relative;
 
       &:hover {
-        background-color: var(--b3-list-hover);
+        background-color: var(--b3-theme-surface-light);
         color: var(--b3-theme-on-background);
       }
     }
@@ -1010,6 +1004,58 @@
     display: flex;
     align-items: flex-start;
 
+    &--bg {
+      .av__kanban-group::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: var(--b3-av-kanban-background);
+        opacity: 0.16;
+        border-radius: inherit;
+      }
+
+      .av__gallery-item {
+        position: relative;
+        box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-background) 0 0 0 1px;
+
+        &::before {
+          background-color: var(--b3-av-kanban-background);
+          opacity: 0.26;
+        }
+
+        &:hover:not(.av__gallery-item--select)::before {
+          background-color: var(--b3-av-kanban-background);
+          opacity: 0.38;
+        }
+      }
+
+      .av__gallery-cover {
+        border-bottom-color: var(--b3-av-kanban-background);
+      }
+
+      .av__gallery-add {
+        box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-background) 0 0 0 1px;
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-color: var(--b3-av-kanban-background);
+          border-radius: inherit;
+          opacity: 0.26;
+        }
+
+        &:hover {
+          background-color: transparent;
+
+          &::before {
+            background-color: var(--b3-av-kanban-background);
+            opacity: 0.38;
+          }
+        }
+      }
+    }
+
     &-group {
       width: 260px;
       padding: 8px;
@@ -1017,23 +1063,6 @@
       position: relative;
       flex-shrink: 0;
 
-      &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background-color: var(--b3-av-kanban-border);
-        opacity: 0.161;
-        border-radius: inherit;
-        pointer-events: none;
-        z-index: 0;
-      }
-
-      &:hover {
-        .av__group-icon {
-          opacity: 1;
-        }
-      }
-
       &--small {
         width: 180px;
       }
@@ -1042,91 +1071,9 @@
         width: 320px;
       }
 
-      .av__group-icon {
-        opacity: 0;
-      }
-
       .av__group-title {
         padding-top: 0;
       }
-
-      .av__gallery-item {
-        position: relative;
-        box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-border, var(--b3-border-color)) 0 0 0 1px;
-
-        &::before {
-          content: "";
-          position: absolute;
-          inset: 0;
-          background-color: var(--b3-av-kanban-border);
-          opacity: 0.278;
-          border-radius: inherit;
-          pointer-events: none;
-          z-index: 0;
-        }
-
-        &--select::before {
-          content: "";
-          position: absolute;
-          inset: 0;
-          background-color: var(--b3-theme-primary-lighter);
-          border-radius: inherit;
-          pointer-events: none;
-          z-index: 1;
-        }
-
-        // 禁用父级 hover 规则对背景色的改变，避免与 ::before 伪元素冲突
-        &:hover {
-          .av__gallery-cover {
-            background-color: var(--b3-theme-surface);
-          }
-
-          .av__gallery-fields {
-            background-color: transparent;
-          }
-        }
-
-        .av__gallery-fields,
-        .av__gallery-cover {
-          position: relative;
-
-          &::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            background-color: transparent;
-            opacity: 0.361;
-            border-radius: inherit;
-            pointer-events: none;
-            z-index: 0;
-            transition: background-color 100ms ease-out;
-          }
-        }
-
-        &:hover .av__gallery-fields,
-        &:hover .av__gallery-cover {
-          &::before {
-            background-color: var(--b3-av-kanban-content-hover-bg);
-            opacity: 0.65;
-          }
-        }
-      }
-
-      .av__gallery-cover {
-        position: relative;
-        border-bottom: 1px solid var(--b3-av-kanban-border);
-
-        &::before {
-          content: "";
-          position: absolute;
-          inset: 0;
-          background-color: var(--b3-av-kanban-border);
-          opacity: 0.278;
-          border-radius: inherit;
-          pointer-events: none;
-          z-index: 0;
-        }
-      }
     }
   }
 }

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

@@ -31,7 +31,7 @@ const getKanbanTitleHTML = (group: IAVView, counter: number) => {
     <span class="av__group-name fn__ellipsis" style="white-space: nowrap;">${nameHTML}</span>
     ${counter === 0 ? '<span class="fn__space"></span>' : `<span aria-label="${window.siyuan.languages.entryNum}" data-position="north" class="av__group-counter ariaLabel">${counter}</span>`}
     <span class="fn__flex-1"></span>
-    <span class="av__group-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="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>`;
 };
 
@@ -198,18 +198,22 @@ export const renderKanban = async (options: {
         });
         return;
     }
-    const view: IAVGallery = data.view as IAVKanban;
+    const view = data.view as IAVKanban;
     let bodyHTML = "";
+    let isSelectGroup = false;
     view.groups.forEach((group: IAVKanban) => {
         if (group.groupHidden === 0) {
             let selectBg = "";
-            if (group.fillColBackgroundColor && ["mSelect", "select"].includes(group.groupKey.type)) {
+            if (group.fillColBackgroundColor) {
-                if (group.groupValue.mSelect) {
+                if (["mSelect", "select"].includes(group.groupValue.type)) {
-                    // 单选多选字段分组使用选项颜色
+                    isSelectGroup = true;
-                    selectBg = `style="--b3-av-kanban-border: var(--b3-font-background${group.groupValue.mSelect[0].color}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"`;
+                }
-                } else {
+                if (isSelectGroup) {
-                    // _@default@_ 分组使用 var(--b3-border-color)
+                    if (group.groupValue.mSelect && group.groupValue.mSelect.length > 0) {
-                    selectBg = 'style="--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);"';
+                        selectBg = `style="--b3-av-kanban-background: var(--b3-font-background${group.groupValue.mSelect[0].color});"`;
+                    } else {
+                        selectBg = 'style="--b3-av-kanban-background: var(--b3-border-color);"';
+                    }
                 }
             }
             bodyHTML += `<div class="av__kanban-group${group.cardSize === 0 ? " av__kanban-group--small" : (group.cardSize === 2 ? " av__kanban-group--big" : "")}"${selectBg}>
@@ -221,13 +225,19 @@ export const renderKanban = async (options: {
     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"))}
-    <div class="av__kanban">
+    <div class="av__kanban${isSelectGroup ? " av__kanban--bg" : ""}">
         ${bodyHTML}
     </div>
     <div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
 </div>`;
     } else {
-        options.blockElement.querySelector(".av__kanban").innerHTML = bodyHTML;
+        const kanbanElement = options.blockElement.querySelector(".av__kanban");
+        kanbanElement.innerHTML = bodyHTML;
+        if (isSelectGroup) {
+            kanbanElement.classList.add("av__kanban--bg");
+        } else {
+            kanbanElement.classList.remove("av__kanban--bg");
+        }
     }
     afterRenderGallery({
         resetData,

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

@@ -727,19 +727,23 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
     }
     if (operation.action === "setAttrViewFillColBackgroundColor") {
         getAVElements(protyle, operation.avID, operation.viewID).forEach((avItem: HTMLElement) => {
+            const hasSelect = avItem.querySelector(".av__group-title .b3-chip");
+            const kanbanElement = avItem.querySelector(".av__kanban");
+            if (operation.data && hasSelect) {
+                kanbanElement.classList.add("av__kanban--bg");
+            } else {
+                kanbanElement.classList.remove("av__kanban--bg");
+            }
             avItem.querySelectorAll(".av__kanban-group").forEach(item => {
-                if (!operation.data) {
+                if (operation.data && hasSelect) {
-                    item.removeAttribute("style");
+                    const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
-                    return;
+                    if (nameElement) {
-                }
+                        item.setAttribute("style", `--b3-av-kanban-background:var(--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)})`);
-                const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+                    } else {
-                if (nameElement) {
+                        item.setAttribute("style", "--b3-av-kanban-background: var(--b3-border-color)");
-                    const colorMatch = nameElement.style.backgroundColor.match(/--b3-font-background(\d+)/);
-                    if (colorMatch) {
-                        item.setAttribute("style", `--b3-av-kanban-border: var(--b3-font-background${colorMatch[1]}); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);`);
                     }
                 } else {
-                    item.setAttribute("style", "--b3-av-kanban-border: var(--b3-border-color); --b3-av-kanban-content-hover-bg: var(--b3-av-kanban-border);");
+                    item.removeAttribute("style");
                 }
             });
         });

app/src/protyle/util/editorCommonEvent.ts

@@ -602,7 +602,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                     ghostElement.className = "protyle-wysiwyg protyle-wysiwyg--attr";
                     const isKanban = blockElement.getAttribute("data-av-type") === "kanban";
                     if (isKanban) {
-                        ghostElement.innerHTML = "<div class=\"av__kanban\"></div>";
+                        ghostElement.innerHTML = `<div class="${blockElement.querySelector(".av__kanban").className}"></div>`;
                     }
                     let galleryElement: HTMLElement;
                     let cloneGalleryElement = document.createElement("div");
@@ -614,7 +614,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                             if (isKanban) {
                                 cloneGalleryElement.className = "av__kanban-group";
                                 cloneGalleryElement.setAttribute("style", item.parentElement.parentElement.parentElement.getAttribute("style") || "--b3-av-kanban-content-bg: var(--b3-theme-background);");
-                                cloneGalleryElement.innerHTML = "<div class=\"av__gallery\"></div>";
+                                cloneGalleryElement.innerHTML = '<div class="av__gallery"></div>';
                                 ghostElement.firstElementChild.appendChild(cloneGalleryElement);
                             } else {
                                 cloneGalleryElement.classList.add("av__gallery");
@@ -628,11 +628,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                         if (isKanban) {
                             cloneGalleryElement.firstElementChild.appendChild(cloneItem);
                         } else {
-                            cloneItem.querySelector(".av__gallery-fields").setAttribute("style", "background-color: var(--b3-theme-background)");
                             cloneGalleryElement.appendChild(cloneItem);
                         }
                     });
-                    ghostElement.setAttribute("style", "top:100vh;position:fixed;opacity:.1;padding:0;z-index: 8");
+                    ghostElement.setAttribute("style", "left: 1px;top:100vh;position:fixed;opacity:.1;padding:0;z-index: 8");
                     document.body.append(ghostElement);
                     event.dataTransfer.setDragImage(ghostElement, -10, -10);
                     setTimeout(() => {