diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
new file mode 100644
index 000000000..8ea97fbb6
--- /dev/null
+++ b/app/src/protyle/render/av/action.ts
@@ -0,0 +1,45 @@
+import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
+import {transaction} from "../../wysiwyg/transaction";
+import {Menu} from "../../../plugin/API";
+
+export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
+    const blockElement = hasClosestBlock(event.target)
+    const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add")
+    if (addElement && blockElement) {
+        const menu = new Menu("av-header-add")
+        menu.addItem({
+            icon: "iconAlignLeft",
+            label: window.siyuan.languages.text,
+            click() {
+                const id = Lute.NewNodeID()
+                transaction(protyle, [{
+                    action: "addAttrViewCol",
+                    name: "Text",
+                    parentID: blockElement.getAttribute("data-av-id"),
+                    type: "text",
+                    id
+                }], [{
+                    action: "removeAttrViewCol",
+                    id,
+                    parentID: blockElement.getAttribute("data-av-type"),
+                }]);
+
+            }
+        })
+        const addRect = addElement.getBoundingClientRect()
+        menu.open({
+            x: addRect.left,
+            y: addRect.bottom
+        })
+        event.preventDefault();
+        event.stopPropagation();
+        return true
+    }
+    const cellElement = hasClosestByClassName(event.target, "av__cell")
+    if (cellElement && blockElement) {
+        event.preventDefault();
+        event.stopPropagation();
+        return true
+    }
+    return false
+}
diff --git a/app/src/protyle/render/av/index.ts b/app/src/protyle/render/av/index.ts
index fecd329f1..22bb6822d 100644
--- a/app/src/protyle/render/av/index.ts
+++ b/app/src/protyle/render/av/index.ts
@@ -16,62 +16,27 @@ export const avRender = (element: Element) => {
             if (e.getAttribute("data-render") === "true") {
                 return;
             }
-            // const data = {
-            //     title: "table",
-            //     filter: {},
-            //     sorts: {},
-            //     columns: [{
-            //         width: 500,
-            //         icon: "",
-            //         id: "",
-            //         name: "columnA",
-            //         wrap: false,
-            //         type: "",
-            //     }, {
-            //         width: 500,
-            //         icon: "",
-            //         id: "",
-            //         name: "columnB",
-            //         wrap: false,
-            //         type: "",
-            //     }],
-            //     rows: [{
-            //         id: "",
-            //         cells: [{
-            //             value: "a",
-            //         }, {
-            //             color: "var(--b3-card-error-color)",
-            //             bgColor: "var(--b3-card-error-background)",
-            //             value: "a1",
-            //         }]
-            //     }, {
-            //         id: "",
-            //         cells: [{
-            //             color: "var(--b3-card-success-color)",
-            //             bgColor: "var(--b3-card-success-background)",
-            //             value: "b",
-            //         }, {
-            //             value: "b1",
-            //         }]
-            //     }]
-            // };
             fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
                 const data = response.data.av;
+
+                // header
                 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: IAVColumn) => {
                     tableHTML += `
-<div class="av__cell" style="width: ${column.width}px;">${column.name}</div>`
+<div class="av__cell" style="width: ${column.width || 200}px;">${column.name}</div>`
                 });
                 tableHTML += `<div class="block__icons">
-    <div class="block__icon block__icon--show"><svg><use xlink:href="#iconAdd"></use></svg></div>
+    <div class="block__icon block__icon--show" data-type="av-header-add"><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 class="block__icon block__icon--show"  data-type="av-header-more"><svg><use xlink:href="#iconMore"></use></svg></div>
 </div>
 </div>`;
+
+                // body
                 data.rows.forEach((row: IAVRow) => {
                     tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`;
                     row.cells.forEach((cell, index) => {
-                        tableHTML += `<div class="av__cell" style="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 || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`
                     });
                     tableHTML += `<div></div></div>`;
                 });
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index a927f9f93..dc9ae5d19 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -66,6 +66,7 @@ import {getBacklinkHeadingMore, loadBreadcrumb} from "./renderBacklink";
 import {removeSearchMark} from "../toolbar/util";
 import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
 import {commonClick} from "./commonClick";
+import {avClick} from "../render/av/action";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -1912,6 +1913,10 @@ export class WYSIWYG {
                 return;
             }
 
+            if (avClick(protyle, event)) {
+                return;
+            }
+
             // 点击空白
             if (event.target.contains(this.element) && this.element.lastElementChild && !protyle.disabled) {
                 const lastRect = this.element.lastElementChild.getBoundingClientRect();
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 6aaf6f3d4..699c8b369 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -18,6 +18,8 @@ type TOperation =
     | "append"
     | "insertAttrViewBlock"
     | "removeAttrViewBlock"
+    | "addAttrViewCol"
+    | "removeAttrViewCol"
     | "addFlashcards"
     | "removeFlashcards"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
@@ -279,6 +281,8 @@ interface IOperation {
     retData?: any
     nextID?: string // insert 专享
     srcIDs?: string[] // insertAttrViewBlock 专享
+    name?: string // addAttrViewCol 专享
+    type?: "text" | "date" | "number" | "relation" | "rollup" | "select" // addAttrViewCol 专享
     deckID?: string // add/removeFlashcards 专享
     blockIDs?: string[] // add/removeFlashcards 专享
 }