@jetlinks-web/components 2.0.2-2 → 2.0.2-4

package/lib/ProLayout/util.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clearMenuItem = clearMenuItem;
+exports.flatMap = flatMap;
+exports.getMenuFirstChildren = getMenuFirstChildren;
+exports.getSlot = getSlot;
+exports.getSlotVNode = getSlotVNode;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+function clearMenuItem(menusData) {
+  return menusData.map(function (item) {
+    var _finalItem$meta;
+    var finalItem = (0, _objectSpread2.default)({}, item);
+    if ((_finalItem$meta = finalItem.meta) !== null && _finalItem$meta !== void 0 && _finalItem$meta.hideInMenu) {
+      return null;
+    }
+    if (finalItem && finalItem !== null && finalItem !== void 0 && finalItem.children) {
+      var _finalItem$meta2;
+      if (!((_finalItem$meta2 = finalItem.meta) !== null && _finalItem$meta2 !== void 0 && _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
+        var _child$meta;
+        return child && child.name && !((_child$meta = child.meta) !== null && _child$meta !== void 0 && _child$meta.hideInMenu);
+      })) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+          children: clearMenuItem(finalItem.children)
+        });
+      }
+      delete finalItem.children;
+    }
+    return finalItem;
+  }).filter(function (item) {
+    return item;
+  });
+}
+function flatMap(menusData) {
+  return menusData.map(function (item) {
+    var _finalItem$meta3;
+    var finalItem = (0, _objectSpread2.default)({}, item);
+    if (!finalItem.name || (_finalItem$meta3 = finalItem.meta) !== null && _finalItem$meta3 !== void 0 && _finalItem$meta3.hideInMenu) {
+      return null;
+    }
+    if (finalItem.children) {
+      delete finalItem.children;
+    }
+    return finalItem;
+  }).filter(function (item) {
+    return item;
+  });
+}
+function getMenuFirstChildren(menus, key) {
+  return key === undefined ? [] : (menus[menus.findIndex(function (menu) {
+    return menu.path === key;
+  })] || {}).children || [];
+}
+function getSlot(slots, props) {
+  var prop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'default';
+  if (props[prop] === false) {
+    // force not render
+    return false;
+  }
+  return props[prop] || slots[prop];
+}
+function getSlotVNode(slots, props) {
+  var _slots$prop;
+  var prop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'default';
+  if (props[prop] === false) {
+    return false;
+  }
+  return props[prop] || ((_slots$prop = slots[prop]) === null || _slots$prop === void 0 ? void 0 : _slots$prop.call(slots));
+}

package/lib/ProTable/index.js

