@teamias/rex-design 0.1.25 → 0.1.26

package/dist/components/base-table/base-table.js

@@ -230,26 +230,30 @@ export var BaseTable = function BaseTable(_ref) {
     if (loading) return;
     var timer = null;
     var fn = function fn() {
-      var contentBodyEl = document.querySelector(".".concat(state.tableKey));
-      var bodyEl = contentBodyEl === null || contentBodyEl === void 0 ? void 0 : contentBodyEl.querySelector('tbody');
-      // console.log(bodyEl);
-
-      if (!bodyEl) return;
       if (timer) clearTimeout(timer);
       timer = setTimeout(function () {
         timer = null;
-        var bodyRect = bodyEl.getBoundingClientRect();
+        // 重新查询，避免使用过期的 DOM 引用
+        var el = document.querySelector(".".concat(state.tableKey));
+        var tbody = (el === null || el === void 0 ? void 0 : el.querySelector('tbody')) || (el === null || el === void 0 ? void 0 : el.querySelector('.ant-table-tbody'));
+        if (!tbody || !el) return;
+        var bodyRect = tbody.getBoundingClientRect();
         // 54: 底部padding + 分页高度 + 分页padding
-        state.scrollHeight = Math.max(window.innerHeight - bodyRect.top - 54, 300);
-        state.tableWidth = contentBodyEl.offsetWidth;
-        // console.log(state.scrollHeight);
+        var nextScrollHeight = Math.max(window.innerHeight - bodyRect.top - 54, 300);
+        var nextTableWidth = el.offsetWidth;
+        if (nextScrollHeight === state.scrollHeight && nextTableWidth === state.tableWidth) return;
+        state.scrollHeight = nextScrollHeight;
+        state.tableWidth = nextTableWidth;
         update();
       }, 0);
     };
     fn();
-    window.addEventListener('resize', fn);
+    var el = document.querySelector(".".concat(state.tableKey));
+    var observer = el ? new ResizeObserver(fn) : null;
+    observer === null || observer === void 0 || observer.observe(el);
     return function () {
-      window.removeEventListener('resize', fn);
+      observer === null || observer === void 0 || observer.disconnect();
+      if (timer) clearTimeout(timer);
     };
   }, [loading], {
     wait: 0

package/dist/components/base-table/demo/VirtualScroll.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/base-table/demo/VirtualScroll.js

@@ -0,0 +1,177 @@
+import { BaseTable } from "../../..";
+import { useMemo } from 'react';
+
+/**
+ * title: 虚拟滚动 + onCell 行列合并
+ * description: 开启 `virtual` 虚拟滚动渲染海量数据，同时通过 `fieldPropsFn` 为列提供 `onCell`，可实现行合并（rowSpan）和列合并（colSpan）。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEPARTMENTS = ['市场部', '技术部', '人事部', '财务部', '运营部'];
+var ROLES = ['销售', '运营', '前端', '后端', '全栈', 'HRBP', '招聘', '财务', '会计', '审计'];
+var CITIES = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '天津', '重庆'];
+var STATUSES = ['在职', '离职', '试用期', '待入职'];
+var TOTAL = 10000;
+export default (function () {
+  var dataSource = useMemo(function () {
+    var deptSize = Math.floor(TOTAL / DEPARTMENTS.length);
+    var data = [];
+    DEPARTMENTS.forEach(function (dept, di) {
+      var count = di === DEPARTMENTS.length - 1 ? TOTAL - data.length - 1 : deptSize;
+      for (var n = 0; n < count; n++) {
+        var idx = data.length + 1;
+        data.push({
+          key: "row-".concat(idx),
+          category: dept,
+          name: "\u5458\u5DE5 ".concat(idx),
+          age: 20 + idx % 30,
+          department: "".concat(dept).concat(Math.floor(n / 100) + 1, "\u7EC4"),
+          role: ROLES[idx % ROLES.length],
+          score: 60 + idx % 40,
+          city: CITIES[idx % CITIES.length],
+          phone: "138".concat(String(idx).padStart(8, '0')),
+          email: "user".concat(idx, "@example.com"),
+          status: STATUSES[idx % STATUSES.length],
+          remark: ''
+        });
+      }
+    });
+
+    // 汇总行
+    data.push({
+      key: 'summary',
+      category: '汇总',
+      name: '合计',
+      age: 0,
+      department: '—',
+      role: '—',
+      score: 0,
+      city: '',
+      phone: '',
+      email: '',
+      status: '',
+      remark: "\u5171 ".concat(TOTAL, " \u4EBA")
+    });
+
+    // 计算 category 列 rowSpan：相邻相同部门合并
+    var i = 0;
+    while (i < data.length) {
+      var cat = data[i].category;
+      var j = i + 1;
+      while (j < data.length && data[j].category === cat) j++;
+      data[i]._categoryRowSpan = j - i;
+      for (var k = i + 1; k < j; k++) data[k]._categoryRowSpan = 0;
+      i = j;
+    }
+    return data;
+  }, []);
+  return /*#__PURE__*/_jsx(BaseTable, {
+    useDataCellRender: false,
+    virtual: true,
+    fieldsConfig: [{
+      title: '部门',
+      dataIndex: 'category',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 100
+    }, {
+      title: '年龄',
+      dataIndex: 'age',
+      width: 80,
+      align: 'center'
+    }, {
+      title: '区域',
+      dataIndex: 'department',
+      width: 120
+    }, {
+      title: '岗位',
+      dataIndex: 'role',
+      width: 100
+    }, {
+      title: '评分',
+      dataIndex: 'score',
+      width: 80,
+      align: 'center'
+    }, {
+      title: '城市',
+      dataIndex: 'city',
+      width: 100
+    }, {
+      title: '手机号',
+      dataIndex: 'phone',
+      width: 140
+    }, {
+      title: '邮箱',
+      dataIndex: 'email',
+      width: 200
+    }, {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '备注',
+      dataIndex: 'remark',
+      width: 220
+    }],
+    fieldPropsFn: function fieldPropsFn() {
+      return {
+        // 行合并：相同部门的行合并为一个单元格
+        category: {
+          onCell: function onCell(record) {
+            var _record$_categoryRowS;
+            return {
+              rowSpan: (_record$_categoryRowS = record._categoryRowSpan) !== null && _record$_categoryRowS !== void 0 ? _record$_categoryRowS : 1
+            };
+          }
+        },
+        // 列合并：汇总行的 city/phone/email/status 设为 colSpan=0，由 remark 列占据
+        city: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        phone: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        email: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        status: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 0
+            } : {};
+          }
+        },
+        // 备注列：汇总行横跨 city/phone/email/status/remark 共 5 列
+        remark: {
+          onCell: function onCell(record) {
+            return record.category === '汇总' ? {
+              colSpan: 5
+            } : {};
+          }
+        }
+      };
+    },
+    dataSource: dataSource,
+    scroll: function scroll(h) {
+      return {
+        y: h
+      };
+    },
+    pagination: false
+  });
+});

