@jetlinks-web/components 3.1.14 → 3.2.0

package/lib/VirtualTable/Table.js

@@ -0,0 +1,374 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _vue = require("vue");
+var _antDesignVue = require("ant-design-vue");
+var _table = require("ant-design-vue/lib/table");
+var _useVirtualScroll = require("./useVirtualScroll");
+var _useTreeData = require("./useTreeData");
+// 展开图标组件
+var ExpandIcon = (0, _vue.defineComponent)({
+  name: 'VirtualExpandIcon',
+  props: {
+    expanded: Boolean,
+    hasChildren: Boolean,
+    onExpand: Function,
+    prefixCls: {
+      type: String,
+      default: 'ant-table'
+    }
+  },
+  setup: function setup(props) {
+    var handleClick = function handleClick(e) {
+      var _props$onExpand;
+      e.stopPropagation();
+      (_props$onExpand = props.onExpand) === null || _props$onExpand === void 0 ? void 0 : _props$onExpand.call(props);
+    };
+    return function () {
+      if (!props.hasChildren) {
+        // 占位符，保持对齐
+        return (0, _vue.createVNode)("span", {
+          "class": "".concat(props.prefixCls, "-row-expand-icon ").concat(props.prefixCls, "-row-expand-icon-spaced")
+        }, null);
+      }
+      return (0, _vue.createVNode)("button", {
+        "type": "button",
+        "class": ["".concat(props.prefixCls, "-row-expand-icon"), props.expanded ? "".concat(props.prefixCls, "-row-expand-icon-expanded") : "".concat(props.prefixCls, "-row-expand-icon-collapsed")],
+        "onClick": handleClick,
+        "aria-expanded": props.expanded
+      }, null);
+    };
+  }
+});
+/**
+ * 虚拟滚动 Table 组件
+ * 完全兼容 a-table 的所有功能，同时支持大数据虚拟滚动
+ * 支持树形数据的虚拟滚动
+ */
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'JVirtualTable',
+  inheritAttrs: false,
+  props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _table.tableProps)()), {}, {
+    virtual: {
+      type: [Boolean, Object],
+      default: false
+    }
+  }),
+  emits: ['expandedRowsChange', 'expand'],
+  setup: function setup(props, _ref) {
+    var _virtualConfig$value, _virtualConfig$value2, _virtualConfig$value3;
+    var attrs = _ref.attrs,
+      slots = _ref.slots,
+      expose = _ref.expose,
+      emit = _ref.emit;
+    // Table ref
+    var tableRef = (0, _vue.ref)();
+    var scrollContainerRef = (0, _vue.ref)();
+    // 解析虚拟滚动配置
+    var virtualConfig = (0, _vue.computed)(function () {
+      if (!props.virtual) return null;
+      if (typeof props.virtual === 'boolean') {
+        return props.virtual ? {
+          itemHeight: 54,
+          overscan: 5,
+          threshold: 100
+        } : null;
+      }
+      return {
+        itemHeight: props.virtual.itemHeight || 54,
+        overscan: props.virtual.overscan || 5,
+        threshold: props.virtual.threshold || 100
+      };
+    });
+    // 获取容器高度
+    var containerHeight = (0, _vue.computed)(function () {
+      var _props$scroll;
+      if (!((_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.y)) return 0;
+      var y = props.scroll.y;
+      if (typeof y === 'number') return y;
+      // 解析 '500px' 这样的字符串
+      var num = parseInt(String(y), 10);
+      return isNaN(num) ? 0 : num;
+    });
+    // 获取子节点字段名
+    var childrenColumnName = (0, _vue.computed)(function () {
+      return props.childrenColumnName || 'children';
+    });
+    // 获取 rowKey
+    var rowKeyProp = (0, _vue.computed)(function () {
+      return props.rowKey || 'key';
+    });
+    // 判断是否为树形数据
+    var isTreeData = (0, _vue.computed)(function () {
+      var data = props.dataSource || [];
+      return data.some(function (item) {
+        var children = item[childrenColumnName.value];
+        return children && Array.isArray(children) && children.length > 0;
+      });
+    });
+    // 使用树形数据 hook
+    var treeDataResult = (0, _useTreeData.useTreeData)({
+      data: toRef(props, 'dataSource'),
+      childrenColumnName: childrenColumnName.value,
+      rowKey: rowKeyProp.value,
+      defaultExpandedRowKeys: props.defaultExpandedRowKeys,
+      expandedRowKeys: props.expandedRowKeys ? toRef(props, 'expandedRowKeys') : undefined,
+      defaultExpandAllRows: props.defaultExpandAllRows,
+      onExpandedRowsChange: function onExpandedRowsChange(keys) {
+        emit('expandedRowsChange', keys);
+      }
+    });
+    // 处理展开/折叠
+    var handleExpand = function handleExpand(node) {
+      treeDataResult.toggle(node.key);
+      emit('expand', !node.expanded, node.record);
+    };
+    // 判断是否启用虚拟滚动
+    var shouldEnableVirtual = (0, _vue.computed)(function () {
+      var _props$scroll2, _props$dataSource;
+      if (!virtualConfig.value) return false;
+      if (!((_props$scroll2 = props.scroll) !== null && _props$scroll2 !== void 0 && _props$scroll2.y)) return false;
+      // 对于树形数据，使用扁平化后的数据长度
+      var dataLength = isTreeData.value ? treeDataResult.flattenedData.value.length : ((_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.length) || 0;
+      return dataLength >= virtualConfig.value.threshold;
+    });
+    // 虚拟滚动的数据数量（树形数据使用扁平化后的长度）
+    var itemCount = (0, _vue.computed)(function () {
+      var _props$dataSource2;
+      if (isTreeData.value) {
+        return treeDataResult.flattenedData.value.length;
+      }
+      return ((_props$dataSource2 = props.dataSource) === null || _props$dataSource2 === void 0 ? void 0 : _props$dataSource2.length) || 0;
+    });
+    // 初始化虚拟滚动
+    var virtualScroll = (0, _useVirtualScroll.useVirtualScroll)({
+      itemCount: itemCount,
+      containerHeight: containerHeight,
+      itemHeight: ((_virtualConfig$value = virtualConfig.value) === null || _virtualConfig$value === void 0 ? void 0 : _virtualConfig$value.itemHeight) || 54,
+      overscan: ((_virtualConfig$value2 = virtualConfig.value) === null || _virtualConfig$value2 === void 0 ? void 0 : _virtualConfig$value2.overscan) || 5,
+      threshold: ((_virtualConfig$value3 = virtualConfig.value) === null || _virtualConfig$value3 === void 0 ? void 0 : _virtualConfig$value3.threshold) || 100
+    });
+    // 查找并监听滚动容器
+    var findScrollContainer = function findScrollContainer() {
+      if (!tableRef.value) return null;
+      // 查找 .ant-table-body 元素（这是实际的滚动容器）
+      var tableElement = tableRef.value.$el || tableRef.value;
+      var scrollBody = tableElement.querySelector('.ant-table-body');
+      return scrollBody;
+    };
+    // 设置滚动监听
+    var setupScrollListener = function setupScrollListener() {
+      (0, _vue.nextTick)(function () {
+        var container = findScrollContainer();
+        if (container) {
+          scrollContainerRef.value = container;
+          container.addEventListener('scroll', virtualScroll.handleScroll);
+        }
+      });
+    };
+    // 移除滚动监听
+    var removeScrollListener = function removeScrollListener() {
+      if (scrollContainerRef.value) {
+        scrollContainerRef.value.removeEventListener('scroll', virtualScroll.handleScroll);
+        scrollContainerRef.value = undefined;
+      }
+    };
+    // 监听虚拟滚动启用状态变化
+    (0, _vue.watch)(shouldEnableVirtual, function (enabled) {
+      if (enabled) {
+        setupScrollListener();
+      } else {
+        removeScrollListener();
+      }
+    });
+    // 生命周期
+    (0, _vue.onMounted)(function () {
+      if (shouldEnableVirtual.value) {
+        setupScrollListener();
+      }
+    });
+    (0, _vue.onBeforeUnmount)(function () {
+      removeScrollListener();
+    });
+    // 暴露方法
+    expose({
+      scrollTo: virtualScroll.scrollTo,
+      scrollToIndex: virtualScroll.scrollToIndex,
+      // 树形数据相关方法
+      expand: treeDataResult.expand,
+      collapse: treeDataResult.collapse,
+      toggle: treeDataResult.toggle,
+      expandAll: treeDataResult.expandAll,
+      collapseAll: treeDataResult.collapseAll,
+      expandTo: treeDataResult.expandTo,
+      isExpanded: treeDataResult.isExpanded
+    });
+    // 渲染函数
+    return function () {
+      var _props$indentSize;
+      // 不使用虚拟滚动的情况
+      if (!shouldEnableVirtual.value) {
+        return (0, _vue.createVNode)(_antDesignVue.Table, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+          "ref": tableRef
+        }, attrs), props), slots);
+      }
+      // 使用虚拟滚动
+      var startIndex = virtualScroll.startIndex,
+        endIndex = virtualScroll.endIndex,
+        offsetY = virtualScroll.offsetY,
+        totalHeight = virtualScroll.totalHeight;
+      // 准备虚拟滚动数据
+      var virtualDataSource;
+      var needsCustomIndent = false;
+      var indentSize = (_props$indentSize = props.indentSize) !== null && _props$indentSize !== void 0 ? _props$indentSize : 15;
+      if (isTreeData.value) {
+        // 树形数据：使用扁平化后的数据
+        var flatData = treeDataResult.flattenedData.value;
+        var visibleNodes = flatData.slice(startIndex.value, endIndex.value);
+        // 使用 Proxy 代理原始 record，确保修改能同步到原始数据
+        virtualDataSource = visibleNodes.map(function (node) {
+          return new Proxy(node.record, {
+            get: function get(target, prop) {
+              if (prop === '__virtual_tree_node__') {
+                return node;
+              }
+              return Reflect.get(target, prop);
+            },
+            set: function set(target, prop, value) {
+              if (prop !== '__virtual_tree_node__') {
+                return Reflect.set(target, prop, value);
+              }
+              return true;
+            },
+            has: function has(target, prop) {
+              if (prop === '__virtual_tree_node__') {
+                return true;
+              }
+              return Reflect.has(target, prop);
+            },
+            ownKeys: function ownKeys(target) {
+              return [].concat((0, _toConsumableArray2.default)(Reflect.ownKeys(target)), ['__virtual_tree_node__']);
+            },
+            getOwnPropertyDescriptor: function getOwnPropertyDescriptor(target, prop) {
+              if (prop === '__virtual_tree_node__') {
+                return {
+                  configurable: true,
+                  enumerable: false,
+                  value: node
+                };
+              }
+              return Reflect.getOwnPropertyDescriptor(target, prop);
+            }
+          });
+        });
+        needsCustomIndent = true;
+      } else {
+        // 普通数据：直接切片
+        virtualDataSource = (props.dataSource || []).slice(startIndex.value, endIndex.value);
+      }
+      // 处理列，添加树形展开功能
+      var processedColumns = props.columns;
+      if (needsCustomIndent && processedColumns && processedColumns.length > 0) {
+        // 克隆 columns，修改第一列以添加展开按钮和缩进
+        processedColumns = processedColumns.map(function (col, colIndex) {
+          if (colIndex === 0) {
+            var originalRender = col.customRender;
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
+              customRender: function customRender(renderProps) {
+                var record = renderProps.record,
+                  text = renderProps.text,
+                  index = renderProps.index;
+                var treeNode = record.__virtual_tree_node__;
+                if (!treeNode) {
+                  // 非树形数据行，使用原始渲染
+                  if (originalRender) {
+                    return originalRender(renderProps);
+                  }
+                  return text;
+                }
+                var level = treeNode.level,
+                  hasChildren = treeNode.hasChildren,
+                  expanded = treeNode.expanded;
+                var indentStyle = {
+                  paddingLeft: "".concat(level * indentSize, "px"),
+                  display: 'inline-flex',
+                  alignItems: 'center'
+                };
+                var content = originalRender ? originalRender(renderProps) : text;
+                return (0, _vue.createVNode)("span", {
+                  "style": indentStyle
+                }, [(0, _vue.createVNode)(ExpandIcon, {
+                  "expanded": expanded,
+                  "hasChildren": hasChildren,
+                  "onExpand": function onExpand() {
+                    return handleExpand(treeNode);
+                  }
+                }, null), (0, _vue.createVNode)("span", null, [content])]);
+              }
+            });
+          }
+          return col;
+        });
+      }
+      // 自定义 body 组件
+      var customComponents = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.components || {}), {}, {
+        body: {
+          wrapper: function wrapper(bodyProps, _ref2) {
+            var _processedColumns, _bodySlots$default, _processedColumns2;
+            var bodySlots = _ref2.slots;
+            // 计算底部占位高度
+            var accumulatedHeight = offsetY.value;
+            for (var i = startIndex.value; i < endIndex.value; i++) {
+              accumulatedHeight += virtualScroll.getItemHeight(i);
+            }
+            var bottomHeight = totalHeight.value - accumulatedHeight;
+            return (0, _vue.createVNode)("tbody", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bodyProps), {}, {
+              "class": "ant-table-tbody"
+            }), [offsetY.value > 0 && (0, _vue.createVNode)("tr", {
+              "aria-hidden": "true",
+              "style": {
+                height: 0
+              }
+            }, [(0, _vue.createVNode)("td", {
+              "style": {
+                padding: 0,
+                border: 0,
+                height: "".concat(offsetY.value, "px")
+              },
+              "colSpan": ((_processedColumns = processedColumns) === null || _processedColumns === void 0 ? void 0 : _processedColumns.length) || 1
+            }, null)]), (_bodySlots$default = bodySlots.default) === null || _bodySlots$default === void 0 ? void 0 : _bodySlots$default.call(bodySlots), bottomHeight > 0 && (0, _vue.createVNode)("tr", {
+              "aria-hidden": "true",
+              "style": {
+                height: 0
+              }
+            }, [(0, _vue.createVNode)("td", {
+              "style": {
+                padding: 0,
+                border: 0,
+                height: "".concat(bottomHeight, "px")
+              },
+              "colSpan": ((_processedColumns2 = processedColumns) === null || _processedColumns2 === void 0 ? void 0 : _processedColumns2.length) || 1
+            }, null)])]);
+          }
+        }
+      });
+      // 移除树形数据的 children 配置，因为我们自己处理
+      var tableProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+        dataSource: virtualDataSource,
+        columns: processedColumns,
+        components: customComponents
+      }, isTreeData.value ? {
+        childrenColumnName: '__disabled__'
+      } : {});
+      return (0, _vue.createVNode)(_antDesignVue.Table, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        "ref": tableRef
+      }, attrs), tableProps), slots);
+    };
+  }
+});

