@bit-sun/business-component 4.2.0-alpha.32-wyl → 4.2.0-alpha.34-wyl

package/dist/index.esm.js

@@ -20049,12 +20049,14 @@ var resolveExcludeCols = function resolveExcludeCols(tbody, titles) {
   return excludeCols;
 };
 
-var css_248z$k = ".bs-range-copy tbody.ant-table-tbody > tr.ant-table-row > td.ant-table-cell:not(.ant-table-cell-fix-right) {\n  cursor: cell;\n}\n.bs-range-copy .ant-table-body {\n  position: relative;\n}\n.bs-range-copy__overlay {\n  position: absolute;\n  z-index: 1;\n  display: none;\n  box-sizing: border-box;\n  pointer-events: none;\n  background: rgba(24, 144, 255, 0.12);\n  border: 1px solid rgba(24, 144, 255, 0.55);\n}\n";
+var css_248z$k = ".bs-range-copy tbody.ant-table-tbody > tr.ant-table-row > td.ant-table-cell:not(.ant-table-cell-fix-right) {\n  cursor: cell;\n}\n.bs-range-copy .ant-table-body {\n  position: relative;\n}\n.bs-range-copy__overlay {\n  position: absolute;\n  z-index: 5;\n  display: none;\n  box-sizing: border-box;\n  pointer-events: none;\n  background: rgba(24, 144, 255, 0.12);\n  border: 1px solid rgba(24, 144, 255, 0.55);\n}\n";
 styleInject(css_248z$k);
 
 var CELL_SELECTOR = 'td.ant-table-cell';
-// 这些目标上不启动框选：可编辑控件、勾选列（保持原生点击行为）
-var IGNORE_TARGET_SELECTOR = 'input, textarea, select, [contenteditable="true"], .ant-table-selection-column';
+// 这些目标上不启动框选：真正的可编辑控件（勾选框本身是 input，点击仍是原生行为）。
+// 注意不要把整个 .ant-table-selection-column 排除：bssula 会把勾选列强制 fixed=true，
+// 它是最左边的固定列，整列不可起手就等于「固定列无法框选」。
+var IGNORE_TARGET_SELECTOR = 'input, textarea, select, [contenteditable="true"]';
 var DEFAULT_EXCLUDE_TITLES = ['操作'];
 // 指针进入容器边缘这个带宽内开始自动滚动，最多 24px/帧
 var EDGE_BAND = 36;
