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

2025-12-19 16:10:12 +01:00 · 2024-01-14 12:09:42 +08:00 · 2024-01-14 12:09:42 +08:00 · 88dba92cd0
commit 88dba92cd0
parent 2ddc610cf5
9 changed files with 82 additions and 76 deletions
--- a/app/src/assets/scss/business/_av.scss
+++ b/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;

--- a/app/src/block/popover.ts
+++ b/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.offsetWidth > aElement.parentElement.clientWidth - (aElement.classList.contains("fn__flex-shrink") ? 24 : 5)) {    // 只能减左边 padding，换行时字体会穿透到右侧 padding
-                    if (aElement.querySelector(".av__cellicon")) {
-                        tip = `${aElement.firstChild.textContent} → ${aElement.lastChild.textContent}`;
-                    } else {
-                        tip = aElement.textContent;
+            if (aElement.classList.contains("av__cell")) {
+                if (aElement.classList.contains("av__cell--header")) {
+                    const textElement = aElement.querySelector(".av__celltext");
+                    if (textElement.scrollWidth > textElement.clientWidth + 2) {
+                        tip = getCellText(aElement)
                    }
-                } 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 ||
--- a/app/src/protyle/render/av/action.ts
+++ b/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")) {
-            showColMenu(protyle, blockElement, target.parentElement);
+        } else if (target.classList.contains("av__cell--header")) {
+            showColMenu(protyle, blockElement, target);
            event.preventDefault();
            event.stopPropagation();
            return true;
--- a/app/src/protyle/render/av/cell.ts
+++ b/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");
-    if (textElement) {
-        if (textElement.querySelector(".av__cellicon")) {
-            cellText = `${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`;
-        } else {
-            cellText = textElement.textContent;
+    const textElements = cellElement.querySelectorAll(".b3-chip, .av__celltext--ref, .av__celltext");
+    if (textElements.length > 0) {
+        textElements.forEach(item => {
+            if (item.querySelector(".av__cellicon")) {
+                cellText += `${item.firstChild.textContent} → ${item.lastChild.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) {
-                textElement.insertAdjacentHTML("afterend", '<div class="fn__flex-1"></div><svg class="av__cellheadericon"><use xlink:href="#iconPin"></use></svg>');
+            if (!cellElement.querySelector(".av__cellheadericon--pin")) {
+                textElement.insertAdjacentHTML("afterend", '<svg class="av__cellheadericon av__cellheadericon--pin"><use xlink:href="#iconPin"></use></svg>');
            }
        } else {
-            if (textElement.nextElementSibling) {
-                textElement.nextElementSibling.nextElementSibling.remove();
-                textElement.nextElementSibling.remove();
-            }
+            cellElement.querySelector(".av__cellheadericon--pin")?.remove()
        }
    }
 };
--- a/app/src/protyle/render/av/col.ts
+++ b/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;">
-    <div draggable="true" class="av__cellheader">
+            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;">
    ${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
-        <span class="av__celltext">${options.name}</span>
-    </div>
+    <span class="av__celltext fn__flex-1">${options.name}</span>
    <div class="av__widthdrag"></div>
 </div>`;
        } else {
--- a/app/src/protyle/render/av/render.ts
+++ b/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>`}
-        <span class="av__celltext fn__flex-shrink">${column.name}</span>
-        ${column.pin ? '<div class="fn__flex-1"></div><svg class="av__cellheadericon"><use xlink:href="#iconPin"></use></svg>' : ""}
-    </div>
+    <span class="av__celltext fn__flex-1">${column.name}</span>
+    ${column.pin ? '<svg class="av__cellheadericon av__cellheadericon--pin"><use xlink:href="#iconPin"></use></svg>' : ""}
    <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>`;

--- a/app/src/protyle/render/av/row.ts
+++ b/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>";
        }
--- a/app/src/protyle/util/editorCommonEvent.ts
+++ b/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")) {
-                window.siyuan.dragElement = target.parentElement;
-                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-col-id")]}`,
-                    target.innerHTML);
+            } else if (target.classList.contains("av__cell--header")) {
+                window.siyuan.dragElement = target;
+                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-col-id")]}`,
+                    target.outerHTML);
                return;
            }
        }
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/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;