@@ -0,0 +1,412 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _index = require("../index");
+var _antDesignVue = require("ant-design-vue");
+var _table = require("ant-design-vue/es/table");
+var _proTableTypes = require("./proTableTypes");
+var _lodashEs = require("lodash");
+var tableProps = function tableProps() {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _table.tableProps)()), {}, {
+    loading: {
+      type: Boolean,
+      default: undefined
+    },
+    request: {
+      type: Function,
+      default: undefined
+    },
+    cardBodyClass: {
+      type: String,
+      default: ''
+    },
+    bodyStyle: {
+      type: Object,
+      default: {}
+    },
+    columns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    model: {
+      type: [String, undefined],
+      default: undefined
+    },
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    noPagination: {
+      type: Boolean,
+      default: false
+    },
+    rowSelection: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    dataSource: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    gridColumns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    gridColumn: {
+      type: Number,
+      default: 4
+    },
+    alertRender: {
+      type: Boolean,
+      default: true
+    },
+    params: {
+      type: Object,
+      default: function _default() {}
+    },
+    type: {
+      type: String,
+      default: 'PAGE'
+    },
+    scroll: {
+      type: Object,
+      default: function _default() {
+        x: 1366;
+      }
+    },
+    defaultParams: {
+      type: Object,
+      default: function _default() {}
+    },
+    rowKey: {
+      type: [String, Function],
+      default: 'id'
+    },
+    pagination: {
+      type: Object,
+      default: function _default() {
+        return {
+          showSizeChanger: true,
+          showQuickJumper: false,
+          size: 'size',
+          pageSizeOptions: ['12', '24', '48', '96']
+        };
+      }
+    }
+  });
+};
+var ProTable = (0, _vue.defineComponent)({
+  name: 'ProTable',
+  slots: ['headerTitle', 'card', 'rightExtraRender', 'paginationRender' // 分页
+  ],
+  props: tableProps(),
+  emits: ['update:modelValue', 'modelChange'],
+  setup: function setup(props, _ref) {
+    var _props$pagination;
+    var slots = _ref.slots,
+      expose = _ref.expose,
+      emit = _ref.emit;
+    var _model = (0, _vue.ref)(props.model ? props.model : _proTableTypes.ModelEnum.CARD); // 模式切换
+    var _dataSource = (0, _vue.ref)([]);
+    var pageIndex = (0, _vue.ref)(0);
+    var pageSize = (0, _vue.ref)(12);
+    var total = (0, _vue.ref)(0);
+    var _loading = (0, _vue.ref)(false);
+    var column = (0, _vue.ref)(props.gridColumn || 4);
+    if (!props.noPagination && props.pagination && (0, _lodashEs.isArray)((_props$pagination = props.pagination) === null || _props$pagination === void 0 ? void 0 : _props$pagination.pageSizeOptions)) {
+      pageSize.value = props.pagination.pageSizeOptions[0];
+    }
+    /**
+     * 监听宽度，计算显示卡片个数
+     */
+    var windowChange = function windowChange() {
+      if (window.innerWidth <= 1440) {
+        var _props$gridColumns;
+        var _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2;
+        column.value = (_props$gridColumns = props.gridColumns) !== null && _props$gridColumns !== void 0 && _props$gridColumns[0] ? props.gridColumns[0] : _column;
+      } else if (window.innerWidth > 1440 && window.innerWidth <= 1600) {
+        var _props$gridColumns2;
+        var _column2 = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3;
+        column.value = (_props$gridColumns2 = props.gridColumns) !== null && _props$gridColumns2 !== void 0 && _props$gridColumns2[1] ? props.gridColumns[1] : _column2;
+      } else if (window.innerWidth > 1600) {
+        var _props$gridColumns3;
+        var _column3 = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4;
+        column.value = (_props$gridColumns3 = props.gridColumns) !== null && _props$gridColumns3 !== void 0 && _props$gridColumns3[2] ? props.gridColumns[2] : _column3;
+      }
+    };
+    var handleSearch = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_params) {
+        var _props$defaultParams, resp, _resp$result, _resp$result2, _resp$result3, _resp$result4, _resp$result4$data, _resp$result5, _resp$result6, _resp$result7, _resp$result8;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _loading.value = props.loading !== undefined ? props.loading : true;
+              if (!props.request) {
+                _context.next = 9;
+                break;
+              }
+              console.log(_params);
+              _context.next = 5;
+              return props.request((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+                pageIndex: 0,
+                pageSize: Number(pageSize.value)
+              }, props.defaultParams), _params), {}, {
+                terms: [].concat((0, _toConsumableArray2.default)(((_props$defaultParams = props.defaultParams) === null || _props$defaultParams === void 0 ? void 0 : _props$defaultParams.terms) || []), (0, _toConsumableArray2.default)((_params === null || _params === void 0 ? void 0 : _params.terms) || []))
+              })).catch(function () {
+                _loading.value = props.loading !== undefined ? props.loading : false;
+              });
+            case 5:
+              resp = _context.sent;
+              if (resp.status === 200) {
+                if (props.type === 'PAGE') {
+                  // 判断如果是最后一页且最后一页为空，就跳转到前一页
+                  if (resp !== null && resp !== void 0 && (_resp$result = resp.result) !== null && _resp$result !== void 0 && _resp$result.total && resp !== null && resp !== void 0 && (_resp$result2 = resp.result) !== null && _resp$result2 !== void 0 && _resp$result2.pageSize && resp !== null && resp !== void 0 && (_resp$result3 = resp.result) !== null && _resp$result3 !== void 0 && _resp$result3.pageIndex && (resp === null || resp === void 0 ? void 0 : (_resp$result4 = resp.result) === null || _resp$result4 === void 0 ? void 0 : (_resp$result4$data = _resp$result4.data) === null || _resp$result4$data === void 0 ? void 0 : _resp$result4$data.length) === 0) {
+                    pageIndex.value = pageIndex.value > 0 ? pageIndex.value - 1 : 0;
+                    handleSearch((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _params), {}, {
+                      pageSize: pageSize.value,
+                      pageIndex: pageIndex.value
+                    }));
+                  } else {
+                    _dataSource.value = (resp === null || resp === void 0 ? void 0 : (_resp$result5 = resp.result) === null || _resp$result5 === void 0 ? void 0 : _resp$result5.data) || [];
+                    pageIndex.value = (resp === null || resp === void 0 ? void 0 : (_resp$result6 = resp.result) === null || _resp$result6 === void 0 ? void 0 : _resp$result6.pageIndex) || 0;
+                    pageSize.value = (resp === null || resp === void 0 ? void 0 : (_resp$result7 = resp.result) === null || _resp$result7 === void 0 ? void 0 : _resp$result7.pageSize) || 12;
+                    total.value = (resp === null || resp === void 0 ? void 0 : (_resp$result8 = resp.result) === null || _resp$result8 === void 0 ? void 0 : _resp$result8.total) || 0;
+                  }
+                } else {
+                  _dataSource.value = (resp === null || resp === void 0 ? void 0 : resp.result) || [];
+                }
+              } else {
+                _dataSource.value = [];
+              }
+              _context.next = 10;
+              break;
+            case 9:
+              _dataSource.value = (props === null || props === void 0 ? void 0 : props.dataSource) || [];
+            case 10:
+              _loading.value = props.loading !== undefined ? props.loading : false;
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function handleSearch(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var _debounceFn = (0, _lodashEs.debounce)(handleSearch, 300);
+    (0, _vue.watch)(function () {
+      return props.params;
+    }, function (newValue) {
+      _debounceFn(newValue || {});
+    }, {
+      deep: true,
+      immediate: true
+    });
+    (0, _vue.watch)(function () {
+      return props.dataSource;
+    }, function (newVal) {
+      if (newVal && !props.request) {
+        handleSearch(props.params);
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    (0, _vue.watch)(function () {
+      return props.modelValue;
+    }, function () {
+      if (props.modelValue) {
+        _model.value = props.modelValue;
+      }
+    }, {
+      immediate: true
+    });
+    /**
+     * 刷新数据
+     * @param _params
+     */
+    var reload = function reload(_params) {
+      handleSearch((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.params), _params), {}, {
+        pageSize: pageSize.value || 12,
+        pageIndex: pageIndex.value || 0
+      }));
+    };
+    (0, _vue.onMounted)(function () {
+      windowChange(); // 初始化
+      window.onresize = function () {
+        windowChange();
+      };
+    });
+    (0, _vue.onUnmounted)(function () {
+      window.onresize = null;
+    });
+    /**
+     * 导出方法
+     */
+    expose({
+      reload: reload,
+      _dataSource: _dataSource
+    });
+    return function () {
+      var _props$rowSelection, _props$rowSelection$s, _props$rowSelection2, _props$rowSelection2$;
+      return (0, _vue.createVNode)("div", {
+        "class": "jtable-body-spin",
+        "style": (0, _objectSpread2.default)({}, props.bodyStyle)
+      }, [(0, _vue.createVNode)(_antDesignVue.Spin, {
+        "spinning": _loading.value
+      }, {
+        default: function _default() {
+          return [(0, _vue.createVNode)("div", {
+            "class": 'jtable-body'
+          }, [(0, _vue.createVNode)("div", {
+            "class": 'jtable-body-header'
+          }, [(0, _vue.createVNode)("div", {
+            "class": 'jtable-body-header-left'
+          }, [slots.headerTitle && slots.headerTitle()]), (0, _vue.createVNode)("div", {
+            "class": 'jtable-body-header-right'
+          }, [slots.rightExtraRender && slots.rightExtraRender(), !props.model && (0, _vue.createVNode)("div", {
+            "class": 'jtable-body-header-right-button'
+          }, [(0, _vue.createVNode)(_antDesignVue.RadioGroup, {
+            "class": "jtable-body-header-right-button",
+            "value": _model.value,
+            "onChange": function onChange(e) {
+              _model.value = e.target.value;
+              emit('update:modelValue', e.target.value);
+              emit('modelChange', e.target.value);
+            }
+          }, {
+            default: function _default() {
+              return [(0, _vue.createVNode)(_antDesignVue.RadioButton, {
+                "value": _proTableTypes.ModelEnum.TABLE
+              }, {
+                default: function _default() {
+                  return [(0, _vue.createVNode)(_index.AIcon, {
+                    "class": 'right-button-icon',
+                    "type": "UnorderedListOutlined"
+                  }, null)];
+                }
+              }), (0, _vue.createVNode)(_antDesignVue.RadioButton, {
+                "value": _proTableTypes.ModelEnum.CARD
+              }, {
+                default: function _default() {
+                  return [(0, _vue.createVNode)(_index.AIcon, {
+                    "class": 'right-button-icon',
+                    "type": "AppstoreOutlined"
+                  }, null)];
+                }
+              })];
+            }
+          })])])]), (0, _vue.createVNode)("div", {
+            "class": 'jtable-content'
+          }, [props.alertRender && props !== null && props !== void 0 && props.rowSelection && props !== null && props !== void 0 && (_props$rowSelection = props.rowSelection) !== null && _props$rowSelection !== void 0 && _props$rowSelection.selectedRowKeys && (_props$rowSelection$s = props.rowSelection.selectedRowKeys) !== null && _props$rowSelection$s !== void 0 && _props$rowSelection$s.length ? (0, _vue.createVNode)("div", {
+            "class": 'jtable-alert'
+          }, [(0, _vue.createVNode)(_antDesignVue.Alert, {
+            "message": '已选择' + (props === null || props === void 0 ? void 0 : (_props$rowSelection2 = props.rowSelection) === null || _props$rowSelection2 === void 0 ? void 0 : (_props$rowSelection2$ = _props$rowSelection2.selectedRowKeys) === null || _props$rowSelection2$ === void 0 ? void 0 : _props$rowSelection2$.length) + '项',
+            "type": "info",
+            "onClose": function onClose() {
+              var _props$rowSelection3, _props$rowSelection3$, _props$rowSelection4, _props$rowSelection4$;
+              // if (props.rowSelection?.onSelectNone) {
+              //     // 取消选择清空被选数据
+              // }
+              (_props$rowSelection3 = props.rowSelection) === null || _props$rowSelection3 === void 0 ? void 0 : (_props$rowSelection3$ = _props$rowSelection3.onChange) === null || _props$rowSelection3$ === void 0 ? void 0 : _props$rowSelection3$.call(_props$rowSelection3, [], []);
+              (_props$rowSelection4 = props.rowSelection) === null || _props$rowSelection4 === void 0 ? void 0 : (_props$rowSelection4$ = _props$rowSelection4.onSelectNone) === null || _props$rowSelection4$ === void 0 ? void 0 : _props$rowSelection4$.call(_props$rowSelection4);
+            },
+            "closeText": (0, _vue.createVNode)(_antDesignVue.Button, {
+              "type": "link"
+            }, {
+              default: function _default() {
+                return [(0, _vue.createTextVNode)("\u53D6\u6D88\u9009\u62E9")];
+              }
+            })
+          }, null)]) : null, _model.value === _proTableTypes.ModelEnum.CARD ? (0, _vue.createVNode)("div", {
+            "class": 'jtable-card',
+            "style": props.scroll && props.scroll.y ? {
+              maxHeight: props.scroll.y + 'px',
+              overflow: 'auto'
+            } : undefined
+          }, [_dataSource.value.length ? (0, _vue.createVNode)("div", {
+            "class": 'jtable-card-items',
+            "style": {
+              gridTemplateColumns: "repeat(".concat(column.value, ", 1fr)")
+            }
+          }, [_dataSource.value.map(function (item) {
+            return slots.card ? (0, _vue.createVNode)("div", {
+              "class": ['jtable-card-item', props.cardBodyClass]
+            }, [slots.card(item)]) : null;
+          })]) : (0, _vue.createVNode)("div", {
+            "class": "j-table-empty"
+          }, [(0, _vue.createVNode)(_index.Empty, null, null)])]) : (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)(_antDesignVue.Table, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+            "dataSource": _dataSource.value,
+            "columns": props.columns.filter(function (i) {
+              return !(i !== null && i !== void 0 && i.hideInTable);
+            }),
+            "pagination": false,
+            "rowSelection": props.rowSelection,
+            "scroll": props.scroll
+          }), {
+            headerCell: function headerCell(dt) {
+              var column = dt.column,
+                title = dt.title;
+              if (column !== null && column !== void 0 && column.headerCell) {
+                return slots === null || slots === void 0 ? void 0 : slots[column === null || column === void 0 ? void 0 : column.headerCell](column.title);
+              } else {
+                return title || '';
+              }
+            },
+            bodyCell: function bodyCell(dt) {
+              var column = dt.column,
+                record = dt.record;
+              if ((column !== null && column !== void 0 && column.key || column !== null && column !== void 0 && column.dataIndex) && column !== null && column !== void 0 && column.scopedSlots && (slots !== null && slots !== void 0 && slots[column === null || column === void 0 ? void 0 : column.dataIndex] || slots !== null && slots !== void 0 && slots[column === null || column === void 0 ? void 0 : column.key])) {
+                var _key = (column === null || column === void 0 ? void 0 : column.key) || (column === null || column === void 0 ? void 0 : column.dataIndex);
+                return slots === null || slots === void 0 ? void 0 : slots[_key](record);
+              } else {
+                var _value = (0, _lodashEs.get)(record, column === null || column === void 0 ? void 0 : column.dataIndex);
+                // 获取数据
+                return _value;
+              }
+            },
+            emptyText: function emptyText() {
+              return (0, _vue.createVNode)(_index.Empty, null, null);
+            }
+          })])]), !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE' && (0, _vue.createVNode)("div", {
+            "class": 'jtable-pagination'
+          }, [slots !== null && slots !== void 0 && slots.paginationRender ? slots.paginationRender() : (0, _vue.createVNode)(_antDesignVue.Pagination, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.pagination), {}, {
+            "total": total.value,
+            "current": pageIndex.value + 1,
+            "pageSize": pageSize.value,
+            "showTotal": function showTotal(num) {
+              var minSize = pageIndex.value * pageSize.value + 1;
+              var MaxSize = (pageIndex.value + 1) * pageSize.value;
+              return "\u7B2C ".concat(minSize, " - ").concat(MaxSize > num ? num : MaxSize, " \u6761/\u603B\u5171 ").concat(num, " \u6761");
+            },
+            "onChange": function onChange(page, size) {
+              handleSearch((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.params), {}, {
+                pageSize: size,
+                pageIndex: pageSize.value === size ? page ? page - 1 : 0 : 0
+              }));
+            }
+          }), null)])])];
+        }
+      })]);
+    };
+  }
+});
+var _default2 = exports.default = ProTable;

