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

app/src/assets/scss/business/_custom.scss

@@ -1,10 +1,44 @@
 .custom-attr {
+
+  &__avvalue {
+    cursor: pointer;
+    transition: var(--b3-transition);
+    border-radius: var(--b3-border-radius);
+    padding: 4px 8px;
+    line-height: 26px;
+    min-height: 26px;
+
+    &:hover {
+      background-color: var(--b3-theme-background);
+    }
+  }
+
+  &__avheader {
+    border-bottom: 1px solid var(--b3-border-color);
+    padding: 8px;
+
+    .block__logo {
+      color: var(--b3-protyle-inline-blockref-color);
+      opacity: .86;
+      transition: var(--b3-transition);
+      cursor: pointer;
+
+      svg {
+        margin-right: 4px;
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
   .b3-label {
     display: block;
     padding: 8px 16px;
   }
 
-  .block__logo {
+  .block__logo:not(.popover__block) {
     width: 160px;
     color: var(--b3-theme-on-surface);
 
@@ -17,22 +51,6 @@
       white-space: nowrap;
       overflow: hidden;
     }
-
-    &.custom-attr__avheader {
-      color: var(--b3-protyle-inline-blockref-color);
-      opacity: .86;
-      transition: var(--b3-transition);
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-      border-bottom: 1px solid var(--b3-border-color);
-      padding: 8px 0;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
   }
 
   .block__icons {
@@ -54,19 +72,6 @@
     }
   }
 
-  .custom-attr__avvalue {
-    cursor: pointer;
-    transition: var(--b3-transition);
-    border-radius: var(--b3-border-radius);
-    padding: 4px 8px;
-    line-height: 26px;
-    min-height: 26px;
-
-    &:hover {
-      background-color: var(--b3-theme-background);
-    }
-  }
-
   .b3-chip {
     margin: 1px 2px;
   }

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

@@ -1,8 +1,9 @@
 import {fetchPost} from "../../../util/fetch";
-import {getColIconByType} from "./col";
+import {addCol, getColIconByType} from "./col";
 import {escapeAttr} from "../../../util/escape";
 import * as dayjs from "dayjs";
 import {popTextCell} from "./cell";
+import {hasClosestBlock} from "../../util/hasClosest";
 
 const genAVRollupHTML = (value: IAVCellValue) => {
     let html = "";
@@ -149,9 +150,13 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
             avName: string
         }) => {
             html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView">
-<div class="block__logo custom-attr__avheader popover__block" data-id='${JSON.stringify(table.blockIDs)}'>
+<div class="fn__flex custom-attr__avheader">
-    <svg><use xlink:href="#iconDatabase"></use></svg>
+    <div class="block__logo popover__block" data-id='${JSON.stringify(table.blockIDs)}'>
-    <span>${table.avName || window.siyuan.languages.database}</span>
+        <svg><use xlink:href="#iconDatabase"></use></svg>
+        <span>${table.avName || window.siyuan.languages.database}</span>
+    </div>
+    <div class="fn__flex-1"></div>
+    <button data-type="addColumn" class="b3-button b3-button--outline"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
 </div>`;
             table.keyValues?.forEach(item => {
                 html += `<div class="block__icons av__row" data-id="${id}">
@@ -198,6 +203,27 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
                         event.stopPropagation();
                         event.preventDefault();
                         break;
+                    } else if (type === "template") {
+                        popTextCell(protyle, [target], "template");
+                        event.stopPropagation();
+                        event.preventDefault();
+                        break;
+                    } else if (type === "rollup") {
+                        popTextCell(protyle, [target], "rollup");
+                        event.stopPropagation();
+                        event.preventDefault();
+                        break;
+                    } else if (type === "addColumn") {
+                        const addMenu = addCol(protyle, hasClosestBlock(target) as HTMLElement, "");
+                        const addRect = target.getBoundingClientRect();
+                        addMenu.open({
+                            x: addRect.left,
+                            y: addRect.bottom,
+                            h: addRect.height
+                        });
+                        event.stopPropagation();
+                        event.preventDefault();
+                        break;
                     }
                     target = target.parentElement;
                 }

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

@@ -427,7 +427,7 @@ const addAttrViewColAnimation = (options: {
     icon?: string,
     previousID: string
 }) => {
-    if (!options.blockElement) {
+    if (!options.blockElement || !options.blockElement.classList.contains("av")) {
         return;
     }
     options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {

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

@@ -75,12 +75,14 @@ export const openMenuPanel = (options: {
         } else if (options.type === "relation") {
             html = getRelationHTML(data, options.cellElements);
             if (!html) {
-                openMenuPanel({
+                if (options.blockElement.classList.contains("av")) {
-                    protyle: options.protyle,
+                    openMenuPanel({
-                    blockElement: options.blockElement,
+                        protyle: options.protyle,
-                    type: "edit",
+                        blockElement: options.blockElement,
-                    colId: options.cellElements[0].dataset.colId
+                        type: "edit",
-                });
+                        colId: options.cellElements[0].dataset.colId
+                    });
+                }
                 return;
             }
         }

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

@@ -296,7 +296,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                     if (operation.action === "addAttrViewCol" && isPulse) {
                         openMenuPanel({protyle, blockElement: item, type: "edit", colId: operation.id});
                     }
-                    if (operation.action === "updateAttrViewCell") {
+                    if (["updateAttrViewColRollup","updateAttrViewColTemplate", "updateAttrViewCell", "addAttrViewCol"].includes(operation.action)) {
                         const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${operation.avID}"]`) as HTMLElement
                         if (attrElement) {
                             // 更新属性面板