🎨 col width https://github.com/siyuan-note/siyuan/issues/7536

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

@@ -58,18 +58,6 @@
       opacity: 1;
     }
 
-    &--header .av__cell {
-      display: flex;
-      align-items: center;
-
-      svg {
-        height: 14px;
-        width: 14px;
-        color: var(--b3-theme-on-surface);
-        margin-right: 5px;
-      }
-    }
-
     &--select {
       background-color: var(--b3-theme-primary-lightest);
 
@@ -80,6 +68,10 @@
 
     &--header {
       z-index: 1;
+
+      .av__cell {
+        padding: 0;
+      }
     }
 
     &--header,
@@ -89,10 +81,34 @@
   }
 
   &__cell {
+    box-sizing: border-box;
+    position: relative;
     padding: 5px;
     flex-shrink: 0;
+    border-right: 1px solid var(--b3-theme-surface-lighter);
+    display: flex;
+    align-items: center;
+
+    svg {
+      height: 14px;
+      width: 14px;
+      color: var(--b3-theme-on-surface);
+      margin-right: 5px;
+      flex-shrink: 0;
+    }
+  }
+
+  &__cellheader {
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__celltext {
+    flex: 1;
     overflow: hidden;
-    border-right: 1px solid var(--b3-theme-surface-lighter)
   }
 
   &__firstcol {
@@ -111,6 +127,20 @@
     }
   }
 
+  &__widthdrag {
+    position: absolute;
+    cursor: col-resize;
+    width: 5px;
+    height: 100%;
+    right: -2.5px;
+    transition: background 200ms ease-out 0s;
+    z-index: 1;
+
+    &:hover {
+      background-color: var(--b3-theme-primary);
+    }
+  }
+
   &__panel {
     z-index: 504;
     position: relative;

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

@@ -68,7 +68,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const headerMoreElement = hasClosestByAttribute(event.target, "data-type","av-header-more");
+    const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more");
     if (headerMoreElement) {
         openMenuPanel(protyle, blockElement, "properties");
         event.preventDefault();
@@ -76,22 +76,25 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const moreElement = hasClosestByAttribute(event.target, "data-type","av-more");
+    const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more");
     if (moreElement) {
         openMenuPanel(protyle, blockElement, "config");
         event.preventDefault();
         event.stopPropagation();
         return true;
     }
+    const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader");
+    if (cellHeaderElement) {
+        showHeaderCellMenu(protyle, blockElement, cellHeaderElement.parentElement);
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    }
     const cellElement = hasClosestByClassName(event.target, "av__cell");
-    if (cellElement) {
+    if (cellElement && !cellElement.parentElement.classList.contains("av__row--header")) {
-        if (cellElement.parentElement.classList.contains("av__row--header")) {
+        popTextCell(protyle, cellElement);
-            showHeaderCellMenu(protyle, blockElement, cellElement);
+        event.preventDefault();
-            event.preventDefault();
+        event.stopPropagation();
-            event.stopPropagation();
-        } else {
-            popTextCell(protyle, cellElement);
-        }
         return true;
     }
     return false;

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

@@ -28,11 +28,14 @@ export const avRender = (element: Element, cb?: () => void) => {
                     if (column.hidden) {
                         return;
                     }
-                    tableHTML += `<div draggable="true" class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}"  
+                    tableHTML += `<div class="av__cell" data-index="${index}" data-id="${column.id}" data-dtype="${column.type}"  
-style="width: ${column.width || 200}px;
+style="width: ${column.width || "200px"};
 ${column.wrap ? "" : "white-space: nowrap;"}">
-    <svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg>
+    <div draggable="true" class="av__cellheader">
-    <span>${column.name}</span>
+        <svg><use xlink:href="#${column.icon || getColIconByType(column.type)}"></use></svg>
+        <span class="av__celltext">${column.name}</span>
+    </div>
+    <div class="av__widthdrag"></div>
 </div>`;
                     index++;
                 });
@@ -70,10 +73,10 @@ ${column.wrap ? "" : "white-space: nowrap;"}">
                         }
                         tableHTML += `<div class="av__cell" data-id="${cell.id}" data-index="${index}" 
 ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}  
-style="width: ${data.columns[index].width || 200}px;
+style="width: ${data.columns[index].width || "200px"};
-${data.columns[index].wrap ? "" : "white-space: nowrap;"}
 ${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
-${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
+${data.columns[index].wrap ? "" : "white-space: nowrap;"}
+${cell.color ? `color:${cell.color};` : ""}"><span class="av__celltext">${text}</span></div>`;
                     });
                     tableHTML += "<div></div></div>";
                 });
@@ -141,6 +144,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
                 showHeaderCellMenu(protyle, item, item.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement);
             });
         });