package/lib/VirtualTable/VirtualBody.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _useVirtualScroll = require("./useVirtualScroll");
+/**
+ * 虚拟滚动 Body 组件
+ * 用于替代 Table 的默认 body
+ */
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VirtualBody',
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    scrollY: {
+      type: Number,
+      required: true
+    },
+    itemHeight: {
+      type: [Number, Function],
+      default: 54
+    },
+    overscan: {
+      type: Number,
+      default: 5
+    },
+    threshold: {
+      type: Number,
+      default: 100
+    }
+  },
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
+    var itemCount = (0, _vue.computed)(function () {
+      return props.data.length;
+    });
+    // 初始化虚拟滚动
+    var virtualScroll = (0, _useVirtualScroll.useVirtualScroll)({
+      itemCount: itemCount,
+      containerHeight: props.scrollY,
+      itemHeight: props.itemHeight,
+      overscan: props.overscan,
+      threshold: props.threshold
+    });
+    // 判断是否启用虚拟滚动
+    var isVirtualEnabled = (0, _vue.computed)(function () {
+      return props.data.length >= (props.threshold || 100);
+    });
+    return function () {
+      var _slots$default2;
+      var data = props.data;
+      if (!isVirtualEnabled.value) {
+        var _slots$default;
+        // 数据量小，不使用虚拟滚动，渲染所有行
+        return (0, _vue.createVNode)("tbody", {
+          "class": "ant-table-tbody"
+        }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
+      }
+      // 使用虚拟滚动
+      var startIndex = virtualScroll.startIndex,
+        endIndex = virtualScroll.endIndex,
+        offsetY = virtualScroll.offsetY,
+        totalHeight = virtualScroll.totalHeight,
+        visibleCount = virtualScroll.visibleCount;
+      // 计算底部占位高度
+      var bottomHeight = totalHeight.value - offsetY.value;
+      var accumulatedHeight = offsetY.value;
+      for (var i = startIndex.value; i < endIndex.value; i++) {
+        accumulatedHeight += virtualScroll.getItemHeight(i);
+      }
+      var actualBottomHeight = totalHeight.value - accumulatedHeight;
+      return (0, _vue.createVNode)("tbody", {
+        "class": "ant-table-tbody"
+      }, [offsetY.value > 0 && (0, _vue.createVNode)("tr", {
+        "aria-hidden": "true",
+        "class": "ant-table-virtual-placeholder"
+      }, [(0, _vue.createVNode)("td", {
+        "style": {
+          padding: 0,
+          border: 0,
+          height: "".concat(offsetY.value, "px")
+        }
+      }, null)]), (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots), actualBottomHeight > 0 && (0, _vue.createVNode)("tr", {
+        "aria-hidden": "true",
+        "class": "ant-table-virtual-placeholder"
+      }, [(0, _vue.createVNode)("td", {
+        "style": {
+          padding: 0,
+          border: 0,
+          height: "".concat(actualBottomHeight, "px")
+        }
+      }, null)])]);
+    };
+  }
+});

