🎨 fix https://github.com/siyuan-note/siyuan/issues/10448

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

@@ -424,6 +424,10 @@
         overflow: hidden;
       }
 
+      &__icon.fn__grab {
+        color: var(--b3-theme-on-surface-light);
+      }
+
       &__item {
         transition: margin .2s cubic-bezier(0, 0, .2, 1) 0ms;
       }
@@ -436,7 +440,8 @@
         cursor: auto;
       }
 
-      &__item:not([data-type="nobg"]):hover {
+      &__item:not([data-type="nobg"]):hover,
+      &__item--current:not([data-type="nobg"]) {
         background-color: var(--b3-list-hover);
       }
     }

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

@@ -112,12 +112,15 @@ export const getEditHTML = (options: {
     <span class="b3-menu__accelerator" style="margin-left: 0">${getColNameByType(colData.type)}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>`;
-    if (["mSelect", "select"].includes(colData.type) && colData.options && colData.options.length > 0) {
+    if (["mSelect", "select"].includes(colData.type)) {
         html += `<button class="b3-menu__separator"></button>
-<button class="b3-menu__item">
+<button class="b3-menu__item" data-type="nobg">
     <svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg>
     <span class="b3-menu__label" style="padding: 4px;display: flex"><input data-type="addOption" class="b3-text-field fn__block fn__size200" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
 </button>`;
+        if (!colData.options) {
+            colData.options = [];
+        }
         colData.options.forEach(item => {
             html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
@@ -464,7 +467,7 @@ const addAttrViewColAnimation = (options: {
             previousElement.insertAdjacentHTML("afterend", html);
         });
     } else {
-        const nodeId= options.blockElement.getAttribute("data-node-id");
+        const nodeId = options.blockElement.getAttribute("data-node-id");
         options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}">
     <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
     <div class="block__logo ariaLabel" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">

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

@@ -1119,11 +1119,9 @@ const getPropertiesHTML = (data: IAVTable) => {
         if (item.hidden) {
             hideHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
-    <div class="fn__flex-1">
-        <span class="b3-chip">
-            ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
-            <span class="fn__ellipsis">${item.name}</span>
-        </span>
+    <div class="b3-menu__label fn__flex">
+        ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
+        ${item.name}
     </div>
     <svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEyeoff"></use></svg>
     <svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
@@ -1131,11 +1129,9 @@ const getPropertiesHTML = (data: IAVTable) => {
         } else {
             showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
-    <div class="fn__flex-1">
-        <span class="b3-chip">
-            ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
-            <span class="fn__ellipsis">${item.name}</span>
-        </span>
+    <div class="b3-menu__label fn__flex">
+        ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
+        ${item.name}
     </div>
     <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEye"></use></svg>
     <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>

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

@@ -169,6 +169,8 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
             <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 class="fn__space"></span>
+                <small>${response.data.views.length}</small>
             </span>
             <div class="fn__space"></div>
             <span data-type="av-filter" class="block__icon${data.filters.length > 0 ? " block__icon--active" : ""}">

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

@@ -166,13 +166,11 @@ export const getViewHTML = (data: IAVTable) => {
 export const getSwitcherHTML = (views: IAVView[], viewId: string) => {
     let html = "";
     views.forEach((item) => {
-        html += `<button draggable="true" class="b3-menu__item" data-id="${item.id}">
+        html += `<button draggable="true" class="b3-menu__item${item.id === viewId ? " b3-menu__item--current" : ""}" data-id="${item.id}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
-    <div class="fn__flex-1" data-type="av-view-switch">
-        <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 class="b3-menu__label fn__flex" data-type="av-view-switch">
+        ${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : '<svg class="b3-menu__icon"><use xlink:href="#iconTable"></use></svg>'}
+        ${item.name}
     </div>
     <svg class="b3-menu__action" data-type="av-view-edit"><use xlink:href="#iconEdit"></use></svg>
 </button>`;