package/lib/ProTable/proTableTypes.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeEnum = exports.ModelEnum = void 0;
+require("vue");
+var TypeEnum;
+(function (TypeEnum) {
+  TypeEnum["TREE"] = "TREE";
+  TypeEnum["PAGE"] = "PAGE";
+})(TypeEnum || (exports.TypeEnum = TypeEnum = {}));
+var ModelEnum;
+(function (ModelEnum) {
+  ModelEnum["TABLE"] = "TABLE";
+  ModelEnum["CARD"] = "CARD";
+})(ModelEnum || (exports.ModelEnum = ModelEnum = {}));

package/lib/ProTable/style/index.css

@@ -0,0 +1,65 @@
+.jtable-body-spin {
+  min-height: 100%;
+  width: 100%;
+  padding: 16px 24px 24px;
+  background-color: #fff;
+}
+.jtable-body-spin .ant-spin-nested-loading {
+  height: 100%;
+}
+.jtable-body-spin .ant-spin-nested-loading .ant-spin-container {
+  height: 100%;
+}
+.jtable-body-spin .jtable-body {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.jtable-body-spin .jtable-body .jtable-body-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .right-button-icon {
+  font-size: 16px;
+  color: #d9d9d9;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper {
+  padding: 0 8px;
+}
+.jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper-checked .right-button-icon {
+  color: #315EFB;
+}
+.jtable-body-spin .jtable-body .jtable-content {
+  flex: 1;
+  padding: 16px 0;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-alert {
+  margin-bottom: 16px;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-card .jtable-card-items {
+  display: grid;
+  grid-gap: 26px;
+}
+.jtable-body-spin .jtable-body .jtable-content .jtable-card .jtable-card-items .jtable-card-item {
+  display: flex;
+  min-width: 0;
+}
+.jtable-body-spin .jtable-body .jtable-pagination {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.jtable-body-spin .jtable-body .j-table-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10% 0;
+}

package/lib/ProTable/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/ProTable/style/index.less

@@ -0,0 +1,92 @@
+@import '../../style/variable.less';
+//@import 'ant-design-vue/es/style/themes/variable.less';
+
+.jtable-body-spin {
+    min-height: 100%;
+    width: 100%;
+    padding: 16px 24px 24px;
+    background-color: #fff;
+
+    .ant-spin-nested-loading {
+        height: 100%;
+        .ant-spin-container {
+            height: 100%;
+        }
+    }
+
+    .jtable-body {
+        width: 100%;
+        box-sizing: border-box;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .jtable-body-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .jtable-body-header-right {
+                display: flex;
+                gap: 8px;
+                align-items: center;
+
+                .jtable-body-header-right-button {
+                    .right-button-icon {
+                        font-size: 16px;
+                        color: #d9d9d9;
+                    }
+
+                    .ant-radio-button-wrapper {
+                        padding: 0 8px;
+                    }
+
+                    .ant-radio-button-wrapper-checked {
+                        .right-button-icon {
+                            color: @primary-color;
+                        }
+                    }
+                }
+            }
+        }
+
+        .jtable-content {
+            flex: 1;
+            padding: 16px 0;
+
+            .jtable-alert {
+                margin-bottom: 16px;
+            }
+
+            .jtable-card {
+                .jtable-card-items {
+                    display: grid;
+                    grid-gap: 26px;
+
+                    .jtable-card-item {
+                        display: flex;
+                        min-width: 0;
+                    }
+                }
+            }
+        }
+
+        .jtable-pagination {
+            // position: absolute;
+            // background-color: white;
+            // padding: 10px 0;
+            // right: 0;
+            // bottom: 0;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .j-table-empty {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 10% 0;
+        }
+    }
+}