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

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

@@ -116,17 +116,6 @@
 
     &--header {
       z-index: 3;
-
-      .av__cell {
-        padding: 0;
-        transition: background 20ms ease-in 0s;
-        display: flex;
-        overflow: inherit; // 保证列宽和顺序调整的拖拽点样式
-
-        &:hover {
-          background-color: var(--b3-av-hover);
-        }
-      }
     }
 
     &--header,
@@ -262,6 +251,37 @@
       background-color: var(--b3-menu-background);
     }
 
+    &--header {
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      transition: background 20ms ease-in 0s;
+      overflow: inherit; // 保证列宽和顺序调整的拖拽点样式
+
+      &:hover {
+        background-color: var(--b3-av-hover);
+      }
+
+      .av__celltext {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .av__cellheadericon {
+        height: 1em;
+        width: 1em;
+        color: var(--b3-theme-on-surface);
+        margin: 0 5px 0 0;
+        flex-shrink: 0;
+        line-height: 1em;
+        font-size: inherit;
+
+        &--pin {
+          margin: 0 0 0 5px;
+        }
+      }
+    }
+
     .block__icon {
       position: absolute;
       right: 5px;
@@ -291,24 +311,6 @@
     cursor: ns-resize;
   }
 
-  &__cellheader {
-    padding: 5px;
-    display: flex;
-    align-items: center;
-    flex: 1;
-    overflow: hidden;
-
-    .av__cellheadericon {
-      height: 1em;
-      width: 1em;
-      color: var(--b3-theme-on-surface);
-      margin: 0 5px 0 0;
-      flex-shrink: 0;
-      line-height: 1em;
-      font-size: inherit;
-    }
-  }
-
   &__celltext {
     overflow: hidden;
 

app/src/block/popover.ts

@@ -5,6 +5,7 @@ import {hideTooltip, showTooltip} from "../dialog/tooltip";
 import {getIdFromSYProtocol} from "../util/pathName";
 import {App} from "../index";
 import {Constants} from "../constants";
+import {getCellText} from "../protyle/render/av/cell";
 
 let popoverTargetElement: HTMLElement;
 export const initBlockPopover = (app: App) => {
@@ -17,19 +18,26 @@ export const initBlockPopover = (app: App) => {
         }
         const aElement = hasClosestByAttribute(event.target, "data-type", "a", true) ||
             hasClosestByAttribute(event.target, "data-type", "tab-header") ||
-            hasClosestByClassName(event.target, "av__celltext") ||
+            hasClosestByClassName(event.target, "av__cell") ||
             hasClosestByClassName(event.target, "ariaLabel") ||
             hasClosestByAttribute(event.target, "data-type", "inline-memo");
         if (aElement) {
             let tip = aElement.getAttribute("aria-label") || aElement.getAttribute("data-inline-memo-content");
-            if (aElement.classList.contains("av__celltext")) {
+            if (aElement.classList.contains("av__cell")) {
-                if (aElement.offsetWidth > aElement.parentElement.clientWidth - (aElement.classList.contains("fn__flex-shrink") ? 24 : 5)) {    // 只能减左边 padding，换行时字体会穿透到右侧 padding
+                if (aElement.classList.contains("av__cell--header")) {
-                    if (aElement.querySelector(".av__cellicon")) {
+                    const textElement = aElement.querySelector(".av__celltext");
-                        tip = `${aElement.firstChild.textContent} → ${aElement.lastChild.textContent}`;
+                    if (textElement.scrollWidth > textElement.clientWidth + 2) {
-                    } else {
+                        tip = getCellText(aElement)
-                        tip = aElement.textContent;
                     }
-                } else {
+                } else if (aElement.dataset.wrap !== "true") {
+                    aElement.style.overflow = "auto";
+                    if (aElement.scrollWidth > aElement.clientWidth + 2) {
+                        tip = getCellText(aElement)
+                    }
+                    aElement.style.overflow = "";
+                }
+                if (!tip) {
+                    hideTooltip();
                     return;
                 }
             }
@@ -206,7 +214,7 @@ const getTarget = (event: MouseEvent & { target: HTMLElement }, aElement: false
     }
     if (!popoverTargetElement && aElement && (
         (aElement.getAttribute("data-href")?.startsWith("siyuan://blocks") && aElement.getAttribute("prevent-popover") !== "true") ||
-        (aElement.classList.contains("av__celltext") && aElement.dataset.type === "url"))) {
+        (aElement.classList.contains("av__cell") && aElement.firstElementChild?.getAttribute("data-type") === "url"))) {
         popoverTargetElement = aElement;
     }
     if (!popoverTargetElement || window.siyuan.altIsPressed ||

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

@@ -197,8 +197,8 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.preventDefault();
             event.stopPropagation();
             return true;
-        } else if (target.classList.contains("av__cellheader")) {
+        } else if (target.classList.contains("av__cell--header")) {
-            showColMenu(protyle, blockElement, target.parentElement);
+            showColMenu(protyle, blockElement, target);
             event.preventDefault();
             event.stopPropagation();
             return true;

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

@@ -18,13 +18,16 @@ export const getCellText = (cellElement: HTMLElement | false) => {
         return "";
     }
     let cellText = "";
-    const textElement = cellElement.querySelector(".av__celltext");
+    const textElements = cellElement.querySelectorAll(".b3-chip, .av__celltext--ref, .av__celltext");
-    if (textElement) {
+    if (textElements.length > 0) {
-        if (textElement.querySelector(".av__cellicon")) {
+        textElements.forEach(item => {
-            cellText = `${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`;
+            if (item.querySelector(".av__cellicon")) {
-        } else {
+                cellText += `${item.firstChild.textContent} → ${item.lastChild.textContent}, `;
-            cellText = textElement.textContent;
+            } else if (item.getAttribute("data-type") !== "block-more") {
-        }
+                cellText += item.textContent + ", ";
+            }
+        })
+        cellText = cellText.substring(0, cellText.length - 2);
     } else {
         cellText = cellElement.textContent;
     }
@@ -531,7 +534,7 @@ export const renderCell = (cellValue: IAVCellValue, wrap: boolean) => {
 <span class="b3-chip b3-chip--info b3-chip--small popover__block" data-id="${cellValue.block.id}" data-type="block-more">${window.siyuan.languages.update}</span>`;
         }
     } else if (cellValue.type === "number") {
-        text = `<span style="float: right;${wrap ? "word-break: break-word;" : ""}" class="av__celltext" data-content="${cellValue?.number.isNotEmpty ? cellValue?.number.content : ""}">${cellValue?.number.formattedContent || cellValue?.number.content || ""}</span>`;
+        text = `<span class="av__celltext" data-content="${cellValue?.number.isNotEmpty ? cellValue?.number.content : ""}">${cellValue?.number.formattedContent || cellValue?.number.content || ""}</span>`;
     } else if (cellValue.type === "mSelect" || cellValue.type === "select") {
         cellValue?.mSelect?.forEach((item) => {
             text += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
@@ -636,14 +639,11 @@ export const updateHeaderCell = (cellElement: HTMLElement, headerValue: {
     if (typeof headerValue.pin !== "undefined") {
         const textElement = cellElement.querySelector(".av__celltext");
         if (headerValue.pin) {
-            if (!textElement.nextElementSibling) {
+            if (!cellElement.querySelector(".av__cellheadericon--pin")) {
-                textElement.insertAdjacentHTML("afterend", '<div class="fn__flex-1"></div><svg class="av__cellheadericon"><use xlink:href="#iconPin"></use></svg>');
+                textElement.insertAdjacentHTML("afterend", '<svg class="av__cellheadericon av__cellheadericon--pin"><use xlink:href="#iconPin"></use></svg>');
             }
         } else {
-            if (textElement.nextElementSibling) {
+            cellElement.querySelector(".av__cellheadericon--pin")?.remove()
-                textElement.nextElementSibling.nextElementSibling.remove();
-                textElement.nextElementSibling.remove();
-            }
         }
     }
 };

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

@@ -439,11 +439,9 @@ const addAttrViewColAnimation = (options: {
         }
         let html = "";
         if (index === 0) {
-            html = `<div class="av__cell" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
+            html = `<div class="av__cell av__cell--header" draggable="true" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
-    <div draggable="true" class="av__cellheader">
+    ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
-        ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
+    <span class="av__celltext fn__flex-1">${options.name}</span>
-        <span class="av__celltext">${options.name}</span>
-    </div>
     <div class="av__widthdrag"></div>
 </div>`;
         } else {

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

@@ -93,14 +93,12 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
                     if (column.hidden) {
                         return;
                     }
-                    tableHTML += `<div class="av__cell" data-col-id="${column.id}" 
+                    tableHTML += `<div class="av__cell av__cell--header" data-col-id="${column.id}"  draggable="true" 
 data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" data-pin="${column.pin}" 
 style="width: ${column.width || "200px"};">
-    <div draggable="true" class="av__cellheader">
+    ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
-        ${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
+    <span class="av__celltext fn__flex-1">${column.name}</span>
-        <span class="av__celltext fn__flex-shrink">${column.name}</span>
+    ${column.pin ? '<svg class="av__cellheadericon av__cellheadericon--pin"><use xlink:href="#iconPin"></use></svg>' : ""}
-        ${column.pin ? '<div class="fn__flex-1"></div><svg class="av__cellheadericon"><use xlink:href="#iconPin"></use></svg>' : ""}
-    </div>
     <div class="av__widthdrag"></div>
 </div>`;
                     if (pinIndex === index) {
@@ -135,6 +133,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
 ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} data-wrap="${data.columns[index].wrap}" 
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
 style="width: ${data.columns[index].width || "200px"};
+${cell.valueType === "number" ? "text-align: right;" : ""}
 ${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
 ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, data.columns[index].wrap)}</div>`;
 

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

@@ -87,7 +87,9 @@ export const insertAttrViewBlockAnimation = (protyle: IProtyle, blockElement: El
         colHTML = '<div class="av__colsticky"><div class="av__firstcol av__colsticky"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
     }
     previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement, index) => {
-        colHTML += `<div class="av__cell" data-col-id="${item.dataset.colId}" style="width: ${item.style.width}" ${(item.getAttribute("data-block-id") || item.dataset.dtype === "block") ? ' data-detached="true"' : ""}><span class="${avId ? "av__celltext" : "av__pulse"}"></span></div>`;
+        colHTML += `<div class="av__cell" data-col-id="${item.dataset.colId}" 
+style="width: ${item.style.width};text-align: ${item.style.textAlign}" 
+${(item.getAttribute("data-block-id") || item.dataset.dtype === "block") ? ' data-detached="true"' : ""}><span class="${avId ? "av__celltext" : "av__pulse"}"></span></div>`;
         if (pinIndex === index) {
             colHTML += "</div>";
         }

app/src/protyle/util/editorCommonEvent.ts

@@ -721,10 +721,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeListItem${Constants.ZWSP}${target.parentElement.getAttribute("data-subtype")}${Constants.ZWSP}${[target.parentElement.getAttribute("data-node-id")]}`,
                     protyle.wysiwyg.element.innerHTML);
                 return;
-            } else if (target.classList.contains("av__cellheader")) {
+            } else if (target.classList.contains("av__cell--header")) {
-                window.siyuan.dragElement = target.parentElement;
+                window.siyuan.dragElement = target;
-                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-col-id")]}`,
+                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-col-id")]}`,
-                    target.innerHTML);
+                    target.outerHTML);
                 return;
             }
         }

app/src/protyle/wysiwyg/index.ts

@@ -381,7 +381,7 @@ export class WYSIWYG {
             }
             const target = event.target as HTMLElement;
             if (hasClosestByClassName(target, "protyle-action") ||
-                hasClosestByClassName(target, "av__cellheader")) {
+                (hasClosestByClassName(target, "av__cell--header") && !hasClosestByClassName(target, "av__widthdrag"))) {
                 return;
             }
             const documentSelf = document;
@@ -435,7 +435,6 @@ export class WYSIWYG {
                     }]);
                 };
                 this.preventClick = true;
-                event.stopPropagation();
                 event.preventDefault();
                 return;
             }
@@ -493,8 +492,6 @@ export class WYSIWYG {
                     }
                     return false;
                 };
-                event.stopPropagation();
-                event.preventDefault();
                 return false;
             }
             // 图片、iframe、video 缩放
@@ -1449,9 +1446,9 @@ export class WYSIWYG {
             if (!nodeElement) {
                 return false;
             }
-            const avCellHeaderElement = hasClosestByClassName(target, "av__cellheader");
+            const avCellHeaderElement = hasClosestByClassName(target, "av__cell--header");
             if (avCellHeaderElement) {
-                showColMenu(protyle, nodeElement, avCellHeaderElement.parentElement);
+                showColMenu(protyle, nodeElement, avCellHeaderElement);
                 event.stopPropagation();
                 event.preventDefault();
                 return;