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

package/package.json

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

package/src/components/Business/BsSulaQueryTable/__tests__/clipboard.test.ts

@@ -0,0 +1,38 @@
+import { writeClipboard } from '../clipboard';
+
+const setClipboard = (value: any) => {
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value });
+};
+
+describe('clipboard', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    jest.restoreAllMocks();
+  });
+
+  it('优先走异步 Clipboard API，不创建临时节点', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    setClipboard({ writeText });
+    await expect(writeClipboard('a\tb')).resolves.toBe(true);
+    expect(writeText).toHaveBeenCalledWith('a\tb');
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+
+  it('Clipboard API 被拒时退回 execCommand，并移除临时 textarea', async () => {
+    setClipboard({
+      writeText: jest.fn().mockRejectedValue(new Error('denied')),
+    });
+    const exec = jest.fn().mockReturnValue(true);
+    (document as any).execCommand = exec;
+    await expect(writeClipboard('x')).resolves.toBe(true);
+    expect(exec).toHaveBeenCalledWith('copy');
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+
+  it('两条路径都失败时返回 false，且不残留节点（残留节点会抢走键盘焦点）', async () => {
+    setClipboard(undefined);
+    (document as any).execCommand = jest.fn().mockReturnValue(false);
+    await expect(writeClipboard('y')).resolves.toBe(false);
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+});

package/src/components/Business/BsSulaQueryTable/__tests__/rangeCopy.test.ts

@@ -0,0 +1,109 @@
+import {
+  buildRangeCopy,
+  getIncludedCols,
+  resolveExcludeCols,
+} from '../rangeCopy';
+
+const buildTbody = (data: string[][]): HTMLTableRowElement[] => {
+  const table = document.createElement('table');
+  const tbody = document.createElement('tbody');
+  data.forEach((cells) => {
+    const tr = document.createElement('tr');
+    tr.className = 'ant-table-row';
+    cells.forEach((text) => {
+      const td = document.createElement('td');
+      td.className = 'ant-table-cell';
+      td.textContent = text;
+      tr.appendChild(td);
+    });
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+  document.body.appendChild(table);
+  return Array.from(tbody.querySelectorAll('tr')) as HTMLTableRowElement[];
+};
+
+describe('rangeCopy', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('拼成制表符分列、CRLF 换行的 TSV，空单元格留空', () => {
+    const rows = buildTbody([
+      ['AJ001', '待收货', ''],
+      ['AJ002', '已收货', 'x'],
+    ]);
+    const result = buildRangeCopy(rows, 0, 2);
+    expect(result.text).toBe('AJ001\t待收货\t\r\nAJ002\t已收货\tx');
+    expect(result.rowCount).toBe(2);
+    expect(result.colCount).toBe(3);
+  });
+
+  it('被排除的列不占位（勾选列/操作列）', () => {
+    const rows = buildTbody([['', 'AJ001', '待收货', '查看']]);
+    const result = buildRangeCopy(rows, 0, 3, new Set([0, 3]));
+    expect(result.text).toBe('AJ001\t待收货');
+    expect(result.colCount).toBe(2);
+  });
+
+  it('反向区间（右下到左上）与正向一致', () => {
+    const rows = buildTbody([['a', 'b', 'c']]);
+    expect(buildRangeCopy(rows, 2, 0).text).toBe(
+      buildRangeCopy(rows, 0, 2).text,
+    );
+  });
+
+  it('零宽字符与不换行空格归一为普通空格', () => {
+    const rows = buildTbody([['\u200b门店A\u00a0\u00a0备注\n换行']]);
+    expect(buildRangeCopy(rows, 0, 0).text).toBe('门店A 备注 换行');
+  });
+
+  it('getIncludedCols 只返回真正会被复制的列', () => {
+    expect(getIncludedCols(0, 4, new Set([0, 4]))).toEqual([1, 2, 3]);
+    expect(getIncludedCols(4, 0, new Set([0, 4]))).toEqual([1, 2, 3]);
+    expect(getIncludedCols(3, 3, new Set([3]))).toEqual([]);
+  });
+});
+
+describe('resolveExcludeCols', () => {
+  it('排除勾选列与标题为「操作」的列，其余保留；取值同步扣列', () => {
+    document.body.innerHTML = [
+      '<div class="ant-table-wrapper">',
+      '  <div class="ant-table-header"><table><thead class="ant-table-thead"><tr>',
+      '    <th class="ant-table-cell ant-table-selection-column"></th>',
+      '    <th class="ant-table-cell">收发货通知单</th>',
+      '    <th class="ant-table-cell">操作</th>',
+      '  </tr></thead></table></div>',
+      '  <div class="ant-table-body"><table><tbody class="ant-table-tbody">',
+      '    <tr class="ant-table-row">',
+      '      <td class="ant-table-cell ant-table-selection-column"></td>',
+      '      <td class="ant-table-cell">AJ001</td>',
+      '      <td class="ant-table-cell">查看</td>',
+      '    </tr>',
+      '  </tbody></table></div>',
+      '</div>',
+    ].join('');
+    const tbody = document.querySelector(
+      'tbody.ant-table-tbody',
+    ) as HTMLTableSectionElement;
+    const excludeCols = resolveExcludeCols(tbody, ['操作']);
+    expect(Array.from(excludeCols).sort()).toEqual([0, 2]);
+    const rows = Array.from(
+      tbody.querySelectorAll('tr'),
+    ) as HTMLTableRowElement[];
+    expect(buildRangeCopy(rows, 0, 2, excludeCols).text).toBe('AJ001');
+  });
+
+  it('表头缺失时退化为按数据行识别勾选列', () => {
+    document.body.innerHTML = [
+      '<table><tbody class="ant-table-tbody"><tr class="ant-table-row">',
+      '  <td class="ant-table-cell ant-table-selection-column"></td>',
+      '  <td class="ant-table-cell">AJ002</td>',
+      '</tr></tbody></table>',
+    ].join('');
+    const tbody = document.querySelector(
+      'tbody.ant-table-tbody',
+    ) as HTMLTableSectionElement;
+    expect(Array.from(resolveExcludeCols(tbody, ['操作']))).toEqual([0]);
+  });
+});

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

@@ -0,0 +1,207 @@
+import React from 'react';
+
+/**
+ * 钩子级用例：真实渲染 + 真实事件派发。
+ * 环境守卫：库仓 devDeps 里 react(17) 与 react-dom(^16) 主版本不一致，且 jest 需能处理 .less；
+ * 两者任一不满足时只登记一条 skipped 用例，避免在别人机器上变成红灯（本地等价验证见
+ * output/15-前端表格交互增强/verify-range-copy-hook.cjs，用宿主仓的 react 17 跑通了 14 条断言）。
+ */
+const loadEnv = () => {
+  try {
+    const ReactDOM = require('react-dom');
+    const reactMajor = String(require('react/package.json').version).split(
+      '.',
+    )[0];
+    const domMajor = String(require('react-dom/package.json').version).split(
+      '.',
+    )[0];
+    const { act } = require('react-dom/test-utils');
+    const hook = require('../useRangeCopy').useRangeCopy;
+    if (!ReactDOM || !ReactDOM.render || !act || typeof hook !== 'function')
+      return null;
+    if (reactMajor !== domMajor) return null;
+    return { ReactDOM, act, useRangeCopy: hook };
+  } catch (e) {
+    return null;
+  }
+};
+
+const env = loadEnv();
+
+if (!env) {
+  describe('useRangeCopy', () => {
+    it.skip('当前环境不满足（react/react-dom 主版本不一致或缺 .less transform），已跳过', () => {});
+  });
+} else {
+  const { ReactDOM, act, useRangeCopy } = env as any;
+
+  const rows = [0, 1, 2];
+  const cols = [0, 1, 2, 3];
+  const Harness = ({ opts }: any) => {
+    const ref = useRangeCopy(opts);
+    const body = rows.map((r) =>
+      React.createElement(
+        'tr',
+        { key: r, className: 'ant-table-row' },
+        cols.map((c) =>
+          React.createElement(
+            'td',
+            {
+              key: c,
+              className:
+                'ant-table-cell' +
+                (c === 0 ? ' ant-table-selection-column' : ''),
+            },
+            c === 0 ? '' : 'r' + r + 'c' + c,
+          ),
+        ),
+      ),
+    );
+    return React.createElement(
+      'div',
+      { ref: ref, className: 'bs-range-copy' },
+      React.createElement(
+        'div',
+        { className: 'ant-table-body' },
+        React.createElement(
+          'table',
+          null,
+          React.createElement('tbody', { className: 'ant-table-tbody' }, body),
+        ),
+      ),
+    );
+  };
+
+  describe('useRangeCopy', () => {
+    let host: HTMLDivElement;
+    let writes: string[];
+
+    beforeEach(() => {
+      // jsdom 未实现 elementFromPoint / scrollBy：补空实现，避免自动滚动分支报错
+      (document as any).elementFromPoint = () => null;
+      (window as any).scrollBy = () => undefined;
+      writes = [];
+      Object.defineProperty(navigator, 'clipboard', {
+        configurable: true,
+        value: {
+          writeText: (text: string) => {
+            writes.push(text);
+            return Promise.resolve();
+          },
+        },
+      });
+      host = document.createElement('div');
+      document.body.appendChild(host);
+    });
+
+    afterEach(() => {
+      act(() => {
+        ReactDOM.unmountComponentAtNode(host);
+      });
+      host.remove();
+      document.body.innerHTML = '';
+    });
+
+    const mount = (opts?: any) => {
+      act(() => {
+        ReactDOM.render(React.createElement(Harness, { opts: opts }), host);
+      });
+    };
+    const cellAt = (row: number, col: number): HTMLElement => {
+      const all = Array.from(
+        host.querySelectorAll('td.ant-table-cell'),
+      ) as HTMLElement[];
+      return all.filter((td) => td.cellIndex === col)[row];
+    };
+    const fire = (target: Element, type: string, init?: any) => {
+      target.dispatchEvent(
+        new MouseEvent(
+          type,
+          Object.assign({ bubbles: true, cancelable: true }, init),
+        ),
+      );
+    };
+    const flush = () =>
+      act(() => new Promise((resolve) => setTimeout(resolve, 30)) as any);
+
+    it('纯单击：不复制、不显示高亮、click 保持原生', async () => {
+      mount();
+      let rowClicks = 0;
+      host
+        .querySelectorAll('tr.ant-table-row')[0]
+        .addEventListener('click', () => {
+          rowClicks += 1;
+        });
+      fire(cellAt(0, 1), 'mousedown');
+      fire(cellAt(0, 1), 'mouseup');
+      fire(cellAt(0, 1), 'click');
+      await flush();
+      expect(writes).toEqual([]);
+      const overlay = document.querySelector(
+        '.bs-range-copy__overlay',
+      ) as HTMLElement;
+      expect(!overlay || overlay.style.display === 'none').toBe(true);
+      expect(rowClicks).toBe(1);
+    });
+
+    it('拖拽：复制 TSV，并抑制随后的那一次 click', async () => {
+      mount();
+      let rowClicks = 0;
+      host
+        .querySelectorAll('tr.ant-table-row')[1]
+        .addEventListener('click', () => {
+          rowClicks += 1;
+        });
+      fire(cellAt(0, 1), 'mousedown');
+      fire(cellAt(1, 2), 'mousemove');
+      fire(document.body, 'mouseup');
+      await flush();
+      expect(writes[0]).toBe('r0c1\tr0c2\r\nr1c1\tr1c2');
+      fire(cellAt(1, 2), 'click');
+      expect(rowClicks).toBe(0);
+    });
+
+    it('单击后 Shift+点击：以基准格为另一角成矩形并复制', async () => {
+      mount();
+      fire(cellAt(0, 1), 'mousedown');
+      fire(cellAt(0, 1), 'mouseup');
+      fire(cellAt(0, 1), 'click');
+      await flush();
+      fire(cellAt(2, 2), 'mousedown', { shiftKey: true });
+      await flush();
+      expect(writes[0]).toBe('r0c1\tr0c2\r\nr1c1\tr1c2\r\nr2c1\tr2c2');
+    });
+
+    it('容器外有非折叠选区时，Ctrl+C 不被劫持', async () => {
+      mount();
+      fire(cellAt(0, 1), 'mousedown');
+      fire(cellAt(1, 2), 'mousemove');
+      fire(document.body, 'mouseup');
+      await flush();
+      const outside = document.createElement('p');
+      outside.textContent = 'outside';
+      document.body.appendChild(outside);
+      const range = document.createRange();
+      range.selectNodeContents(outside);
+      const selection = window.getSelection() as Selection;
+      selection.removeAllRanges();
+      selection.addRange(range);
+      const setData = jest.fn();
+      const ev = new Event('copy', { bubbles: true, cancelable: true });
+      (ev as any).clipboardData = { setData };
+      outside.dispatchEvent(ev);
+      expect(setData).not.toHaveBeenCalled();
+      selection.removeAllRanges();
+    });
+
+    it('enabled:false：不注入高亮层、任何交互都不复制', async () => {
+      mount({ enabled: false });
+      fire(cellAt(0, 1), 'mousedown');
+      fire(cellAt(1, 2), 'mousemove');
+      fire(document.body, 'mouseup');
+      await flush();
+      expect(document.querySelector('.bs-range-copy__overlay')).toBeNull();
+      expect(writes).toEqual([]);
+    });
+  });
+}

package/src/components/Business/BsSulaQueryTable/clipboard.ts

@@ -0,0 +1,36 @@
+/**
+ * 写文本到剪贴板。
+ * 1）优先用异步 Clipboard API：不依赖 execCommand 的焦点/可见性限制，也不抢焦点；
+ * 2）非安全上下文或旧内核退回 execCommand：临时 textarea 真正移出视口，用完立即移除
+ *    （避免"每次复制在 body 残留节点、并把键盘焦点留在残留节点上，之后按 Ctrl+C 复制到旧内容"）。
+ * 返回是否写入成功；失败时调用方应保留选区并提示用户用 Ctrl+C 重试。
+ */
+export const writeClipboard = async (text: string): Promise<boolean> => {
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard &&
+    navigator.clipboard.writeText
+  ) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (e) {
+      // 文档失焦 / 非安全上下文 / 无用户激活会被拒绝，继续走下面的兜底
+    }
+  }
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  textArea.setAttribute('readonly', 'readonly');
+  textArea.style.cssText = 'position:fixed;top:0;left:-9999px;opacity:0;';
+  document.body.appendChild(textArea);
+  try {
+    textArea.focus();
+    textArea.select();
+    textArea.setSelectionRange(0, text.length);
+    return document.execCommand('copy');
+  } catch (e) {
+    return false;
+  } finally {
+    textArea.remove();
+  }
+};

package/src/components/Business/BsSulaQueryTable/index.md

@@ -270,3 +270,25 @@ export default () => {
   );
 };
 ```
+
+### 框选复制（默认开启）
+
+列表支持 Excel 式框选复制：**鼠标拖拽框选**任意矩形区域，或**单击起点后按 Shift 点击终点**，松开/点击即把该区域按 TSV（列 `\t`、行 `\r\n`）写入剪贴板，可直接粘进 Excel / WPS 且行列对齐。
+
+```tsx
+// 关闭
+<BsSulaQueryTable {...config} rangeCopy={false} />
+
+// 微调（默认值即如下）
+<BsSulaQueryTable {...config} rangeCopy={{ excludeTitles: ['操作'], autoCopy: true }} />
+```
+
+| 行为 | 说明 |
+|---|---|
+| 默认排除列 | 勾选列始终排除；标题为「操作」的列默认排除（`excludeTitles` 可改） |
+| `autoCopy` | 默认 `true`：松开即复制；设 `false` 时只框选，由 `Ctrl+C` 复制 |
+| 连续选择 | 拖到表格上/下/左/右边缘会自动滚动并持续扩选；滚到头则改为滚动页面 |
+| 复制失败 | 自动降级：Clipboard API → `execCommand`；仍失败会提示「复制失败，请按 Ctrl+C 重试」，选区保留 |
+| 虚拟滚动 | `tableProps.isVirtualTable` 为真时自动关闭（只渲染可视行，取不到整段选区） |
+| 实现约束 | 只在容器上做事件委托、高亮层挂在表格滚动容器内（随内容滚动不漂移）；全程只用 ref，不触发宿主页面重渲染 |
+

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

@@ -23,6 +23,7 @@ import quanping from '../../../assets/icon-quanping.svg';
 import scanning from '../../../assets/scanning.svg';
 import shezhi from '../../../assets/icon-shezhi.svg';
 import './bssulaquerytable.less';
+import { useRangeCopy } from './useRangeCopy';
 
 interface Column {
   key?: string | string[];
@@ -166,6 +167,24 @@ export default (props: any) => {
 
   const rowsRef = useRef<any>(null);
 
+  // 框选复制（Excel 式：拖拽/Shift+点击选区 → TSV 写剪贴板）
+  // 默认开启；rangeCopy={false} 可关；虚拟滚动表只渲染可视行、取不到整段选区，自动关闭
+  const rangeCopyOption = props?.rangeCopy;
+  const rangeCopyEnabled =
+    rangeCopyOption !== false && !props?.tableProps?.isVirtualTable;
+  const rangeCopyRef = useRangeCopy({
+    enabled: rangeCopyEnabled,
+    // 只透传文档化的两个选项；不从对象里取 enabled，避免绕过上面的开关
+    excludeTitles:
+      rangeCopyOption && typeof rangeCopyOption === 'object'
+        ? rangeCopyOption.excludeTitles
+        : undefined,
+    autoCopy:
+      rangeCopyOption && typeof rangeCopyOption === 'object'
+        ? rangeCopyOption.autoCopy
+        : undefined,
+  });
+
   // 获取 table columns中所有的 key  防止有的地方是 dataindex
   const checkedList = useMemo(
     () =>
@@ -1125,7 +1144,11 @@ export default (props: any) => {
   );
 
   return (
-    <div id="bs-sula-query-table">
+    <div
+      id="bs-sula-query-table"
+      ref={rangeCopyEnabled ? rangeCopyRef : undefined}
+      className={rangeCopyEnabled ? 'bs-range-copy' : undefined}
+    >
       <MemoQueryTable {...memoConfig} />
       {/* 列设置弹出框表格 */}
       <SortableTable

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

@@ -0,0 +1,25 @@
+// 框选复制：容器内数据单元格给出「可框选」光标提示（操作列等右固定列保持按钮自身光标）
+.bs-range-copy {
+  tbody.ant-table-tbody
+    > tr.ant-table-row
+    > td.ant-table-cell:not(.ant-table-cell-fix-right) {
+    cursor: cell;
+  }
+
+  // 高亮层的定位祖先：滚动容器自身（高亮层作为它的子节点随内容滚动，不会漂移）。
+  // 只动 .ant-table-body：.ant-table-container 已由 antd 自身定位，收窄可避免影响嵌套表格/弹层。
+  .ant-table-body {
+    position: relative;
+  }
+}
+
+// 框选高亮层：绝对定位在滚动容器内容坐标系里，随内容滚动；z-index 低于固定列，不遮挡它们
+.bs-range-copy__overlay {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  box-sizing: border-box;
+  pointer-events: none;
+  background: rgba(24, 144, 255, 0.12);
+  border: 1px solid rgba(24, 144, 255, 0.55);
+}

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

@@ -0,0 +1,92 @@
+/**
+ * 表格「框选复制」的纯逻辑：单元格取值 → TSV，以及要排除的列判定。
+ * 零依赖、不碰 React，便于用 jsdom 做单测（见 __tests__/rangeCopy.test.ts）。
+ */
+
+export const DATA_ROW_SELECTOR = 'tr.ant-table-row';
+
+export interface RangeCopyResult {
+  /** 制表符分隔的文本，行间以 \r\n 分隔 */
+  text: string;
+  rowCount: number;
+  colCount: number;
+}
+
+/**
+ * 单元格取文本：用 textContent（不依赖布局，避免逐格 innerText 反复触发布局校验），
+ * 去掉零宽字符、把不换行空格还原成空格，并把会破坏 TSV 结构的制表符与换行压成空格。
+ */
+const normalizeCellText = (cell?: HTMLTableCellElement): string => {
+  if (!cell) return '';
+  return (cell.textContent || '')
+    .replace(/\u200b/g, '')
+    .replace(/\u00a0/g, ' ')
+    .replace(/[\t\r\n]+/g, ' ')
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+};
+
+/** 选区里真正会被复制的列（按列序）；勾选列/操作列等被排除的列不占位 */
+export const getIncludedCols = (
+  colStart: number,
+  colEnd: number,
+  excludeCols?: Set<number>,
+): number[] => {
+  const from = Math.min(colStart, colEnd);
+  const to = Math.max(colStart, colEnd);
+  const includedCols: number[] = [];
+  for (let col = from; col <= to; col += 1) {
+    if (!excludeCols || !excludeCols.has(col)) includedCols.push(col);
+  }
+  return includedCols;
+};
+
+export const buildRangeCopy = (
+  rows: HTMLTableRowElement[],
+  colStart: number,
+  colEnd: number,
+  excludeCols?: Set<number>,
+): RangeCopyResult => {
+  const includedCols = getIncludedCols(colStart, colEnd, excludeCols);
+  const text = rows
+    .map((row) =>
+      includedCols.map((col) => normalizeCellText(row.cells[col])).join('\t'),
+    )
+    .join('\r\n');
+  return { text, rowCount: rows.length, colCount: includedCols.length };
+};
+
+/**
+ * 判定要排除的列下标：勾选列始终排除，另外按表头文本排除（默认由调用方传入「操作」）。
+ * 用表头最后一行（叶子表头）定位，因此用户隐藏/调整列序后依然按当前渲染结果生效；
+ * 表头缺失时退化为用数据行找勾选列。
+ */
+export const resolveExcludeCols = (
+  tbody: HTMLTableSectionElement,
+  titles: string[],
+): Set<number> => {
+  const excludeCols = new Set<number>();
+  const headRows = tbody
+    .closest('.ant-table-wrapper')
+    ?.querySelectorAll('.ant-table-thead > tr');
+  const headRow =
+    headRows && headRows.length ? headRows[headRows.length - 1] : null;
+  const cells = headRow
+    ? Array.from(headRow.children)
+    : Array.from(
+        tbody.querySelector<HTMLTableRowElement>(DATA_ROW_SELECTOR)?.cells ||
+          [],
+      );
+  const normalizedTitles = titles.map((title) => title.replace(/\s+/g, ''));
+  cells.forEach((cell) => {
+    const th = cell as HTMLTableCellElement;
+    const title = (th.textContent || '').replace(/\s+/g, '');
+    if (
+      th.classList.contains('ant-table-selection-column') ||
+      (title && normalizedTitles.includes(title))
+    ) {
+      excludeCols.add(th.cellIndex);
+    }
+  });
+  return excludeCols;
+};