@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/table/utils.js

@@ -0,0 +1,617 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.arrayAdd = arrayAdd;
+exports.assignColumnKeys = assignColumnKeys;
+exports.cloneDeep = cloneDeep;
+exports.equalWith = equalWith;
+exports.expandBtnShouldInRow = expandBtnShouldInRow;
+exports.filterColumns = filterColumns;
+exports.findColumn = findColumn;
+exports.flattenColumns = flattenColumns;
+exports.genExpandedRowKey = genExpandedRowKey;
+exports.getAllDisabledRowKeys = getAllDisabledRowKeys;
+exports.getAllLevelColumns = getAllLevelColumns;
+exports.getColumnByLevelIndex = getColumnByLevelIndex;
+exports.getColumnKey = getColumnKey;
+exports.getColumnsByLevel = getColumnsByLevel;
+exports.getDefaultVirtualizedRowConfig = getDefaultVirtualizedRowConfig;
+exports.getRecord = getRecord;
+exports.getRecordChildren = getRecordChildren;
+exports.getRecordKey = getRecordKey;
+exports.getScrollbarColumnWidth = getScrollbarColumnWidth;
+exports.isAnyFixed = isAnyFixed;
+exports.isAnyFixedRight = isAnyFixedRight;
+exports.isDisabled = isDisabled;
+exports.isExpanded = isExpanded;
+exports.isExpandedColumn = isExpandedColumn;
+exports.isFirstFixedRight = isFirstFixedRight;
+exports.isFixed = isFixed;
+exports.isFixedLeft = isFixedLeft;
+exports.isFixedRight = isFixedRight;
+exports.isInnerColumnKey = isInnerColumnKey;
+exports.isLastLeftFixed = isLastLeftFixed;
+exports.isScrollbarColumn = isScrollbarColumn;
+exports.isSelected = isSelected;
+exports.isSelectionColumn = isSelectionColumn;
+exports.mergeColumns = mergeColumns;
+exports.mergeQueries = mergeQueries;
+exports.sliceColumnsByLevel = sliceColumnsByLevel;
+exports.warnIfNoDataIndex = warnIfNoDataIndex;
+exports.withResizeWidth = withResizeWidth;
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
+
+var _includes2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _some2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _findIndex2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _toString2 = _interopRequireDefault(require("lodash/toString"));
+
+var _includes3 = _interopRequireDefault(require("lodash/includes"));
+
+var _some3 = _interopRequireDefault(require("lodash/some"));
+
+var _findIndex3 = _interopRequireDefault(require("lodash/findIndex"));
+
+var _each2 = _interopRequireDefault(require("lodash/each"));
+
+var _clone2 = _interopRequireDefault(require("lodash/clone"));
+
+var _map2 = _interopRequireDefault(require("lodash/map"));
+
+var _find2 = _interopRequireDefault(require("lodash/find"));
+
+var _filter2 = _interopRequireDefault(require("lodash/filter"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _isEqualWith2 = _interopRequireDefault(require("lodash/isEqualWith"));
+
+var _cloneDeepWith2 = _interopRequireDefault(require("lodash/cloneDeepWith"));
+
+var _constants = require("./constants");
+
+var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
+
+var _Logger = _interopRequireDefault(require("../utils/Logger"));
+
+function cloneDeep(value, customizer) {
+  return (0, _cloneDeepWith2.default)(value, v => {
+    if (typeof v === 'function') {
+      return v;
+    } else if (typeof customizer === 'function') {
+      return customizer(v);
+    }
+
+    return undefined;
+  });
+}
+
+function equalWith(value, other, customizer) {
+  return (0, _isEqualWith2.default)(value, other, function (objVal, othVal) {
+    if (typeof objVal === 'function' && typeof othVal === 'function') {
+      return (0, _toString2.default)(objVal) === (0, _toString2.default)(othVal);
+    }
+
+    if (typeof customizer === 'function') {
+      for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        rest[_key - 2] = arguments[_key];
+      }
+
+      return customizer(objVal, othVal, ...rest);
+    } // If customizer returns undefined, comparisons are handled by isEqual instead
+
+
+    return undefined;
+  });
+}
+
+function getColumnKey(column, keyPropNames) {
+  keyPropNames = (0, _isArray.default)(keyPropNames) ? keyPropNames : ['key', 'dataIndex'];
+  let key = null;
+  (0, _each2.default)(keyPropNames, propName => {
+    key = (0, _get2.default)(column, propName);
+
+    if (key != null) {
+      return false;
+    }
+
+    return undefined;
+  });
+  return key;
+}
+
+function mergeColumns() {
+  let oldColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let newColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let keyPropNames = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let deep = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  const finalColumns = [];
+  const clone = deep ? cloneDeep : _clone2.default;
+  (0, _map2.default)(newColumns, newColumn => {
+    newColumn = (0, _assign.default)({}, newColumn);
+    const key = getColumnKey(newColumn, keyPropNames);
+    const oldColumn = key != null && (0, _find2.default)(oldColumns, item => getColumnKey(item, keyPropNames) === key);
+
+    if (oldColumn) {
+      finalColumns.push(clone((0, _assign.default)((0, _assign.default)({}, oldColumn), newColumn)));
+    } else {
+      finalColumns.push(clone(newColumn));
+    }
+  });
+  return finalColumns;
+}
+/**
+ *
+ * @param {Array<number>} arr
+ * @param {number} [beginIndex] begin index, included
+ * @param {number} [endIndex] end index, not included
+ * @returns {number}
+ */
+
+
+function arrayAdd() {
+  let arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let beginIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let endIndex = arguments.length > 2 ? arguments[2] : undefined;
+  beginIndex = beginIndex < 0 || typeof beginIndex !== 'number' ? 0 : beginIndex;
+  endIndex = endIndex > arr.length || typeof endIndex !== 'number' ? arr.length : endIndex;
+  let result = 0;
+  (0, _each2.default)(arr, (value, index) => {
+    if (index >= beginIndex && index < endIndex) {
+      result += typeof value === 'number' && !isNaN(value) ? value : 0;
+    }
+  });
+  return result;
+}
+
+function isLastLeftFixed(columns, column) {
+  let checkKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['key'];
+  const leftFixedColumns = (0, _filter2.default)(columns, col => col.fixed === true || col.fixed === 'left');
+  const index = (0, _findIndex3.default)(leftFixedColumns, col => (0, _every.default)(checkKeys).call(checkKeys, key => col[key] != null && col[key] === column[key]));
+  return leftFixedColumns.length > 0 && index === leftFixedColumns.length - 1;
+}
+
+function isFirstFixedRight(columns, column) {
+  let checkKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['key'];
+  const rightFixedColumns = (0, _filter2.default)(columns, col => col.fixed === 'right');
+  const index = (0, _findIndex3.default)(rightFixedColumns, col => (0, _every.default)(checkKeys).call(checkKeys, key => col[key] != null && col[key] === column[key]));
+  return rightFixedColumns.length > 0 && index === 0;
+}
+
+function isAnyFixed(columns) {
+  let fixedSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['left', true, 'right'];
+
+  if (typeof fixedSet === 'string' || typeof fixedSet === 'boolean') {
+    fixedSet = [fixedSet];
+  }
+
+  return fixedSet.length > 0 && (0, _some3.default)(columns, col => (0, _includes2.default)(fixedSet).call(fixedSet, col.fixed));
+}
+
+function isAnyFixedRight(columns) {
+  return (0, _some3.default)(columns, col => col.fixed === 'right');
+}
+
+function isFixedLeft(column) {
+  var _context;
+
+  return (0, _includes2.default)(_context = ['left', true]).call(_context, (0, _get2.default)(column, 'fixed'));
+}
+
+function isFixedRight(column) {
+  var _context2;
+
+  return (0, _includes2.default)(_context2 = ['right']).call(_context2, (0, _get2.default)(column, 'fixed'));
+}
+
+function isFixed(column) {
+  return isFixedLeft(column) || isFixedRight(column);
+}
+
+function isInnerColumnKey(key) {
+  var _context3;
+
+  return (0, _includes2.default)(_context3 = [_constants.strings.DEFAULT_KEY_COLUMN_EXPAND, _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR, _constants.strings.DEFAULT_KEY_COLUMN_SELECTION]).call(_context3, key);
+}
+
+function isExpandedColumn(column) {
+  return (0, _get2.default)(column, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_EXPAND;
+}
+
+function isScrollbarColumn(column) {
+  return (0, _get2.default)(column, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR;
+}
+
+function isSelectionColumn(column) {
+  return (0, _get2.default)(column, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_SELECTION;
+}
+
+function filterColumns(columns) {
+  let ignoreKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [_constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR];
+  return (0, _filter2.default)(columns, col => !(0, _includes2.default)(ignoreKeys).call(ignoreKeys, col.key));
+}
+/**
+ * get width of scroll bar
+ * @param {Array} columns
+ * @returns {Number|undefined}
+ */
+
+
+function getScrollbarColumnWidth() {
+  let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const len = columns.length;
+
+  if (len) {
+    const lastColumn = columns[len - 1];
+
+    if ((0, _get2.default)(lastColumn, 'key') === _constants.strings.DEFAULT_KEY_COLUMN_SCROLLBAR) {
+      return (0, _get2.default)(lastColumn, 'width', 0);
+    }
+  }
+}
+
+function getRecordKey(record, rowKey) {
+  if (rowKey === undefined) {
+    rowKey = 'key';
+  }
+
+  return typeof rowKey === 'function' ? rowKey(record) : (0, _get2.default)(record, rowKey);
+}
+/**
+ * Determine whether the expandedRowKeys includes a key (rowKey will be added to expandedRowKeys when the expand button is clicked)
+ * @param {*} expandedRowKeys
+ * @param {*} key
+ */
+
+
+function isExpanded(expandedRowKeys, key) {
+  return key != null && (0, _includes3.default)(expandedRowKeys, key);
+}
+/**
+ * Determine whether the selectedKeysSet includes the key
+ * @param {Set} selectedRowKeysSet
+ * @param {String} key
+ */
+
+
+function isSelected(selectedRowKeysSet, key) {
+  return key !== null && selectedRowKeysSet.has(key);
+}
+/**
+ * Whether the key is included in the disabledRowKeysSet
+ * @param {Set} disabledRowKeysSet
+ * @param {String} key
+ */
+
+
+function isDisabled(disabledRowKeysSet, key) {
+  return key !== null && disabledRowKeysSet.has(key);
+}
+
+function getRecord(data, recordKey, rowKey) {
+  if (rowKey === undefined) {
+    rowKey = 'key';
+  }
+
+  return (0, _find2.default)(data, record => recordKey != null && recordKey !== '' && getRecordKey(record, rowKey) === recordKey);
+}
+
+function getRecordChildren(record, childrenRecordName) {
+  if (childrenRecordName === undefined) {
+    childrenRecordName = 'children';
+  }
+
+  return (0, _get2.default)(record, childrenRecordName);
+}
+
+function genExpandedRowKey() {
+  let recordKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let suffix = arguments.length > 1 ? arguments[1] : undefined;
+
+  if (suffix === undefined) {
+    suffix = '__expanded_row';
+  }
+
+  return recordKey + suffix;
+}
+
+function getDefaultVirtualizedRowConfig() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let sectionRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const config = {};
+
+  if (size === 'small') {
+    config.height = sectionRow ? _constants.numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT : _constants.numbers.DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT;
+    config.minHeight = _constants.numbers.DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT;
+  } else if (size === 'middle') {
+    config.height = sectionRow ? _constants.numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_MIDDLE_HEIGHT : _constants.numbers.DEFAULT_VIRTUALIZED_ROW_MIDDLE_HEIGHT;
+    config.minHeight = _constants.numbers.DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT;
+  } else {
+    config.height = sectionRow ? _constants.numbers.DEFAULT_VIRTUALIZED_SECTION_ROW_HEIGHT : _constants.numbers.DEFAULT_VIRTUALIZED_ROW_HEIGHT;
+    config.minHeight = _constants.numbers.DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT;
+  }
+
+  return config;
+}
+
+function flattenColumns(cols) {
+  let childrenColumnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  const list = [];
+
+  if ((0, _isArray.default)(cols) && cols.length) {
+    for (const col of cols) {
+      if ((0, _isArray.default)(col[childrenColumnName]) && col[childrenColumnName].length) {
+        list.push(...flattenColumns(col[childrenColumnName], childrenColumnName));
+      } else {
+        warnIfNoDataIndex(col);
+        list.push(col);
+      }
+    }
+  }
+
+  return list;
+}
+
+function assignColumnKeys(columns) {
+  let childrenColumnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const sameLevelCols = [];
+  (0, _each2.default)(columns, (column, index) => {
+    if (column.key == null) {
+      var _context4;
+
+      column.key = (0, _concat.default)(_context4 = "".concat(level, "-")).call(_context4, index);
+    }
+
+    if ((0, _isArray.default)(column[childrenColumnName]) && column[childrenColumnName].length) {
+      sameLevelCols.push(...column[childrenColumnName]);
+    }
+  });
+
+  if (sameLevelCols.length) {
+    assignColumnKeys(sameLevelCols, childrenColumnName, level + 1);
+  }
+
+  return columns;
+}
+
+function sliceColumnsByLevel(columns) {
+  let targetLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let childrenColumnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  let currentLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  const slicedColumns = [];
+
+  if ((0, _isArray.default)(columns) && columns.length && currentLevel <= targetLevel) {
+    (0, _forEach.default)(columns).call(columns, column => {
+      const children = column[childrenColumnName];
+
+      if ((0, _isArray.default)(children) && children.length && currentLevel < targetLevel) {
+        slicedColumns.push(...sliceColumnsByLevel(children, targetLevel, childrenColumnName, currentLevel + 1));
+      } else {
+        slicedColumns.push(column);
+      }
+    });
+  }
+
+  return slicedColumns;
+}
+
+function getColumnsByLevel(columns) {
+  let targetLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let targetColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let currentLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let childrenColumnName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'children';
+
+  if ((0, _isArray.default)(columns) && columns.length) {
+    if (targetLevel === currentLevel) {
+      targetColumns.push(...columns);
+    } else {
+      (0, _forEach.default)(columns).call(columns, column => {
+        getColumnsByLevel(column[childrenColumnName], targetLevel, targetColumns, currentLevel + 1, childrenColumnName);
+      });
+    }
+  }
+
+  return targetColumns;
+}
+
+function getAllLevelColumns(columns) {
+  let childrenColumnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'children';
+  const all = [];
+
+  if ((0, _isArray.default)(columns) && columns.length) {
+    all.push([...columns]);
+    const sameLevelColumns = [];
+    (0, _forEach.default)(columns).call(columns, column => {
+      const children = column[childrenColumnName];
+
+      if ((0, _isArray.default)(children) && children.length) {
+        sameLevelColumns.push(...children);
+      }
+    });
+
+    if (sameLevelColumns.length) {
+      all.push(sameLevelColumns);
+    }
+  }
+
+  return all;
+}
+
+function getColumnByLevelIndex(columns, index) {
+  let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let childrenColumnName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'children';
+  const allLevelColumns = getAllLevelColumns(columns, childrenColumnName);
+  return allLevelColumns[level][index];
+}
+
+function findColumn(columns, column) {
+  let childrenColumnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  let found;
+  (0, _each2.default)(columns, item => {
+    if (item && item.key != null && !found) {
+      if (item.key === column.key) {
+        found = item;
+      }
+    }
+
+    if (item && (0, _isArray.default)(item[childrenColumnName]) && !found) {
+      found = findColumn(item[childrenColumnName], column, childrenColumnName);
+    }
+
+    if (found) {
+      return false;
+    }
+
+    return undefined;
+  });
+  return found;
+}
+
+function expandBtnShouldInRow(props) {
+  const {
+    expandedRowRender,
+    dataSource,
+    hideExpandedColumn,
+    childrenRecordName,
+    rowExpandable
+  } = props;
+  const hasExpandedRowRender = typeof expandedRowRender === 'function';
+  return hideExpandedColumn && hasExpandedRowRender || !hasExpandedRowRender && (0, _some2.default)(dataSource).call(dataSource, record => {
+    const children = (0, _get2.default)(record, childrenRecordName);
+
+    if ((0, _isArray.default)(children) && children.length || rowExpandable(record)) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+}
+/**
+ * merge query
+ * @param {*} query
+ * @param {*} queries
+ */
+
+
+function mergeQueries(query) {
+  let queries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  let _mergedQuery;
+
+  const idx = (0, _findIndex2.default)(queries).call(queries, item => {
+    if (query.dataIndex === item.dataIndex) {
+      _mergedQuery = (0, _assign.default)((0, _assign.default)({}, item), query);
+      return true;
+    }
+
+    return false;
+  });
+
+  if (idx > -1) {
+    (0, _splice.default)(queries).call(queries, idx, 1, _mergedQuery);
+  } else {
+    queries.push(_mergedQuery);
+  }
+
+  return [...queries];
+}
+/**
+ * Replace the width of the newColumns column with the width of the column after resize
+ * @param {Object[]} columns columns retain the column width after resize
+ * @param {Object[]} newColumns
+ */
+
+
+function withResizeWidth(columns, newColumns) {
+  const _newColumns = cloneDeep(newColumns);
+
+  for (const column of columns) {
+    if (!(0, _isNullOrUndefined.default)(column.width)) {
+      const currentColumn = column.key;
+      const columnIndex = (0, _findIndex3.default)(_newColumns, item => item.key === currentColumn);
+
+      if (columnIndex !== -1) {
+        _newColumns[columnIndex].width = (0, _get2.default)(column, 'width');
+      }
+    }
+  }
+
+  return _newColumns;
+}
+/**
+ * Pure function version of the same function in table foundation
+ * This is not accessible in getDerivedStateFromProps, so fork one out
+ */
+
+
+function getAllDisabledRowKeys(_ref) {
+  let {
+    dataSource,
+    getCheckboxProps,
+    childrenRecordName,
+    rowKey
+  } = _ref;
+  const disabledRowKeys = [];
+
+  if ((0, _isArray.default)(dataSource) && dataSource.length && typeof getCheckboxProps === 'function') {
+    for (const record of dataSource) {
+      const props = getCheckboxProps(record);
+      const recordKey = typeof rowKey === 'function' ? rowKey(record) : (0, _get2.default)(record, rowKey);
+
+      if (props && props.disabled) {
+        disabledRowKeys.push(recordKey);
+      }
+
+      const children = (0, _get2.default)(record, childrenRecordName);
+
+      if ((0, _isArray.default)(children) && children.length) {
+        const keys = getAllDisabledRowKeys({
+          dataSource: children,
+          getCheckboxProps
+        });
+        disabledRowKeys.push(...keys);
+      }
+    }
+  }
+
+  return disabledRowKeys;
+}
+
+function warnIfNoDataIndex(column) {
+  if (typeof column === 'object' && column !== null) {
+    const {
+      filters,
+      sorter,
+      dataIndex
+    } = column;
+    const logger = new _Logger.default('[@douyinfe/semi-ui Table]');
+
+    if (((0, _isArray.default)(filters) || (0, _isFunction2.default)(sorter)) && (0, _isNullOrUndefined.default)(dataIndex)) {
+      logger.warn("The column with sorter or filter must pass the 'dataIndex' prop");
+    }
+  }
+}

package/lib/cjs/table/variables.scss

@@ -0,0 +1,84 @@
+// Spacing
+$spacing-table-paddingY: $spacing-base; // 表格单元格垂直内边距
+$spacing-table-paddingX: $spacing-base-tight; // 表格单元格水平内边距
+$spacing-table_middle-paddingY: $spacing-base-tight; // 中尺寸表格单元格垂直内边距
+$spacing-table_small-paddingY: $spacing-tight; // 小尺寸表格单元格垂直内边距
+$spacing-table_th-paddingTop: $spacing-tight; // 表格顶部内边距
+$spacing-table_th-paddingBottom: $spacing-tight; // 表格底部内边距
+$spacing-table_title-paddingY: $spacing-base; // 表格标题垂直内边距
+$spacing-table_title-paddingX: 0; // 表格标题水平内边距
+$spacing-table_footer-padding: $spacing-base; // 表格 footer 内边距
+$spacing-table_expand_row-paddingLeft: 16px; // 表格展开行左侧内边距
+$spacing-table_expand_row-paddingRight: 16px; // 表格展开行右侧内边距
+$spacing-table_expand_row-paddingTop: 16px; // 表格展开行顶部内边距
+$spacing-table_expand_row-paddingBottom: 16px; // 表格展开行底部内边距
+$spacing-table_resizable-offset-y: 4px; // 可拖动拉伸操作垂直偏移量
+$spacing-table_resizable-bottom: 4px; // 可拖动拉伸操作底部距离
+$spacing-table_row_head-paddingY: $spacing-tight; // 表头垂直内边距
+$spacing-table_row_head-paddingX: $spacing-base; // 表头水平内边距
+$spacing-table_react_resizable_handle-right: -1px; // 可拖动拉伸操作向右偏移量
+$spacing-table_tbody_rowCell-padding: $spacing-base; // 表格单元格内边距
+$spacing-table_tbody_rowSelection_rowCell_notSelection-paddingX: 16px; // 可选中的表格单元水平内边距
+$spacing-table_tbody_rowSelection_rowCell_notSelection-paddingY: 10px; // 可选中的表格单元垂直内边距
+$spacing-table_column_sorter-marginLeft: $spacing-extra-tight; // 列排序按钮左侧外边距
+$spacing-table_column_filter-marginLeft: $spacing-extra-tight; // 列过滤器按钮左侧外边距
+$spacing-table_bordered_titler-paddingLeft: $spacing-base; // 列过滤器按钮左侧外边距
+$spacing-table_bordered_titler-paddingRight: $spacing-base; // 列过滤器按钮右侧外边距
+$spacing-table_expand_icon-marginRight: 8px; // 行展开按钮右侧外边距
+$spacing-table_panel_operation-paddingX: $spacing-base;
+$spacing-table_panel_operation-paddingY: $spacing-tight;
+
+// Size
+$width-table_base_border: 1px; // 表格单元格分割线宽度
+$width-table_header_border: 2px; // 表格表头分割线宽度
+$width-table_resizer_border: 2px; // 表格拉伸列标示线宽度
+$radius-table_base: 4px;
+$width-table_column_selection: 48px; // 表格默认列宽
+$width-table_column_sorter-icon: 16px; // 表格排序按钮宽度
+$height-table_column_sorter-icon: 16px; // 表格排序按钮高度
+$width-table_column_filter-icon: 12px; // 表格过滤按钮宽度
+$height-table_column_filter-icon: 12px; // 表格过滤按钮高度
+$width-table_cell_fixed_left_last: 1px; // 表格左上角单元格底部描边宽度
+$width-table_cell_fixed_right_first: 1px; // 表格左上角单元格右侧描边宽度
+$width-table_react_resizable_handle: 9px; // 表格伸缩列调节热区宽度
+$height-table_pagination_outer_min: 60px; // 表格分页器高度
+
+
+// Color no need to change
+$color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
+$color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
+$color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
+$color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
+
+$color-table-border-default: var(--semi-color-border); // 表格描边颜色
+$color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
+$color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
+$color-table_th-bg-default: transparent; // 表头背景色
+$color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
+$color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
+
+$color-table_pl-bg-default: transparent;
+$color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
+$color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
+$color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
+$color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认
+$color-table_expanded_icon-default: var(--semi-color-text-2); // 表格展开行图标颜色 - 默认
+$color-table_expanded-bg-default: transparent; // 表格展开行图标容器背景颜色 - 默认
+$color-table_disabled-bg-default: var(--semi-color-disabled-bg);
+$color-table_filter_on-text-default: var(--semi-color-primary); // 表格过滤按钮颜色 - 激活态
+$color-table_filter-text-default: var(--semi-color-text-2); // 表格过滤按钮颜色 - 默认态
+$color-table_sorter_on-text-default: var(--semi-color-primary); // 表格排序按钮颜色 - 激活态
+$color-table_sorter-text-default: var(--semi-color-text-2); // 表格排序按钮颜色 - 默认态
+$color-table_sorter-text-hover: var(--semi-color-text-2); // 表格排序按钮颜色 - 悬浮态
+$color-table_page-text-default: var(--semi-color-text-2); // 表格翻页器文本颜色
+$color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标示线颜色
+$color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
+
+// Other
+$font-table_base-fontSize: 14px; // 表格默认文本字号
+$border-table_base-borderStyle: solid; // 表格描边样式
+$shadow-table_left: -3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 左侧
+$shadow-table_right: 3px 0 0 0 $color-table_shadow-bg-default; // 表格滚动阴影 - 右侧
+$border-table: #{$width-table_base_border} #{$border-table_base-borderStyle} $color-table-border-default; // 表格默认描边
+$border-table_head-bottom: #{$width-table_header_border} #{$border-table_base-borderStyle} $color-table_th-border-default; // 表头单元格描边 - 底部
+$border-table_resizer: $width-table_resizer_border solid $color-table_resizer-bg-default; // 表格拉伸标识描边