@@ -20112,6 +20114,23 @@ var useRangeCopy = function useRangeCopy(options) {
     var stepY = 0;
     var range = null;
     var anchorState = null;
+    // 固定列（position: sticky）做角点时，它的"内容坐标"会随 scrollLeft 变化：
+    // 高亮层虽然随内容滚动，但这种角点必须在容器滚动时重算，否则会与固定列脱开。
+    // 只挂在表格自己的滚动容器上，且仅在存在选区时重绘，空闲期零开销。
+    var scrollAnchor = null;
+    var handleAnchorScroll = function handleAnchorScroll() {
+      if (range) schedulePaint();
+    };
+    var bindAnchorScroll = function bindAnchorScroll(anchor) {
+      if (scrollAnchor === anchor) return;
+      if (scrollAnchor) {
+        scrollAnchor.removeEventListener('scroll', handleAnchorScroll);
+      }
+      scrollAnchor = anchor;
+      scrollAnchor.addEventListener('scroll', handleAnchorScroll, {
+        passive: true
+      });
+    };
     var hideOverlay = function hideOverlay() {
       overlay.style.display = 'none';
     };
@@ -20316,6 +20335,7 @@ var useRangeCopy = function useRangeCopy(options) {
           colEnd: cell.cellIndex,
           excludeCols: base.excludeCols
         };
+        bindAnchorScroll(anchorEl);
         schedulePaint();
         if ((_optionsRef$current$a = (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.autoCopy) !== null && _optionsRef$current$a !== void 0 ? _optionsRef$current$a : true) copyRange();
         return;
@@ -20358,6 +20378,7 @@ var useRangeCopy = function useRangeCopy(options) {
           colEnd: cell.cellIndex,
           excludeCols: base.excludeCols
         };
+        bindAnchorScroll(base.anchor);
       } else {
         applyCell(cell);
       }
@@ -20430,6 +20451,9 @@ var useRangeCopy = function useRangeCopy(options) {
       container.removeEventListener('mousedown', handleMouseDown);
       container.removeEventListener('mousemove', handleMouseMove);
       container.removeEventListener('dragstart', handleDragStart);
+      if (scrollAnchor) {
+        scrollAnchor.removeEventListener('scroll', handleAnchorScroll);
+      }
       container.removeEventListener('click', handleClickCapture, true);
       document.removeEventListener('mouseup', handleMouseUp);
       document.removeEventListener('copy', handleCopy);

package/dist/index.js

@@ -20072,12 +20072,14 @@ var resolveExcludeCols = function resolveExcludeCols(tbody, titles) {
   return excludeCols;
 };
 
-var css_248z$k = ".bs-range-copy tbody.ant-table-tbody > tr.ant-table-row > td.ant-table-cell:not(.ant-table-cell-fix-right) {\n  cursor: cell;\n}\n.bs-range-copy .ant-table-body {\n  position: relative;\n}\n.bs-range-copy__overlay {\n  position: absolute;\n  z-index: 1;\n  display: none;\n  box-sizing: border-box;\n  pointer-events: none;\n  background: rgba(24, 144, 255, 0.12);\n  border: 1px solid rgba(24, 144, 255, 0.55);\n}\n";
+var css_248z$k = ".bs-range-copy tbody.ant-table-tbody > tr.ant-table-row > td.ant-table-cell:not(.ant-table-cell-fix-right) {\n  cursor: cell;\n}\n.bs-range-copy .ant-table-body {\n  position: relative;\n}\n.bs-range-copy__overlay {\n  position: absolute;\n  z-index: 5;\n  display: none;\n  box-sizing: border-box;\n  pointer-events: none;\n  background: rgba(24, 144, 255, 0.12);\n  border: 1px solid rgba(24, 144, 255, 0.55);\n}\n";
 styleInject(css_248z$k);
 
 var CELL_SELECTOR = 'td.ant-table-cell';
-// 这些目标上不启动框选：可编辑控件、勾选列（保持原生点击行为）
-var IGNORE_TARGET_SELECTOR = 'input, textarea, select, [contenteditable="true"], .ant-table-selection-column';
+// 这些目标上不启动框选：真正的可编辑控件（勾选框本身是 input，点击仍是原生行为）。
+// 注意不要把整个 .ant-table-selection-column 排除：bssula 会把勾选列强制 fixed=true，
+// 它是最左边的固定列，整列不可起手就等于「固定列无法框选」。
+var IGNORE_TARGET_SELECTOR = 'input, textarea, select, [contenteditable="true"]';
 var DEFAULT_EXCLUDE_TITLES = ['操作'];
 // 指针进入容器边缘这个带宽内开始自动滚动，最多 24px/帧
 var EDGE_BAND = 36;
@@ -20135,6 +20137,23 @@ var useRangeCopy = function useRangeCopy(options) {
     var stepY = 0;
     var range = null;
     var anchorState = null;
+    // 固定列（position: sticky）做角点时，它的"内容坐标"会随 scrollLeft 变化：
+    // 高亮层虽然随内容滚动，但这种角点必须在容器滚动时重算，否则会与固定列脱开。
+    // 只挂在表格自己的滚动容器上，且仅在存在选区时重绘，空闲期零开销。
+    var scrollAnchor = null;
+    var handleAnchorScroll = function handleAnchorScroll() {
+      if (range) schedulePaint();
+    };
+    var bindAnchorScroll = function bindAnchorScroll(anchor) {
+      if (scrollAnchor === anchor) return;
+      if (scrollAnchor) {
+        scrollAnchor.removeEventListener('scroll', handleAnchorScroll);
+      }
+      scrollAnchor = anchor;
+      scrollAnchor.addEventListener('scroll', handleAnchorScroll, {
+        passive: true
+      });
+    };
     var hideOverlay = function hideOverlay() {
       overlay.style.display = 'none';
     };
@@ -20339,6 +20358,7 @@ var useRangeCopy = function useRangeCopy(options) {
           colEnd: cell.cellIndex,
           excludeCols: base.excludeCols
         };
+        bindAnchorScroll(anchorEl);
         schedulePaint();
         if ((_optionsRef$current$a = (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.autoCopy) !== null && _optionsRef$current$a !== void 0 ? _optionsRef$current$a : true) copyRange();
         return;
@@ -20381,6 +20401,7 @@ var useRangeCopy = function useRangeCopy(options) {
           colEnd: cell.cellIndex,
           excludeCols: base.excludeCols
         };
+        bindAnchorScroll(base.anchor);
       } else {
         applyCell(cell);
       }
@@ -20453,6 +20474,9 @@ var useRangeCopy = function useRangeCopy(options) {
       container.removeEventListener('mousedown', handleMouseDown);
       container.removeEventListener('mousemove', handleMouseMove);
       container.removeEventListener('dragstart', handleDragStart);
+      if (scrollAnchor) {
+        scrollAnchor.removeEventListener('scroll', handleAnchorScroll);
+      }
       container.removeEventListener('click', handleClickCapture, true);
       document.removeEventListener('mouseup', handleMouseUp);
       document.removeEventListener('copy', handleCopy);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.2.0-alpha.32-wyl",
+  "version": "4.2.0-alpha.34-wyl",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/BsSulaQueryTable/__tests__/useRangeCopy.test.tsx

@@ -172,6 +172,94 @@ if (!env) {
       expect(writes[0]).toBe('r0c1\tr0c2\r\nr1c1\tr1c2\r\nr2c1\tr2c2');
     });
 
+    it('从勾选列（bssula 强制 fixed=true 的最左固定列）起手也能框选，且单击仍原生', async () => {
+      mount();
+      let rowClicks = 0;
+      host
+        .querySelectorAll('tr.ant-table-row')[1]
+        .addEventListener('click', () => {
+          rowClicks += 1;
+        });
+      fire(cellAt(0, 0), 'mousedown');
+      fire(cellAt(1, 2), 'mousemove');
+      fire(document.body, 'mouseup');
+      await flush();
+      expect(writes[0]).toBe('r0c1\tr0c2\r\nr1c1\tr1c2');
+      expect(rowClicks).toBe(0);
+    });
+
+    it('勾选列上的纯单击保持原生（不建立选区、不复制）', async () => {
+      mount();
+      let rowClicks = 0;
+      host
+        .querySelectorAll('tr.ant-table-row')[0]
+        .addEventListener('click', () => {
+          rowClicks += 1;
+        });
+      fire(cellAt(0, 0), 'mousedown');
+      fire(cellAt(0, 0), 'mouseup');
+      fire(cellAt(0, 0), 'click');
+      await flush();
+      expect(rowClicks).toBe(1);
+      expect(writes).toEqual([]);
+    });
+
+    it('固定列角点：横向滚动后高亮重算并跟随', async () => {
+      mount();
+      const anchor = host.querySelector('.ant-table-body') as HTMLElement;
+      let scrollLeftValue = 50;
+      Object.defineProperty(anchor, 'scrollLeft', {
+        configurable: true,
+        get: () => scrollLeftValue,
+        set: (v: number) => {
+          scrollLeftValue = v;
+        },
+      });
+      anchor.getBoundingClientRect = () =>
+        ({
+          left: 0,
+          top: 0,
+          right: 500,
+          bottom: 300,
+          width: 500,
+          height: 300,
+        } as DOMRect);
+      const stickyCell = cellAt(1, 1);
+      stickyCell.getBoundingClientRect = () =>
+        ({
+          left: 0,
+          top: 0,
+          right: 100,
+          bottom: 20,
+          width: 100,
+          height: 20,
+        } as DOMRect);
+      const normalCell = cellAt(1, 2);
+      normalCell.getBoundingClientRect = () =>
+        ({
+          left: 200 - scrollLeftValue,
+          top: 0,
+          right: 300 - scrollLeftValue,
+          bottom: 20,
+          width: 100,
+          height: 20,
+        } as DOMRect);
+
+      fire(cellAt(0, 1), 'mousedown');
+      fire(stickyCell, 'mousemove');
+      fire(normalCell, 'mousemove');
+      await flush();
+      const overlay = document.querySelector(
+        '.bs-range-copy__overlay',
+      ) as HTMLElement;
+      expect(overlay.style.left).toBe('50px');
+
+      scrollLeftValue = 100;
+      anchor.dispatchEvent(new Event('scroll'));
+      await flush();
+      expect(overlay.style.left).toBe('100px');
+    });
+
     it('容器外有非折叠选区时，Ctrl+C 不被劫持', async () => {
       mount();
       fire(cellAt(0, 1), 'mousedown');

package/src/components/Business/BsSulaQueryTable/rangeCopy.less

@@ -13,10 +13,13 @@
   }
 }
 
-// 框选高亮层：绝对定位在滚动容器内容坐标系里，随内容滚动；z-index 低于固定列，不遮挡它们
+// 框选高亮层：绝对定位在滚动容器内容坐标系里，随内容滚动。
+// z-index 必须高于 antd 的固定列：.ant-table-cell-fix-left/right 是 position:sticky + z-index:2 + background:#fff
+// （不透明白底），低于它就会"固定列那一段没有高亮"。表格内部最高的就是固定列的 2，取 5 足够，
+// 仍远低于 antd 弹层/弹窗（1000+）。
 .bs-range-copy__overlay {
   position: absolute;
-  z-index: 1;
+  z-index: 5;
   display: none;
   box-sizing: border-box;
   pointer-events: none;

package/src/components/Business/BsSulaQueryTable/useRangeCopy.tsx

@@ -10,9 +10,11 @@ import {
 import './rangeCopy.less';
 
 const CELL_SELECTOR = 'td.ant-table-cell';
-// 这些目标上不启动框选：可编辑控件、勾选列（保持原生点击行为）
+// 这些目标上不启动框选：真正的可编辑控件（勾选框本身是 input，点击仍是原生行为）。
+// 注意不要把整个 .ant-table-selection-column 排除：bssula 会把勾选列强制 fixed=true，
+// 它是最左边的固定列，整列不可起手就等于「固定列无法框选」。
 const IGNORE_TARGET_SELECTOR =
-  'input, textarea, select, [contenteditable="true"], .ant-table-selection-column';
+  'input, textarea, select, [contenteditable="true"]';
 const DEFAULT_EXCLUDE_TITLES = ['操作'];
 // 指针进入容器边缘这个带宽内开始自动滚动，最多 24px/帧
 const EDGE_BAND = 36;
@@ -127,6 +129,26 @@ export const useRangeCopy = (options?: UseRangeCopyOptions) => {
     let range: RangeState | null = null;
     let anchorState: AnchorState | null = null;
 
+    // 固定列（position: sticky）做角点时，它的"内容坐标"会随 scrollLeft 变化：
+    // 高亮层虽然随内容滚动，但这种角点必须在容器滚动时重算，否则会与固定列脱开。
+    // 只挂在表格自己的滚动容器上，且仅在存在选区时重绘，空闲期零开销。
+    let scrollAnchor: HTMLElement | null = null;
+
+    const handleAnchorScroll = () => {
+      if (range) schedulePaint();
+    };
+
+    const bindAnchorScroll = (anchor: HTMLElement) => {
+      if (scrollAnchor === anchor) return;
+      if (scrollAnchor) {
+        scrollAnchor.removeEventListener('scroll', handleAnchorScroll);
+      }
+      scrollAnchor = anchor;
+      scrollAnchor.addEventListener('scroll', handleAnchorScroll, {
+        passive: true,
+      });
+    };
+
     const hideOverlay = () => {
       overlay.style.display = 'none';
     };
@@ -376,6 +398,7 @@ export const useRangeCopy = (options?: UseRangeCopyOptions) => {
           colEnd: cell.cellIndex,
           excludeCols: base.excludeCols,
         };
+        bindAnchorScroll(anchorEl);
         schedulePaint();
         if (optionsRef.current?.autoCopy ?? true) copyRange();
         return;
@@ -424,6 +447,7 @@ export const useRangeCopy = (options?: UseRangeCopyOptions) => {
           colEnd: cell.cellIndex,
           excludeCols: base.excludeCols,
         };
+        bindAnchorScroll(base.anchor);
       } else {
         applyCell(cell);
       }
@@ -507,6 +531,9 @@ export const useRangeCopy = (options?: UseRangeCopyOptions) => {
       container.removeEventListener('mousedown', handleMouseDown);
       container.removeEventListener('mousemove', handleMouseMove);
       container.removeEventListener('dragstart', handleDragStart);
+      if (scrollAnchor) {
+        scrollAnchor.removeEventListener('scroll', handleAnchorScroll);
+      }
       container.removeEventListener('click', handleClickCapture, true);
       document.removeEventListener('mouseup', handleMouseUp);
       document.removeEventListener('copy', handleCopy);