✨ https://github.com/siyuan-note/siyuan/issues/9304

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

@@ -225,13 +225,13 @@
     flex: 1;
     overflow: hidden;
 
-    & > svg,
+    & > .av__cellicon {
-    & > img {
+      height: 1em;
-      height: 12px;
+      width: 1em;
-      width: 12px;
       color: var(--b3-theme-on-surface);
-      margin-right: 5px;
+      margin: 0 5px 0 0;
       flex-shrink: 0;
+      line-height: 1em;
     }
   }
 

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

@@ -6,8 +6,8 @@ import {getDefaultOperatorByType, setFilter} from "./filter";
 import {genCellValue} from "./cell";
 import {openMenuPanel} from "./openMenuPanel";
 import {getLabelByNumberFormat} from "./number";
-import {removeAttrViewColAnimation} from "./action";
+import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action";
-import {openEmojiPanel} from "../../../emoji";
+import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
 
 export const duplicateCol = (options: {
     protyle: IProtyle,
@@ -103,7 +103,7 @@ export const getEditHTML = (options: {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <span style="padding: 5px;margin-right: 8px;" class="block__icon block__icon--show" data-type="update-icon"><svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg></span>
+    <span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
     <span class="b3-menu__label"><input data-type="name" style="margin: 4px 0" class="b3-text-field" type="text" value="${colData.name}"></span>
 </button>`;
     if (colData.options && colData.options.length > 0) {
@@ -179,6 +179,7 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme
             type: colData.type,
         }]);
         colData.name = newValue;
+        updateAttrViewCellAnimation(options.protyle.wysiwyg.element.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`));
     });
     nameElement.addEventListener("keydown", (event: KeyboardEvent) => {
         if (event.isComposing) {
@@ -367,9 +368,10 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
     const type = cellElement.getAttribute("data-dtype") as TAVCol;
     const colId = cellElement.getAttribute("data-col-id");
     const avID = blockElement.getAttribute("data-av-id");
+    const oldValue = cellElement.querySelector(".av__celltext").textContent.trim();
     const menu = new Menu("av-header-cell", () => {
         const newValue = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
-        if (newValue === cellElement.textContent.trim()) {
+        if (newValue === oldValue) {
             return;
         }
         transaction(protyle, [{
@@ -382,14 +384,15 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
             action: "updateAttrViewCol",
             id: colId,
             avID,
-            name: cellElement.textContent.trim(),
+            name: oldValue,
             type,
         }]);
+        updateAttrViewCellAnimation(cellElement);
     });
     menu.addItem({
-        iconHTML: `<span style="align-self: center;margin-right: 8px;" class="block__icon block__icon--show"><svg><use xlink:href="#${getColIconByType(type)}"></use></svg></span>`,
+        iconHTML: `<span style="align-self: center;margin-right: 8px;width: 14px;" class="block__icon block__icon--show">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>`,
         type: "readonly",
-        label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
+        label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${oldValue}">`,
         bind(element) {
             const iconElement = element.querySelector(".block__icon") as HTMLElement
             iconElement.addEventListener("click", (event) => {
@@ -411,6 +414,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
                         avID,
                         data: cellElement.dataset.icon,
                     }]);
+                    iconElement.innerHTML = unicode ? unicode2Emoji(unicode) : `<svg><use xlink:href="#${getColIconByType(type)}"></use></svg>`
+                    updateAttrViewCellAnimation(cellElement);
                 });
                 event.preventDefault();
                 event.stopPropagation();
@@ -564,7 +569,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
                     avID,
                 }], [{
                     action: "addAttrViewCol",
-                    name: cellElement.textContent.trim(),
+                    name: oldValue,
                     avID,
                     type: type,
                     id: colId

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

@@ -9,12 +9,12 @@ import {addFilter, getFiltersHTML, setFilter} from "./filter";
 import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
 import {bindDateEvent, getDateHTML, setDateValue} from "./date";
 import {formatNumber} from "./number";
-import {removeAttrViewColAnimation} from "./action";
+import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action";
 import {addAssetLink, bindAssetEvent, editAssetItem, getAssetHTML, updateAssetCell} from "./asset";
 import {Constants} from "../../../constants";
 import {hideElements} from "../../ui/hideElements";
 import {pathPosix} from "../../../util/pathName";
-import {openEmojiPanel} from "../../../emoji";
+import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -509,6 +509,21 @@ export const openMenuPanel = (options: {
                         y: rect.bottom,
                         h: rect.height,
                         w: rect.width
+                    }, (unicode) => {
+                        const colId = menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
+                        transaction(options.protyle, [{
+                            action: "setAttrViewColIcon",
+                            id: colId,
+                            avID,
+                            data: unicode,
+                        }], [{
+                            action: "setAttrViewColIcon",
+                            id: colId,
+                            avID,
+                            data: target.dataset.icon,
+                        }]);
+                        target.innerHTML = unicode ? unicode2Emoji(unicode) : `<svg><use xlink:href="#${getColIconByType(target.dataset.colType as TAVCol)}"></use></svg>`
+                        updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`))
                     });
                     event.preventDefault();
                     event.stopPropagation();
@@ -693,7 +708,12 @@ export const openMenuPanel = (options: {
                     break;
                 } else if (type === "addAssetExist") {
                     const rect = target.getBoundingClientRect();
-                    options.protyle.toolbar.showAssets(options.protyle, {x: rect.right, y: rect.bottom, w: target.parentElement.clientWidth + 8, h: rect.height}, (url) => {
+                    options.protyle.toolbar.showAssets(options.protyle, {
+                        x: rect.right,
+                        y: rect.bottom,
+                        w: target.parentElement.clientWidth + 8,
+                        h: rect.height
+                    }, (url) => {
                         let value: IAVCellAssetValue;
                         if (Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(url).toLowerCase())) {
                             value = {

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

@@ -37,7 +37,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
 style="width: ${column.width || "200px"};
 ${column.wrap ? "" : "white-space: nowrap;"}">
     <div draggable="true" class="av__cellheader">
-        ${column.icon ? unicode2Emoji(column.icon) : `<svg><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
+        ${column.icon ? unicode2Emoji(column.icon, "av__cellicon", true) : `<svg class="av__cellicon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
         <span class="av__celltext">${column.name}</span>
     </div>
     <div class="av__widthdrag"></div>