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

app/src/assets/scss/component/_form.scss

@@ -51,10 +51,11 @@
     }
   }
 
-  // repo password
+  // repo password & av description
   &__icona {
     position: relative;
     color: var(--b3-theme-on-surface);
+    line-height: normal;
 
     &-icon {
       position: absolute;

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

@@ -199,7 +199,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
                 let tabHTML = "";
                 let viewData: IAVView;
                 response.data.views.forEach((item: IAVView) => {
-                    tabHTML += `<div data-id="${item.id}" data-page="${item.pageSize}" class="item${item.id === response.data.viewID ? " item--focus" : ""}">
+                    tabHTML += `<div data-id="${item.id}" data-page="${item.pageSize}" aria-label="${item.name}<br><div class='ft__on-surface'>${item.desc || ""}</div>" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
     ${item.icon ? unicode2Emoji(item.icon, "item__graphic", true) : '<svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>'}
     <span class="item__text">${item.name}</span>
 </div>`;

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

@@ -120,6 +120,36 @@ export const bindViewEvent = (options: {
         }
     });
     inputElement.select();
+    const descElement = options.menuElement.querySelector('.b3-text-field[data-type="desc"]') as HTMLInputElement;
+    inputElement.nextElementSibling.addEventListener("click", () => {
+        descElement.parentElement.classList.toggle("fn__none");
+    })
+    descElement.addEventListener("blur", () => {
+        if (descElement.value !== descElement.dataset.value) {
+            transaction(options.protyle, [{
+                action: "setAttrViewViewDesc",
+                avID: options.data.id,
+                id: options.data.viewID,
+                data: descElement.value
+            }], [{
+                action: "setAttrViewViewDesc",
+                avID: options.data.id,
+                id: options.data.viewID,
+                data: descElement.dataset.value
+            }]);
+            descElement.dataset.value = descElement.value;
+        }
+    });
+    descElement.addEventListener("keydown", (event) => {
+        if (event.isComposing) {
+            return;
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            descElement.blur();
+            options.menuElement.parentElement.remove();
+        }
+    });
     const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
     toggleTitleElement.addEventListener("change", () => {
         const avID = options.blockElement.getAttribute("data-av-id");
@@ -163,8 +193,19 @@ export const getViewHTML = (data: IAV) => {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <span class="b3-menu__avemoji" data-icon="${view.icon}" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
+    <div>
-    <input data-type="name" class="b3-text-field fn__block" type="text" value="${view.name}" data-value="${view.name}" style="margin: 4px 0">
+        <div class="fn__flex">
+            <span class="b3-menu__avemoji" data-icon="${view.icon}" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
+            <div class="b3-form__icona">
+                <input data-type="name" class="b3-text-field b3-form__icona-input" type="text" value="${view.name}" data-value="${view.name}">
+                <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${view.desc ? view.desc : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
+            </div>
+        </div>
+        <div class="fn__none">
+            <div class="fn__hr--small"></div>
+            <input data-type="desc" class="b3-text-field fn__block" type="text" value="${view.desc}" data-value="${view.desc}">
+        </div>
+    </div>
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="go-properties">

app/src/protyle/wysiwyg/transaction.ts

@@ -742,7 +742,8 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "setAttrViewSorts", "setAttrViewColCalc", "removeAttrViewCol", "updateAttrViewColNumberFormat", "removeAttrViewBlock",
         "replaceAttrViewBlock", "updateAttrViewColTemplate", "setAttrViewColPin", "addAttrViewView", "setAttrViewColIcon",
         "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
-        "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "duplicateAttrViewKey"].includes(operation.action)) {
+        "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey",
+        "duplicateAttrViewKey", "setAttrViewViewDesc"].includes(operation.action)) {
         refreshAV(protyle, operation);
         return;
     }

app/src/types/index.d.ts

@@ -53,6 +53,7 @@ type TOperation =
     | "hideAttrViewName"
     | "setAttrViewColDate"
     | "unbindAttrViewBlock"
+    | "setAttrViewViewDesc"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |
@@ -757,6 +758,7 @@ interface IAV {
 
 interface IAVView {
     name: string
+    desc: string
     id: string
     type: string
     icon: string