🎨 position https://github.com/siyuan-note/siyuan/issues/7536

app/src/assets/scss/base.scss

@@ -53,6 +53,9 @@ ctrl+p 搜索: 202
 .block__popover: 205
 .block__popover--top: 206
 
+// 需小于 .b3-menu
+.av__panel: 209
+
 // 需大于 .block__popover
 .b3-menu: 210
 
@@ -78,8 +81,6 @@ progressLoading: 400
 #windowControls: 502
 
 .b3-snackbar: 503
-
-.av__panel: 504
 */
 
 html {

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

@@ -142,7 +142,7 @@
   }
 
   &__panel {
-    z-index: 504;
+    z-index: 209;
     position: relative;
 
     .b3-menu {

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

@@ -3,6 +3,7 @@ import {fetchPost} from "../../../util/fetch";
 import {addCol} from "./addCol";
 import {getColIconByType} from "./col";
 import {setPosition} from "../../../util/setPosition";
+import {Menu} from "../../../plugin/Menu";
 
 export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => {
     let avPanelElement = document.querySelector(".av__panel");
@@ -57,11 +58,26 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type
                     event.stopPropagation();
                     break;
                 } else if (type === "removeSorts") {
-                    // TODO
+                    transaction(protyle, [{
+                        action: "setAttrView",
+                        id: avId,
+                        data: {
+                            sorts: []
+                        }
+                    }], [{
+                        action: "setAttrView",
+                        id: avId,
+                        data: {
+                            sorts: data.sorts
+                        }
+                    }]);
+                    data.sorts = [];
+                    menuElement.innerHTML = getSortsHTML(data);
+                    setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.stopPropagation();
                     break;
                 } else if (type === "addSort") {
-                    // TODO
+                    addSort({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle});
                     event.stopPropagation();
                     break;
                 } else if (type === "removeSort") {
@@ -306,3 +322,56 @@ ${hideHTML}
     <span class="b3-menu__label">${window.siyuan.languages.new}</span>
 </button>`;
 };
+
+const addSort = (options: {
+    data: IAV,
+    rect: DOMRect,
+    menuElement: HTMLElement,
+    tabRect: DOMRect,
+    avId: string,
+    protyle: IProtyle
+}) => {
+    const menu = new Menu("av-add-sort");
+    options.data.columns.forEach((column) => {
+        let hasSort = false;
+        options.data.sorts.find((sort) => {
+            if (sort.column === column.id) {
+                hasSort = true;
+                return true;
+            }
+        });
+        if (!hasSort) {
+            menu.addItem({
+                label: column.name,
+                icon: getColIconByType(column.type),
+                click: () => {
+                    const oldSorts = Object.assign([], options.data.sorts);
+                    options.data.sorts.push({
+                        column: column.id,
+                        order: "ASC",
+                    });
+                    transaction(options.protyle, [{
+                        action: "setAttrView",
+                        id: options.avId,
+                        data: {
+                            sorts: options.data.sorts
+                        }
+                    }], [{
+                        action: "setAttrView",
+                        id: options.avId,
+                        data: {
+                            sorts: oldSorts
+                        }
+                    }]);
+                    options.menuElement.innerHTML = getSortsHTML(options.data);
+                    setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height);
+                }
+            });
+        }
+    });
+    menu.open({
+        x: options.rect.left,
+        y: options.rect.bottom,
+        h: options.rect.height,
+    })
+}

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

@@ -20,7 +20,7 @@ export const avRender = (element: Element, cb?: () => void) => {
                 return;
             }
             fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
-                const data = response.data.av;
+                const data = response.data.av as IAV;
                 // header
                 let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>';
                 let index = 0;
@@ -89,7 +89,7 @@ ${cell.color ? `color:${cell.color};` : ""}"><span class="av__celltext">${text}<
         <div class="layout-tab-bar fn__flex">
             <div class="item item--focus">
                 <svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>
-                <span class="item__text">Table</span>
+                <span class="item__text">${data.type}</span>
             </div>
             <div class="fn__flex-1"></div>
             <span data-type="av-filter" class="block__icon block__icon--show b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.filter}">
@@ -105,7 +105,7 @@ ${cell.color ? `color:${cell.color};` : ""}"><span class="av__celltext">${text}<
             </span>
             <div class="fn__space"></div>
         </div>
-        <div contenteditable="true" class="av__title" data-tip="${window.siyuan.languages.title}">${data.title || ""}</div>
+        <div contenteditable="true" class="av__title" data-tip="${window.siyuan.languages.title}">${data.name || ""}</div>
         <div class="av__counter fn__none"></div>
     </div>
     <div class="av__scroll">

app/src/types/index.d.ts

@@ -29,6 +29,7 @@ type TOperation =
     | "setAttrViewColHidden"
     | "setAttrViewColWrap"
     | "setAttrViewColWidth"
+    | "setAttrView"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" |
@@ -827,6 +828,9 @@ interface IAV {
     columns: IAVColumn[],
     filters: [],
     sorts: IAVSort[],
+    name: string,
+    type: "table"
+    rows: IAVRow[],
 }
 
 interface IAVSort {