+    } else if (operation.action === "setAttrViewColWidth") {
+        Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.parentID}"]`)).forEach((item: HTMLElement) => {
+            const cellElement = item.querySelector(`.av__cell[data-id="${operation.id}"]`) as HTMLElement;
+            if (!cellElement || cellElement.style.width === operation.data) {
+                return
+            }
+            const index = cellElement.dataset.index;
+            item.querySelectorAll(".av__row").forEach(rowItem => {
+                (rowItem.querySelector(`[data-index="${index}"]`) as HTMLElement).style.width = operation.data;
+            })
+        });
     } else {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.parentID}"]`)).forEach((item: HTMLElement) => {
             item.removeAttribute("data-render");

app/src/protyle/util/editorCommonEvent.ts

@@ -712,9 +712,9 @@ 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__cell")) {
+            } else if (target.classList.contains("av__cellheader")) {
-                window.siyuan.dragElement = target;
+                window.siyuan.dragElement = target.parentElement;
-                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.getAttribute("data-id")]}`,
+                event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-id")]}`,
                     target.innerHTML);
                 return;
             } else if (target.classList.contains("av__gutters")) {

app/src/protyle/wysiwyg/index.ts

@@ -333,7 +333,9 @@ export class WYSIWYG {
                 hideElements(["select"], protyle);
             }
             const target = event.target as HTMLElement;
-            if (hasClosestByClassName(target, "protyle-action") || hasClosestByClassName(target, "av__gutters")) {
+            if (hasClosestByClassName(target, "protyle-action") ||
+                hasClosestByClassName(target, "av__gutters") ||
+                hasClosestByClassName(target, "av__cellheader")) {
                 return;
             }
             const documentSelf = document;
@@ -343,6 +345,47 @@ export class WYSIWYG {
             const mostRight = mostLeft + (protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight)) - 1;
             const mostBottom = rect.bottom;
             const y = event.clientY;
+
+            // av col resize
+            if (!protyle.disabled && target.classList.contains("av__widthdrag")) {
+                const nodeElement = hasClosestBlock(target);
+                if (!nodeElement) {
+                    return;
+                }
+                const avId = nodeElement.getAttribute("data-av-id");
+                const dragElement = target.parentElement;
+                const oldWidth = dragElement.clientWidth;
+                const dragIndex = dragElement.getAttribute("data-index");
+                let newWidth: string
+                documentSelf.onmousemove = (moveEvent: MouseEvent) => {
+                    newWidth = oldWidth + (moveEvent.clientX - event.clientX) + "px";
+                    dragElement.parentElement.parentElement.querySelectorAll(".av__row").forEach(item => {
+                        (item.querySelector(`[data-index="${dragIndex}"]`) as HTMLElement).style.width = newWidth;
+                    })
+                };
+
+                documentSelf.onmouseup = () => {
+                    documentSelf.onmousemove = null;
+                    documentSelf.onmouseup = null;
+                    documentSelf.ondragstart = null;
+                    documentSelf.onselectstart = null;
+                    documentSelf.onselect = null;
+                    transaction(protyle, [{
+                        action: "setAttrViewColWidth",
+                        id: dragElement.getAttribute("data-id"),
+                        parentID: avId,
+                        data: newWidth
+                    }], [{
+                        action: "setAttrViewColWidth",
+                        id: dragElement.getAttribute("data-id"),
+                        parentID: avId,
+                        data: oldWidth + "px"
+                    }]);
+                };
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
             // 图片、iframe、video 缩放
             if (!protyle.disabled && target.classList.contains("protyle-action__drag")) {
                 const nodeElement = hasClosestBlock(target);