🎨 fix https://github.com/siyuan-note/siyuan/issues/10394

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

@@ -163,7 +163,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
             table.keyValues?.forEach(item => {
                 html += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
     <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
-    <div class="block__logo ariaLabel${item.values[0].type === "block" ? "" : " fn__pointer"}" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}"">
+    <div class="block__logo ariaLabel${item.values[0].type === "block" ? "" : " fn__pointer"}" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
         ${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
         <span>${item.key.name}</span>
     </div>
@@ -178,7 +178,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
 <div class="fn__flex">
     <div class="fn__space"></div><div class="fn__space"></div>
     <button data-type="addColumn" class="b3-button b3-button--outline"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
-</div></div>`;
+</div><div class="fn__hr--b"></div></div>`;
         });
         if (element.innerHTML === "") {
             let dragBlockElement: HTMLElement;

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

@@ -9,7 +9,7 @@ import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action"
 import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
 import {focusBlock} from "../../util/selection";
 import {toggleUpdateRelationBtn} from "./relation";
-import {bindRollupEvent, getRollupHTML} from "./rollup";
+import {bindRollupData, getRollupHTML} from "./rollup";
 
 export const duplicateCol = (options: {
     protyle: IProtyle,
@@ -166,7 +166,7 @@ export const getEditHTML = (options: {
     return `<div class="b3-menu__items">
     ${html}
     <button class="b3-menu__separator"></button>
-    <button class="b3-menu__item${options.isCustomAttr ? " fn__none" : ""}" data-type="${colData.hidden ? "showCol" : "hideCol"}">
+    <button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
         <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
         <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
     </button>
@@ -362,7 +362,7 @@ export const bindEditEvent = (options: {
             toggleUpdateRelationBtn(options.menuElement, avID);
         }
     }
-    bindRollupEvent(options);
+    bindRollupData(options);
 };
 
 export const getColNameByType = (type: TAVCol) => {
@@ -439,28 +439,52 @@ const addAttrViewColAnimation = (options: {
     icon?: string,
     previousID: string
 }) => {
-    if (!options.blockElement || !options.blockElement.classList.contains("av")) {
+    if (!options.blockElement) {
         return;
     }
-    options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
+    if (options.blockElement.classList.contains("av")) {
-        let previousElement;
+        options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
-        if (options.previousID) {
+            let previousElement;
-            previousElement = item.querySelector(`[data-col-id="${options.previousID}"]`);
+            if (options.previousID) {
-        } else {
+                previousElement = item.querySelector(`[data-col-id="${options.previousID}"]`);
-            previousElement = item.lastElementChild.previousElementSibling;
+            } else {
-        }
+                previousElement = item.lastElementChild.previousElementSibling;
-        let html = "";
+            }
-        if (index === 0) {
+            let html = "";
-            // av__pulse 用于检测是否新增，和 render 中 isPulse 配合弹出菜单
+            if (index === 0) {
-            html = `<div class="av__cell av__cell--header" draggable="true" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
+                // av__pulse 用于检测是否新增，和 render 中 isPulse 配合弹出菜单
+                html = `<div class="av__cell av__cell--header" draggable="true" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
     ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
     <span class="av__celltext fn__flex-1">${options.name}</span>
     <div class="av__widthdrag av__pulse"></div>
 </div>`;
-        } else {
+            } else {
-            html = '<div class="av__cell" style="width: 200px"><span class="av__pulse"></span></div>';
+                html = '<div class="av__cell" style="width: 200px"><span class="av__pulse"></span></div>';
+            }
+            previousElement.insertAdjacentHTML("afterend", html);
+        });
+    } else {
+        const nodeId= options.blockElement.getAttribute("data-node-id");
+        options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}">
+    <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
+    <div class="block__logo ariaLabel" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">
+        <svg class="block__logoicon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>
+        <span>${getColNameByType(options.type)}</span>
+    </div>
+    <div data-col-id="${options.id}" data-block-id="${nodeId}" data-type="${options.type}" data-options="[]" class="fn__flex-1 fn__flex">
+        <div class="fn__flex-1"></div>
+    </div>
+</div>`);
+    }
+    openMenuPanel({
+        protyle: options.protyle,
+        blockElement: options.blockElement,
+        type: "edit",
+        colId: options.id,
+        editData: {
+            previousID: options.previousID,
+            colData: genColDataByType(options.type, options.id),
         }
-        previousElement.insertAdjacentHTML("afterend", html);
     });
     window.siyuan.menus.menu.remove();
 };
@@ -1196,3 +1220,20 @@ export const addCol = (protyle: IProtyle, blockElement: Element, previousID?: st
     });
     return menu;
 };
+
+const genColDataByType = (type: TAVCol, id: string) => {
+    const colData: IAVColumn = {
+        hidden: false,
+        icon: "",
+        id,
+        name: getColNameByType(type),
+        numberFormat: "",
+        pin: false,
+        template: "",
+        type,
+        width: "",
+        wrap: false,
+        calc: null
+    }
+    return colData
+}

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

@@ -27,7 +27,7 @@ import {focusBlock, getEditorRange} from "../../util/selection";
 import {avRender} from "./render";
 import {setPageSize} from "./row";
 import {bindRelationEvent, getRelationHTML, openSearchAV, setRelationCell, updateRelation} from "./relation";
-import {bindRollupEvent, getRollupHTML, goSearchRollupCol} from "./rollup";
+import {bindRollupData, getRollupHTML, goSearchRollupCol} from "./rollup";
 import {updateCellsValue} from "./cell";
 import {openCalcMenu} from "./calc";
 
@@ -36,6 +36,11 @@ export const openMenuPanel = (options: {
     blockElement: Element,
     type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" | "date" | "asset" | "switcher" | "relation" | "rollup",
     colId?: string, // for edit, rollup
+    // 使用前端构造的数据
+    editData?: {
+        previousID: string,
+        colData: IAVColumn,
+    },
     cellElements?: HTMLElement[],   // for select & date & relation & asset
     cb?: (avPanelElement: Element) => void
 }) => {
@@ -68,6 +73,18 @@ export const openMenuPanel = (options: {
         } else if (options.type === "asset") {
             html = getAssetHTML(options.cellElements);
         } else if (options.type === "edit") {
+            if (options.editData) {
+                if (options.editData.previousID) {
+                    data.view.columns.find((item, index) => {
+                        if (item.id === options.editData.previousID) {
+                            data.view.columns.splice(index + 1, 0, options.editData.colData);
+                            return true;
+                        }
+                    });
+                } else {
+                    data.view.columns.splice(0, 0, options.editData.colData);
+                }
+            }
             html = getEditHTML({protyle: options.protyle, data, colId: options.colId, isCustomAttr});
         } else if (options.type === "date") {
             html = getDateHTML(data.view, options.cellElements);
@@ -124,7 +141,7 @@ export const openMenuPanel = (options: {
                     blockElement: options.blockElement
                 });
             } else if (options.type === "rollup") {
-                bindRollupEvent({protyle: options.protyle, data, menuElement});
+                bindRollupData({protyle: options.protyle, data, menuElement});
             }
             if (["select", "date", "relation", "rollup"].includes(options.type)) {
                 const inputElement = menuElement.querySelector("input");
@@ -311,12 +328,12 @@ export const openMenuPanel = (options: {
                 transaction(options.protyle, [{
                     action: "updateAttrViewColOptions",
                     id: colId,
-                    avID: data.id,
+                    avID,
                     data: changeData,
                 }], [{
                     action: "updateAttrViewColOptions",
                     id: colId,
-                    avID: data.id,
+                    avID,
                     data: oldData,
                 }]);
                 if (options.cellElements) {

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

@@ -296,29 +296,15 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
         } else {
             Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
                 item.removeAttribute("data-render");
-                const isPulse = item.querySelector(".av__pulse");
                 avRender(item, protyle, () => {
-                    if (operation.action === "addAttrViewCol" && isPulse) {
-                        openMenuPanel({protyle, blockElement: item, type: "edit", colId: operation.id});
-                    }
-
                     const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${operation.avID}"]`) as HTMLElement;
                     if (attrElement) {
                         // 更新属性面板
-                        renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle, (newElment) => {
+                        renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle);
-                            if (operation.action === "addAttrViewCol") {
-                                openMenuPanel({
-                                    protyle,
-                                    blockElement: newElment.querySelector(`div[data-av-id="${operation.avID}"]`),
-                                    type: "edit",
-                                    colId: operation.id
-                                });
-                            }
-                        });
                     }
                 }, ["addAttrViewView", "duplicateAttrViewView"].includes(operation.action) ? operation.id :
                     (operation.action === "removeAttrViewView" ? null : undefined));
             });
         }
-    }, ["insertAttrViewBlock", "addAttrViewCol"].includes(operation.action) ? 2 : 100);
+    }, ["insertAttrViewBlock"].includes(operation.action) ? 2 : 100);
 };

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

@@ -173,7 +173,7 @@ export const getRollupHTML = (options: { data?: IAV, cellElements?: HTMLElement[
 </button>`;
 };
 
-export const bindRollupEvent = (options: {
+export const bindRollupData = (options: {
     protyle: IProtyle,
     data: IAV,
     menuElement: HTMLElement