package/lib/VirtualTable/data.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flattenTree = exports.findAllChildren = void 0;
+exports.flattenTree = exports.findAllChildren = exports._headerProps = exports._contentProps = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _lodashEs = require("lodash");
+var _table = require("ant-design-vue/es/table");
 // 扁平化数据
 
 var _flattenTree = exports.flattenTree = function flattenTree(tree) {
@@ -44,4 +45,45 @@ var findAllChildren = exports.findAllChildren = function findAllChildren() {
   }
   recursive(parentId);
   return result;
-};
+};
+var _headerProps = exports._headerProps = {
+  mode: {
+    type: [String, undefined],
+    default: undefined
+  },
+  modeValue: {
+    type: String,
+    default: 'TABLE'
+  }
+};
+var _contentProps = exports._contentProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _table.tableProps)()), _headerProps), {}, {
+  dataSource: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  columns: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  expandedRowKeys: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  rowSelection: {
+    type: Object
+  },
+  rowKey: {
+    type: [String, Function],
+    default: 'id'
+  },
+  height: {
+    type: Number,
+    default: 500
+  }
+});

package/lib/VirtualTable/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _VirtualTable = _interopRequireDefault(require("./VirtualTable.js"));
-_VirtualTable.default.install = function (app) {
-  app.component(_VirtualTable.default.name, _VirtualTable.default);
+var _Table = _interopRequireDefault(require("./Table"));
+_Table.default.install = function (app) {
+  app.component(_Table.default.name, _Table.default);
 };
-var _default = exports.default = _VirtualTable.default;
+var _default = exports.default = _Table.default;

package/lib/VirtualTable/style/index.js

@@ -12,9 +12,11 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
       display: 'flex',
       'flex-direction': 'column',
       '.virtual-table-header': {
+        overflow: 'hidden',
         '.ant-table': {
           '.ant-table-container': {
             '.ant-table-content': {
+              overflow: 'hidden !important',
               '.ant-table-tbody': {
                 display: 'none'
               }
@@ -27,6 +29,10 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
         position: 'relative',
         'min-height': '100px'
       },
+      '.virtual-table-header-fixed': {
+        // 位移的容器，提升位移动画性能
+        'will-change': 'transform'
+      },
       '.virtual-table-row-expand-icon': {
         'margin-right': '8px',
         'font-size': 'relative',