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

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

@@ -25,7 +25,7 @@ import {selectRow} from "./row";
 import * as dayjs from "dayjs";
 import {openCalcMenu} from "./calc";
 import {avRender} from "./render";
-import {openViewMenu} from "./view";
+import {addView, openViewMenu} from "./view";
 
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     const blockElement = hasClosestBlock(event.target);
@@ -82,7 +82,12 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-        } else if (type === "av-sort") {
+        } else if (type === "av-switcher") {
+            openMenuPanel({protyle, blockElement, type: "switcher"});
+            event.preventDefault();
+            event.stopPropagation();
+            return true;
+        }  else if (type === "av-sort") {
             openMenuPanel({protyle, blockElement, type: "sorts"});
             event.preventDefault();
             event.stopPropagation();
@@ -93,17 +98,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.stopPropagation();
             return true;
         } else if (type === "av-add") {
-            const id = Lute.NewNodeID();
+            addView(protyle, blockElement)
-            const avID = blockElement.getAttribute("data-av-id");
-            transaction(protyle, [{
-                action: "addAttrViewView",
-                avID,
-                id
-            }], [{
-                action: "removeAttrViewView",
-                avID,
-                id
-            }]);
             event.preventDefault();
             event.stopPropagation();
             return true;

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

@@ -21,14 +21,15 @@ import {openAsset} from "../../../editor/util";
 /// #endif
 import {previewImage} from "../../preview/image";
 import {assetMenu} from "../../../menus/protyle";
-import {bindViewEvent, getViewHTML} from "./view";
+import {addView, bindViewEvent, getSwitcherHTML, getViewHTML, openViewMenu} from "./view";
 import {removeBlock} from "../../wysiwyg/remove";
 import {getEditorRange} from "../../util/selection";
+import {avRender} from "./render";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
     blockElement: Element,
-    type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" | "date" | "asset",
+    type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" | "date" | "asset" | "switcher",
     colId?: string, // for edit
     cellElements?: HTMLElement[],   // for select & date
     cb?: (avPanelElement: Element) => void
@@ -51,6 +52,8 @@ export const openMenuPanel = (options: {
             html = getPropertiesHTML(data.view);
         } else if (options.type === "sorts") {
             html = getSortsHTML(data.view.columns, data.view.sorts);
+        } else if (options.type === "switcher") {
+            html = getSwitcherHTML(data.views, data.viewID);
         } else if (options.type === "filters") {
             html = getFiltersHTML(data.view);
         } else if (options.type === "select") {
@@ -130,6 +133,8 @@ export const openMenuPanel = (options: {
                 type = "sorts";
             } else if (targetElement.querySelector('[data-type="removeFilter"]')) {
                 type = "filters";
+            } else if (targetElement.querySelector('[data-type="av-view-edit"]')) {
+                type = "switcher";
             } else if (targetElement.querySelector('[data-type="editAssetItem"]')) {
                 type = "assets";
             } else if (targetElement.querySelector('[data-type="setColOption"]')) {
@@ -213,6 +218,21 @@ export const openMenuPanel = (options: {
                 bindSortsEvent(options.protyle, menuElement, data);
                 return;
             }
+            if (type === "switcher") {
+                transaction(options.protyle, [{
+                    action: "sortAttrViewView",
+                    avID,
+                    id: sourceId,
+                    previousID: isTop ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id")
+                }], [{
+                    action: "sortAttrViewView",
+                    avID,
+                    id: sourceId,
+                    previousID: sourceElement.previousElementSibling?.getAttribute("data-id")
+                }]);
+                // TODO
+                return;
+            }
             if (type === "filters") {
                 const changeData = data.view.filters;
                 const oldData = Object.assign([], changeData);
@@ -905,6 +925,34 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "av-add") {
+                    addView(options.protyle, options.blockElement);
+                    avPanelElement.remove();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                } else if (type === "av-view-edit") {
+                    if (target.parentElement.querySelector(".b3-chip--primary")) {
+                        openViewMenu({
+                            protyle: options.protyle,
+                            blockElement: options.blockElement as HTMLElement,
+                            element: target.parentElement
+                        });
+                    } else {
+                        options.blockElement.removeAttribute("data-render");
+                        avRender(options.blockElement, options.protyle, () => {
+                            openViewMenu({
+                                protyle: options.protyle,
+                                blockElement: options.blockElement as HTMLElement,
+                                element: target.parentElement
+                            });
+                            avPanelElement.querySelector(".b3-chip--primary").classList.remove("b3-chip--primary")
+                            target.parentElement.querySelector(".b3-chip").classList.add("b3-chip--primary")
+                        }, target.parentElement.dataset.id);
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 }
                 target = target.parentElement;
             }

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

@@ -221,16 +221,21 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
             <span data-type="av-add" class="block__icon">
                 <svg><use xlink:href="#iconAdd"></use></svg>
             </span>
-            <div class="fn__flex-1 fn__space"></div>
+            <div class="fn__flex-1"></div>
-            <span data-type="av-filter" class="block__icon${data.filters.length > 0 ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.filter}">
+            <div class="fn__space"></div>
+            <span data-type="av-switcher" class="block__icon${response.data.views.length > 0 ? "" : " fn__none"}">
+                <svg><use xlink:href="#iconDown"></use></svg>
+            </span>
+            <div class="fn__space"></div>
+            <span data-type="av-filter" class="block__icon${data.filters.length > 0 ? " block__icon--active" : ""}">
                 <svg><use xlink:href="#iconFilter"></use></svg>
             </span>
             <div class="fn__space"></div>
-            <span data-type="av-sort" class="block__icon${data.sorts.length > 0 ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.sort}">
+            <span data-type="av-sort" class="block__icon${data.sorts.length > 0 ? " block__icon--active" : ""}">
                 <svg><use xlink:href="#iconSort"></use></svg>
             </span>
             <div class="fn__space"></div>
-            <span data-type="av-more" class="block__icon" aria-label="${window.siyuan.languages.more}">
+            <span data-type="av-more" class="block__icon">
                 <svg><use xlink:href="#iconMore"></use></svg>
             </span>
             <div class="fn__space"></div>

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

@@ -14,6 +14,7 @@ export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLEle
         icon: "iconEdit",
         label: window.siyuan.languages.rename,
         click() {
+            document.querySelector(".av__panel")?.remove();
             openMenuPanel({
                 protyle: options.protyle,
                 blockElement: options.blockElement,
@@ -28,6 +29,7 @@ export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLEle
         icon: "iconSettings",
         label: window.siyuan.languages.config,
         click() {
+            document.querySelector(".av__panel")?.remove();
             openMenuPanel({
                 protyle: options.protyle,
                 blockElement: options.blockElement,
@@ -40,6 +42,7 @@ export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLEle
         icon: "iconCopy",
         label: window.siyuan.languages.duplicate,
         click() {
+            document.querySelector(".av__panel")?.remove();
             const id = Lute.NewNodeID();
             transaction(options.protyle, [{
                 action: "duplicateAttrViewView",
@@ -57,7 +60,8 @@ export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLEle
         icon: "iconTrashcan",
         label: window.siyuan.languages.delete,
         click() {
-            if (options.element.parentElement.querySelectorAll("item").length === 1) {
+            document.querySelector(".av__panel")?.remove();
+            if (options.blockElement.querySelectorAll(".layout-tab-bar .item").length === 1) {
                 removeBlock(options.protyle, options.blockElement, getEditorRange(options.blockElement));
             } else {
                 transaction(options.protyle, [{
@@ -147,3 +151,41 @@ export const getViewHTML = (data: IAVTable) => {
 </button>
 </div>`;
 };
+
+export const getSwitcherHTML = (views: IAVView[], viewId: string) => {
+    let html = ""
+    views.forEach((item) => {
+        html += `<button draggable="true" class="b3-menu__item" data-id="${item.id}">
+    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+     <div class="fn__flex-1">
+        <span class="b3-chip${item.id === viewId ? " b3-chip--primary" : ""}">
+            ${item.icon ? unicode2Emoji(item.icon, "icon", true) : '<svg class="icon"><use xlink:href="#iconTable"></use></svg>'}
+            <span class="fn__ellipsis">${item.name}</span>
+        </span>
+    </div>
+    <svg class="b3-menu__action" data-type="av-view-edit"><use xlink:href="#iconEdit"></use></svg>
+</button>`;
+    });
+    return `<div class="b3-menu__items">
+<button class="b3-menu__item" data-type="av-add">
+    <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.new}</span>
+</button>
+<button class="b3-menu__separator"></button>
+${html}
+</div>`
+}
+
+export const addView = (protyle: IProtyle, blockElement: Element) => {
+    const id = Lute.NewNodeID();
+    const avID = blockElement.getAttribute("data-av-id");
+    transaction(protyle, [{
+        action: "addAttrViewView",
+        avID,
+        id
+    }], [{
+        action: "removeAttrViewView",
+        avID,
+        id
+    }]);
+}

app/src/protyle/wysiwyg/transaction.ts

@@ -712,7 +712,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrViewName", "setAttrViewFilters",
         "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat", "removeAttrViewBlock",
         "replaceAttrViewBlock", "updateAttrViewColTemplate", "setAttrViewColIcon", "setAttrViewColPin", "addAttrViewView",
-        "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView"].includes(operation.action)) {
+        "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView"].includes(operation.action)) {
         refreshAV(protyle, operation, isUndo);
     } else if (operation.action === "doUpdateUpdated") {
         updateElements.forEach(item => {

app/src/types/index.d.ts

@@ -47,6 +47,7 @@ type TOperation =
     | "removeAttrViewView"
     | "setAttrViewViewIcon"
     | "duplicateAttrViewView"
+    | "sortAttrViewView"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" |