package/dist/components/base-table/demo/VirtualScrollDataCell.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/base-table/demo/VirtualScrollDataCell.js

@@ -0,0 +1,196 @@
+import { BaseTable } from "../../..";
+import { useMemo } from 'react';
+
+/**
+ * title: 虚拟滚动 + DataCell 渲染 + 区域行合并
+ * description: 启用 `virtual` 虚拟滚动，同时使用默认的 DataCell 方式渲染单元格，并通过 `fieldPropsFn` 为 `department` 列提供 `onCell`，实现相同区域的行合并（rowSpan）。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEPARTMENTS = ['市场部', '技术部', '人事部', '财务部', '运营部'];
+var ROLES = ['销售', '运营', '前端', '后端', '全栈', 'HRBP', '招聘', '财务', '会计', '审计'];
+var CITIES = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '南京', '天津', '重庆'];
+var STATUSES = ['在职', '离职', '试用期', '待入职'];
+var TOTAL = 10000;
+
+/** DataCell 文本单元格格式 */
+var textCell = function textCell(value) {
+  return [{
+    type: 'text',
+    props: {
+      value: String(value)
+    }
+  }];
+};
+
+/** DataCell 头像单元格格式 */
+var avatarCell = function avatarCell(idx) {
+  return [{
+    type: 'img',
+    props: {
+      value: "https://api.dicebear.com/7.x/miniavs/svg?seed=".concat(idx),
+      label: "\u5458\u5DE5 ".concat(idx),
+      width: 32,
+      height: 32,
+      style: {
+        borderRadius: '50%'
+      }
+    }
+  }];
+};
+
+/** DataCell 多维度评分单元格格式 */
+var scoreCell = function scoreCell(base) {
+  return [{
+    type: 'group-v2',
+    props: {
+      itemsDirection: 'column',
+      itemsGap: 2,
+      items: [{
+        type: 'text',
+        value: "\u7EE9\u6548\u5206\uFF1A".concat(base),
+        style: {
+          color: '#1677ff'
+        }
+      }, {
+        type: 'text',
+        value: "\u6280\u672F\u5206\uFF1A".concat(Math.min(base + 5, 100)),
+        style: {
+          color: '#52c41a'
+        }
+      }, {
+        type: 'text',
+        value: "\u7EFC\u5408\u5206\uFF1A".concat(Math.round((base + Math.min(base + 5, 100)) / 2)),
+        style: {
+          color: '#faad14'
+        }
+      }]
+    }
+  }];
+};
+
+/** DataCell 标签单元格格式 */
+var tagCell = function tagCell(value) {
+  return [{
+    type: 'tag',
+    props: {
+      value: value,
+      color: value === '在职' ? 'green' : value === '离职' ? 'red' : value === '试用期' ? 'blue' : 'orange'
+    }
+  }];
+};
+export default (function () {
+  var dataSource = useMemo(function () {
+    var deptSize = Math.floor(TOTAL / DEPARTMENTS.length);
+    var data = [];
+    DEPARTMENTS.forEach(function (dept, di) {
+      var count = di === DEPARTMENTS.length - 1 ? TOTAL - data.length : deptSize;
+      for (var n = 0; n < count; n++) {
+        var idx = data.length + 1;
+        var deptGroup = "".concat(dept).concat(Math.floor(n / 100) + 1, "\u7EC4");
+        data.push({
+          key: "row-".concat(idx),
+          _deptGroup: deptGroup,
+          avatar: avatarCell(idx),
+          name: textCell("\u5458\u5DE5 ".concat(idx)),
+          age: textCell(20 + idx % 30),
+          category: textCell(dept),
+          department: textCell(deptGroup),
+          role: textCell(ROLES[idx % ROLES.length]),
+          score: scoreCell(60 + idx % 40),
+          city: textCell(CITIES[idx % CITIES.length]),
+          phone: textCell("138".concat(String(idx).padStart(8, '0'))),
+          email: textCell("user".concat(idx, "@example.com")),
+          status: tagCell(STATUSES[idx % STATUSES.length]),
+          remark: textCell('')
+        });
+      }
+    });
+
+    // 计算 department 列 rowSpan：相邻相同区域合并
+    var i = 0;
+    while (i < data.length) {
+      var grp = data[i]._deptGroup;
+      var j = i + 1;
+      while (j < data.length && data[j]._deptGroup === grp) j++;
+      data[i]._departmentRowSpan = j - i;
+      for (var k = i + 1; k < j; k++) data[k]._departmentRowSpan = 0;
+      i = j;
+    }
+    return data;
+  }, []);
+  return /*#__PURE__*/_jsx(BaseTable, {
+    virtual: true,
+    fieldsConfig: [{
+      title: '头像',
+      dataIndex: 'avatar',
+      width: 64,
+      align: 'center'
+    }, {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 100
+    }, {
+      title: '年龄',
+      dataIndex: 'age',
+      width: 80,
+      align: 'center'
+    }, {
+      title: '部门',
+      dataIndex: 'category',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '区域',
+      dataIndex: 'department',
+      width: 120
+    }, {
+      title: '岗位',
+      dataIndex: 'role',
+      width: 100
+    }, {
+      title: '评分',
+      dataIndex: 'score',
+      width: 160
+    }, {
+      title: '城市',
+      dataIndex: 'city',
+      width: 100
+    }, {
+      title: '手机号',
+      dataIndex: 'phone',
+      width: 140
+    }, {
+      title: '邮箱',
+      dataIndex: 'email',
+      width: 200
+    }, {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      align: 'center'
+    }, {
+      title: '备注',
+      dataIndex: 'remark',
+      width: 220
+    }],
+    fieldPropsFn: function fieldPropsFn() {
+      return {
+        department: {
+          onCell: function onCell(record) {
+            var _ref;
+            return {
+              rowSpan: (_ref = record._departmentRowSpan) !== null && _ref !== void 0 ? _ref : 1
+            };
+          }
+        }
+      };
+    },
+    dataSource: dataSource,
+    scroll: function scroll(h) {
+      return {
+        y: h
+      };
+    },
+    pagination: false
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/rex-design",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",