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

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

@@ -4,6 +4,10 @@
   display: flex;
   max-width: 100%;
 
+  &:hover .block__icon {
+    opacity: 1;
+  }
+
   &__container {
     overflow: auto;
   }

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

@@ -25,6 +25,7 @@ import {selectRow} from "./row";
 import * as dayjs from "dayjs";
 import {openCalcMenu} from "./calc";
 import {avRender} from "./render";
+import {openViewMenu} from "./view";
 
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     const blockElement = hasClosestBlock(event.target);
@@ -240,7 +241,9 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.stopPropagation();
             return true;
         } else if (target.classList.contains("item") && target.parentElement.classList.contains("layout-tab-bar")) {
-            if (!target.classList.contains("item--focus")) {
+            if (target.classList.contains("item--focus")) {
+                openViewMenu(target)
+            } else {
                 blockElement.removeAttribute("data-render");
                 avRender(blockElement, protyle, undefined, target.dataset.id);
             }

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

@@ -21,6 +21,7 @@ import {openAsset} from "../../../editor/util";
 /// #endif
 import {previewImage} from "../../preview/image";
 import {assetMenu} from "../../../menus/protyle";
+import {bindViewEvent, getViewHTML} from "./view";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -42,7 +43,7 @@ export const openMenuPanel = (options: {
         const data = response.data as IAV;
         let html;
         if (options.type === "config") {
-            html = getConfigHTML(data.view);
+            html = getViewHTML(data.view);
         } else if (options.type === "properties") {
             html = getPropertiesHTML(data.view);
         } else if (options.type === "sorts") {
@@ -90,6 +91,8 @@ export const openMenuPanel = (options: {
                 bindSortsEvent(options.protyle, menuElement, data);
             } else if (options.type === "edit") {
                 bindEditEvent({protyle: options.protyle, data, menuElement});
+            } else if (options.type === "config") {
+                bindViewEvent({protyle: options.protyle, data, menuElement});
             }
         }
         avPanelElement.addEventListener("dragstart", (event: DragEvent) => {
@@ -345,8 +348,9 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "goConfig") {
-                    menuElement.innerHTML = getConfigHTML(data.view);
+                    menuElement.innerHTML = getViewHTML(data.view);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
+                    bindViewEvent({protyle: options.protyle, data, menuElement});
                     event.preventDefault();
                     event.stopPropagation();
                     break;
@@ -511,6 +515,11 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "update-view-icon") {
+                    // TODO
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "update-icon") {
                     const rect = target.getBoundingClientRect();
                     openEmojiPanel("", "av", {
@@ -918,35 +927,3 @@ ${hideHTML}
 </div>`;
 };
 
-const getConfigHTML = (data: IAVTable) => {
-    return `<div class="b3-menu__items">
-<button class="b3-menu__item" data-type="nobg">
-    <span class="b3-menu__label ft__center">${window.siyuan.languages.config}</span>
-</button>
-<button class="b3-menu__separator"></button>
-<button class="b3-menu__item" data-type="goProperties">
-    <svg class="b3-menu__icon"></svg>
-    <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
-    <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-</button>
-<button class="b3-menu__item" data-type="goFilters">
-    <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
-    <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
-    <span class="b3-menu__accelerator">${data.filters.length}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-</button>
-<button class="b3-menu__item" data-type="goSorts">
-    <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
-    <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
-    <span class="b3-menu__accelerator">${data.sorts.length}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-</button>
-<button class="b3-menu__item">
-    <svg class="b3-menu__icon"></svg>
-    <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
-    <span class="b3-menu__accelerator">50</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
-</button>
-</div>`;
-};

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

@@ -212,26 +212,26 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
         <div class="layout-tab-bar fn__flex">
             ${tabHTML}
             <div class="fn__space"></div>
-            <span data-type="av-add" class="block__icon block__icon--show">
+            <span data-type="av-add" class="block__icon">
                 <svg><use xlink:href="#iconAdd"></use></svg>
             </span>
-            <div class="fn__flex-1"></div>
-            ${response.data.isMirror ? ` <span class="block__icon block__icon--show b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.mirrorTip}">
-    <svg><use xlink:href="#iconSplitLR"></use></svg></span><div class="fn__space"></div>` : ""}
-            <span data-type="av-filter" class="block__icon block__icon--show b3-tooltips b3-tooltips__w${data.filters.length > 0 ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.filter}">
+            <div class="fn__flex-1 fn__space"></div>
+            <span data-type="av-filter" class="block__icon${data.filters.length > 0 ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.filter}">
                 <svg><use xlink:href="#iconFilter"></use></svg>
             </span>
             <div class="fn__space"></div>
-            <span data-type="av-sort" class="block__icon block__icon--show b3-tooltips b3-tooltips__w${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" : ""}" aria-label="${window.siyuan.languages.sort}">
                 <svg><use xlink:href="#iconSort"></use></svg>
             </span>
             <div class="fn__space"></div>
-            <span data-type="av-more" class="block__icon block__icon--show b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.more}">
+            <span data-type="av-more" class="block__icon" aria-label="${window.siyuan.languages.more}">
                 <svg><use xlink:href="#iconMore"></use></svg>
             </span>
             <div class="fn__space"></div>
+            ${!response.data.isMirror ? ` <span class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.mirrorTip}">
+    <svg><use xlink:href="#iconSplitLR"></use></svg></span><div class="fn__space"></div>` : ""}
         </div>
-        <div contenteditable="${protyle.disabled ? "false" : "true"}" spellcheck="${window.siyuan.config.editor.spellcheck.toString()}" class="av__title" data-title="${data.name || ""}" data-tip="${window.siyuan.languages.title}">${response.data.name || ""}</div>
+        <div contenteditable="${protyle.disabled ? "false" : "true"}" spellcheck="${window.siyuan.config.editor.spellcheck.toString()}" class="av__title" data-title="${response.data.name || ""}" data-tip="${window.siyuan.languages.title}">${response.data.name || ""}</div>
         <div class="av__counter fn__none"></div>
     </div>
     <div class="av__scroll">

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

@@ -0,0 +1,104 @@
+import {Menu} from "../../../plugin/Menu";
+import {unicode2Emoji} from "../../../emoji";
+
+export const openViewMenu = (element:HTMLElement) => {
+    const menu = new Menu("av-view", () => {
+
+    });
+    if (menu.isOpen) {
+        return;
+    }
+    menu.addItem({
+        icon: "iconEdit",
+        label: window.siyuan.languages.rename,
+        click () {
+
+        }
+    })
+    menu.addItem({
+        icon: "iconSettings",
+        label: window.siyuan.languages.config,
+        click () {
+
+        }
+    })
+    menu.addSeparator();
+    menu.addItem({
+        icon: "iconCopy",
+        label: window.siyuan.languages.duplicate,
+        click () {
+
+        }
+    })
+    menu.addItem({
+        icon: "iconTrashcan",
+        label: window.siyuan.languages.delete,
+        click () {
+
+        }
+    })
+    const rect = element.getBoundingClientRect()
+    menu.open({
+        x: rect.left,
+        y: rect.bottom
+    })
+}
+
+export const bindViewEvent = (options: {
+    protyle: IProtyle,
+    data: IAV,
+    menuElement: HTMLElement
+}) => {
+    options.menuElement.querySelector('.b3-text-field[data-type="name"]').addEventListener("blur", (event) => {
+
+    })
+}
+
+export const getViewHTML = (data: IAVTable) => {
+    return `<div class="b3-menu__items">
+<button class="b3-menu__item" data-type="nobg">
+    <span class="b3-menu__label ft__center">${window.siyuan.languages.config}</span>
+</button>
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="nobg">
+    <span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-icon="${data.icon}" data-type="update-view-icon">${data.icon ? unicode2Emoji(data.icon) : '<svg><use xlink:href="#iconTable"></use></svg>'}</span>
+    <span class="b3-menu__label" style="padding: 4px;display: flex;"><input data-type="name" class="b3-text-field fn__block" type="text" value="${data.name}"></span>
+</button>
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item" data-type="goProperties">
+    <svg class="b3-menu__icon"></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
+    <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
+    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+</button>
+<button class="b3-menu__item" data-type="goFilters">
+    <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
+    <span class="b3-menu__accelerator">${data.filters.length}</span>
+    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+</button>
+<button class="b3-menu__item" data-type="goSorts">
+    <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
+    <span class="b3-menu__accelerator">${data.sorts.length}</span>
+    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+</button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon"></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
+    <span class="b3-menu__accelerator">50</span>
+    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+</button>
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon">
+        <use xlink:href="#iconCopy"></use>
+    </svg>
+    <span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
+</button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
+</button>
+</div>`;
+};

app/src/types/index.d.ts

@@ -43,6 +43,7 @@ type TOperation =
     | "updateAttrViewColNumberFormat"
     | "replaceAttrViewBlock"
     | "addAttrViewView"
+    | "setAttrViewViewName"
     | "removeAttrViewView"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
@@ -1022,6 +1023,7 @@ interface IAVTable {
     type: "table"
     rows: IAVRow[],
     id: string
+    icon: string
 }
 
 interface IAVFilter {