@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProTable/utils.js

@@ -1,19 +1,14 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
-import "antd/es/typography/style";
-import _Typography from "antd/es/typography";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
-import React from 'react';
+import { isValidElement } from 'react';
 import moment from 'moment';
-import { multiply } from 'lodash';
-import { ProForm } from 'zat-design-pro-component';
-import { ReactSVG } from 'react-svg';
-import { CheckOutlined } from '@ant-design/icons';
-import copySvg from '../assets/copy.svg';
-import getEnumLabel from '../ProEnum/getEnumLabel';
-import tipSvg from '../assets/tip.svg';
-var Paragraph = _Typography.Paragraph,
-  Text = _Typography.Text;
+import { isFunction, isString } from 'lodash';
+import { tools } from '@zat-design/utils';
+import getEnumLabel from '../ProEnum/utils/getEnumLabel';
+import TooltipTitle from './components/TooltipTitle';
+import RenderColumn from './components/RenderColumn';
 /**
  * 获取小数点后的位数
  * @param num 数字
@@ -29,28 +24,51 @@ export var formatColumn = function formatColumn(column) {
     _column$format = column.format,
     format = _column$format === void 0 ? 'YYYY-MM-DD HH:mm:ss' : _column$format,
     _column$precision = column.precision,
-    precision = _column$precision === void 0 ? 2 : _column$precision,
+    precision = _column$precision === void 0 ? 0 : _column$precision,
     ellipsis = column.ellipsis,
     code = column.code,
     copyable = column.copyable,
     width = column.width,
     tooltip = column.tooltip,
-    transform = column.transform;
+    transform = column.transform,
+    prefix = column.prefix,
+    suffix = column.suffix;
   if (column === null || column === void 0 ? void 0 : column.render) {
     return;
   }
   if (tooltip) {
-    var _ref = tooltip || {},
-      tooltipTitle = _ref.title,
-      icon = _ref.icon;
-    column.title = /*#__PURE__*/React.createElement("span", {
-      className: "pro-table-tooltip"
-    }, title, /*#__PURE__*/React.createElement(_Tooltip, {
-      title: tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : tooltip
-    }, /*#__PURE__*/React.createElement(ReactSVG, {
-      className: "icon-tip",
-      src: icon || tipSvg
-    })));
+    column.title = _jsx(TooltipTitle, {
+      title: title,
+      tooltip: tooltip
+    });
+  }
+  // 前缀处理
+  var prefixNode = function prefixNode(value, record, index) {
+    if (!prefix) {
+      if (valueType === 'thousandthCNY') {
+        return 'CNY';
+      }
+      return '';
+    }
+    if (isString(prefix) || /*#__PURE__*/isValidElement(prefix)) {
+      return prefix;
+    }
+    if (isFunction(prefix)) {
+      return prefix(value, record, index);
+    }
+  };
+  // 后缀处理
+  var suffixNode = function suffixNode(value, record, index) {
+    if (isString(suffix) || /*#__PURE__*/isValidElement(suffix)) {
+      return suffix;
+    }
+    if (isFunction(suffix)) {
+      return suffix(value, record, index);
+    }
+  };
+  var valueTypePrecision = precision;
+  if (['percentage', 'permillage', 'thousandth', 'thousandthCNY'].includes(valueType)) {
+    valueTypePrecision = precision || 2;
   }
   switch (valueType) {
     case 'percentage':
@@ -59,13 +77,13 @@ export var formatColumn = function formatColumn(column) {
         if (!value && value !== 0) {
           return '-';
         }
-        var renderValue = multiply(Number(value), 100);
+        var renderValue = tools.calc(Number(value), '*', 100);
         // 获取真实数据的小数位数
         var decimalDigits = getDecimalDigits(value);
-        if (decimalDigits > precision) {
+        if (decimalDigits > valueTypePrecision) {
           return renderValue;
         }
-        return renderValue.toFixed(precision);
+        return renderValue.toFixed(valueTypePrecision);
       };
       break;
     case 'permillage':
@@ -74,153 +92,184 @@ export var formatColumn = function formatColumn(column) {
         if (!value && value !== 0) {
           return '-';
         }
-        var renderValue = multiply(Number(value), 1000);
+        var renderValue = tools.calc(Number(value), '*', 1000);
         // 获取真实数据的小数位数
         var decimalDigits = getDecimalDigits(value);
-        if (decimalDigits > precision) {
+        if (decimalDigits > valueTypePrecision) {
           return renderValue;
         }
-        return renderValue.toFixed(precision);
+        return renderValue.toFixed(valueTypePrecision);
       };
       break;
     case 'thousandth':
       // 千分位
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         if (!value && value !== 0) {
           return '-';
         }
-        if (precision) {
-          return "".concat(Number(value).toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        if (valueTypePrecision) {
+          return _jsxs(_Space, {
+            size: 8,
+            children: [prefixNode(value, record, index), "".concat(Number(value).toFixed(valueTypePrecision)).replace(/\B(?=(\d{3})+(?!\d))/g, ','), suffixNode(value, record, index)]
+          });
         }
-        return "".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), "".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ','), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'thousandthCNY':
       // 千分位
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         if (!value && value !== 0) {
           return '-';
         }
-        if (precision) {
-          return "CNY ".concat(Number(value).toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        if (valueTypePrecision) {
+          return _jsxs(_Space, {
+            size: 8,
+            children: [prefixNode(value, record, index), "".concat(Number(value).toFixed(valueTypePrecision), "\n              ").replace(/\B(?=(\d{3})+(?!\d))/g, ','), suffixNode(value, record, index)]
+          });
         }
-        return "CNY ".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), "".concat(prefixNode(value, record, index), " ").concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ','), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'datePicker':
       // 日期
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         var _moment;
-        return value ? (_moment = moment(value)) === null || _moment === void 0 ? void 0 : _moment.format(format) : '-';
+        if (!value) {
+          return '-';
+        }
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), (_moment = moment(value)) === null || _moment === void 0 ? void 0 : _moment.format(format), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'date':
       // 日期：YYYY-MM-DD
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         var _moment2;
-        return value ? (_moment2 = moment(value)) === null || _moment2 === void 0 ? void 0 : _moment2.format('YYYY-MM-DD') : '-';
+        if (!value) {
+          return '-';
+        }
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), (_moment2 = moment(value)) === null || _moment2 === void 0 ? void 0 : _moment2.format('YYYY-MM-DD'), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'dateTime':
       // 日期：YYYY-MM-DD HH:mm:ss
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         var _moment3;
-        return value ? (_moment3 = moment(value)) === null || _moment3 === void 0 ? void 0 : _moment3.format('YYYY-MM-DD HH:mm:ss') : '-';
+        if (!value) {
+          return '-';
+        }
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), (_moment3 = moment(value)) === null || _moment3 === void 0 ? void 0 : _moment3.format('YYYY-MM-DD HH:mm:ss'), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'dateStartTime':
       // 日期：YYYY-MM-DD 00:00:00
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         var _moment4;
-        return value ? "".concat((_moment4 = moment(value)) === null || _moment4 === void 0 ? void 0 : _moment4.format('YYYY-MM-DD'), " 00:00:00") : '-';
+        if (!value) {
+          return '-';
+        }
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), "".concat((_moment4 = moment(value)) === null || _moment4 === void 0 ? void 0 : _moment4.format('YYYY-MM-DD'), " 00:00:00"), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'dateEndTime':
       // 日期：YYYY-MM-DD 23:59:59
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         var _moment5;
-        return value ? "".concat((_moment5 = moment(value)) === null || _moment5 === void 0 ? void 0 : _moment5.format('YYYY-MM-DD'), " 23:59:59") : '-';
+        if (!value) {
+          return '-';
+        }
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), "".concat((_moment5 = moment(value)) === null || _moment5 === void 0 ? void 0 : _moment5.format('YYYY-MM-DD'), " 23:59:59"), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'dateStartEndTime':
       // 日期：YYYY-MM-DD 00:00:00~YYYY-MM-DD 23:59:59
-      column.render = function (value) {
+      column.render = function (value, record, index) {
         var _moment6, _moment7;
-        return Array.isArray(value) ? "".concat((_moment6 = moment(value === null || value === void 0 ? void 0 : value[0])) === null || _moment6 === void 0 ? void 0 : _moment6.format('YYYY-MM-DD'), " 00:00:00~").concat((_moment7 = moment(value === null || value === void 0 ? void 0 : value[1])) === null || _moment7 === void 0 ? void 0 : _moment7.format('YYYY-MM-DD'), " 23:59:59") : '-';
+        if (!Array.isArray(value)) {
+          return '-';
+        }
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), "".concat((_moment6 = moment(value === null || value === void 0 ? void 0 : value[0])) === null || _moment6 === void 0 ? void 0 : _moment6.format('YYYY-MM-DD'), " 00:00:00~").concat((_moment7 = moment(value === null || value === void 0 ? void 0 : value[1])) === null || _moment7 === void 0 ? void 0 : _moment7.format('YYYY-MM-DD'), " 23:59:59"), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'enumName':
       // 枚举-展示name
-      column.render = function (value) {
-        return getEnumLabel(typeof code === 'function' ? code() : code, value);
+      column.render = function (value, record, index) {
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), getEnumLabel(typeof code === 'function' ? code() : code, value), suffixNode(value, record, index)]
+        });
       };
       break;
     case 'enumCodeName':
       // 枚举-展示code-name
-      column.render = function (value) {
-        return getEnumLabel(typeof code === 'function' ? code() : code, value, true);
-      };
-      break;
-    case 'address':
-      column.render = function (value, record) {
-        var _newValue$filter;
-        var newValue = transform ? transform(value, record) : value;
-        if (!newValue || Array.isArray(newValue) && (newValue === null || newValue === void 0 ? void 0 : (_newValue$filter = newValue.filter(function (item) {
-          return !!item;
-        })) === null || _newValue$filter === void 0 ? void 0 : _newValue$filter.length) === 0) {
-          return '-';
-        }
-        return /*#__PURE__*/React.createElement(ProForm.ProAddressBar, {
-          isView: true,
-          enumCode: code,
-          value: newValue
+      column.render = function (value, record, index) {
+        return _jsxs(_Space, {
+          size: 8,
+          children: [prefixNode(value, record, index), getEnumLabel(typeof code === 'function' ? code() : code, value, true), suffixNode(value, record, index)]
         });
       };
       break;
     default:
       if (precision) {
-        column.render = function (value) {
-          return typeof value === 'number' ? value.toFixed(precision) : value;
+        column.render = function (value, record, index) {
+          return _jsxs(_Space, {
+            size: 8,
+            children: [prefixNode(value, record, index), typeof value === 'number' ? value.toFixed(precision) : value, suffixNode(value, record, index)]
+          });
+        };
+      }
+      if (prefix || suffix) {
+        column.render = function (value, record, index) {
+          return value ? _jsxs(_Space, {
+            size: 8,
+            children: [prefixNode(value, record, index), value, suffixNode(value, record, index)]
+          }) : '-';
         };
       }
       break;
   }
-  if (copyable) {
-    column.render = function (value) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "copyable-table-cell"
-      }, /*#__PURE__*/React.createElement(Paragraph, {
-        style: ellipsis ? {
-          width: width
-        } : undefined,
-        ellipsis: ellipsis ? {
-          tooltip: value
-        } : false,
-        copyable: {
-          text: value,
-          icon: [/*#__PURE__*/React.createElement(ReactSVG, {
-            key: "copy-icon",
-            className: "drag-icon",
-            src: copySvg
-          }), /*#__PURE__*/React.createElement(CheckOutlined, {
-            key: "copied-icon"
-          })],
-          tooltips: ['复制', '复制成功']
-        }
-      }, value));
-    };
-  } else if (ellipsis) {
+  if (ellipsis) {
     column.ellipsis = false;
-    column.render = function (value) {
-      return value ? /*#__PURE__*/React.createElement(Text, {
-        style: {
-          width: width
-        },
-        ellipsis: {
-          tooltip: true,
-          onEllipsis: function onEllipsis() {}
-        }
-      }, value) : '-';
+  }
+  if (valueType === 'address' || copyable || ellipsis) {
+    column.render = function (value, record, index) {
+      return _jsxs(_Space, {
+        size: 8,
+        children: [prefixNode(value, record, index), _jsx(RenderColumn, {
+          valueType: valueType,
+          code: code,
+          copyable: copyable,
+          ellipsis: ellipsis,
+          width: width,
+          transform: transform,
+          value: value,
+          record: record
+        }), suffixNode(value, record, index)]
+      });
     };
   }
 };
@@ -236,7 +285,7 @@ export var getColumnDataIndex = function getColumnDataIndex(dataIndex) {
  */
 export var getParentElement = function getParentElement(element, name) {
   var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'className';
-  var result = /*#__PURE__*/React.createElement(React.Fragment, null);
+  var result = _jsx(_Fragment, {});
   if (!element || !name) {
     return result;
   }
@@ -250,4 +299,12 @@ export var getParentElement = function getParentElement(element, name) {
   };
   searchDom(element, name, type = 'className');
   return result;
+};
+/**
+ * 判断数据是否为Response<List<any>>结构
+ * @param data { [key: string]: any } 需要判断数据
+ * @returns boolean 是否
+ */
+export var isListResult = function isListResult(data) {
+  return data.hasOwnProperty('total') && data.hasOwnProperty('list');
 };

package/es/ProTabs/components/Card/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CardProps } from '../../propType';
-declare const Card: (props: CardProps) => React.JSX.Element;
+declare const Card: (props: CardProps) => JSX.Element;
 export default Card;

package/es/ProTabs/components/Card/index.js

@@ -1,24 +1,52 @@
+import "antd/es/tag/style";
+import _Tag from "antd/es/tag";
+import "antd/es/spin/style";
+import _Spin from "antd/es/spin";
 import "antd/es/space/style";
 import _Space from "antd/es/space";
-import React from 'react';
-import { tools } from '@zat-design-pro-component/utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingOutlined } from '@ant-design/icons';
+import { tools } from '@zat-design/utils';
 var Card = function Card(props) {
   var total = props.total,
     label = props.label,
-    icon = props.icon;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pro-tabs-card"
-  }, /*#__PURE__*/React.createElement(_Space, {
-    size: 8,
-    align: "center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pro-tabs-card-left"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pro-tabs-card-left-total"
-  }, tools.formatAmount(total, 0) || 0), /*#__PURE__*/React.createElement("div", {
-    className: "pro-tabs-card-left-label"
-  }, label)), /*#__PURE__*/React.createElement("div", {
-    className: "pro-tabs-card-right"
-  }, icon || '-')));
+    icon = props.icon,
+    mode = props.mode,
+    loading = props.loading;
+  var antIcon = _jsx(LoadingOutlined, {
+    style: {
+      fontSize: 24
+    },
+    spin: true
+  });
+  return _jsx("div", {
+    className: "pro-tabs-card",
+    children: mode === 'card' ? _jsxs(_Space, {
+      size: 8,
+      align: "center",
+      children: [_jsxs("div", {
+        className: "pro-tabs-card-left",
+        children: [_jsx("div", {
+          className: "pro-tabs-card-left-total",
+          children: loading ? _jsx(_Spin, {
+            indicator: antIcon
+          }) : tools.formatAmount(total, 0) || 0
+        }), _jsx("div", {
+          className: "pro-tabs-card-left-label",
+          children: label
+        })]
+      }), _jsx("div", {
+        className: "pro-tabs-card-right",
+        children: icon || '-'
+      })]
+    }) : _jsxs(_Space, {
+      size: 8,
+      align: "center",
+      children: [label, _jsx(_Tag, {
+        color: "#FF5050",
+        children: total >= 100 ? '99+' : total || 0
+      })]
+    })
+  });
 };
 export default Card;

package/es/ProTabs/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ProTabsProps } from './propType';
-declare const _default: React.ForwardRefExoticComponent<Pick<ProTabsProps, keyof ProTabsProps> & React.RefAttributes<unknown>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<ProTabsProps, "ref"> & React.RefAttributes<unknown>>;
 export default _default;

package/es/ProTabs/index.js

@@ -4,9 +4,10 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "className", "dataSource", "onChange", "transformResponse", "useRequest", "tabSearch"];
+var _excluded = ["style", "className", "dataSource", "onChange", "transformResponse", "useRequest", "tabSearch", "mode"];
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
-import React, { useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import { useMemo, useState, forwardRef, useImperativeHandle } from 'react';
 import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
 import classNames from 'classnames';
 import { omit } from 'lodash';
@@ -21,6 +22,8 @@ var ProTabs = function ProTabs(props, ref) {
     useRequest = props.useRequest,
     _props$tabSearch = props.tabSearch,
     tabSearch = _props$tabSearch === void 0 ? false : _props$tabSearch,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'card' : _props$mode,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(dataSource || []),
     _useState2 = _slicedToArray(_useState, 2),
@@ -29,38 +32,45 @@ var ProTabs = function ProTabs(props, ref) {
   var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
     manual: true,
     onSuccess: function onSuccess(data) {
+      var responseData;
       if (transformResponse && typeof transformResponse === 'function') {
         // 转换数据
-        var responseData = transformResponse(data);
-        if (!Array.isArray(responseData) || !responseData.every(function (item) {
-          return typeof item === 'number';
-        })) {
-          return console.error('transformResponse must return a number array, like [1, 2, 3]');
-        }
-        var result = selectList.map(function (item, index) {
-          return _objectSpread(_objectSpread({}, item), {}, {
-            total: responseData[index]
-          });
-        });
-        setSelectList(result);
+        responseData = transformResponse(data);
+      }
+      if (Array.isArray(data)) {
+        responseData = data;
+      }
+      if (!Array.isArray(responseData)) {
+        return console.error('transformResponse must return a number array, like [1, 2, 3]');
       }
+      var result = selectList.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          total: responseData[index] || 0
+        });
+      });
+      setSelectList(result);
     },
-    debounceWait: 300
+    debounceWait: 300,
+    loadingDelay: 1000
   }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
   var _items = useMemo(function () {
     return selectList.map(function (itemProps) {
       var cardItemProps = {
         total: itemProps.total,
         label: itemProps.label,
-        icon: itemProps.icon
+        icon: itemProps.icon,
+        mode: mode
       };
       return _objectSpread(_objectSpread({}, omit(itemProps, ['total', 'label', 'icon'])), {}, {
-        label: /*#__PURE__*/React.createElement(Card, _objectSpread({}, cardItemProps))
+        label: _jsx(Card, _objectSpread({
+          loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading
+        }, cardItemProps))
       });
     });
-  }, [selectList]);
+  }, [selectList, fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading]);
   var cls = classNames(_defineProperty({
-    'pro-tabs': true
+    'pro-tabs': mode === 'card',
+    'pro-tabs-tab': mode !== 'card'
   }, className, className));
   var handleChange = function handleChange(key) {
     var onChange = props.onChange;
@@ -85,14 +95,15 @@ var ProTabs = function ProTabs(props, ref) {
       useRequestRef: fetchFunction
     };
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return _jsx("div", {
     style: style,
-    className: cls
-  }, /*#__PURE__*/React.createElement(_Tabs, _objectSpread(_objectSpread({
-    animated: false
-  }, rest), {}, {
-    items: _items,
-    onChange: handleChange
-  })));
+    className: cls,
+    children: _jsx(_Tabs, _objectSpread(_objectSpread({
+      animated: false
+    }, rest), {}, {
+      items: _items,
+      onChange: handleChange
+    }))
+  });
 };
 export default /*#__PURE__*/forwardRef(ProTabs);

package/es/ProTabs/propType.d.ts

@@ -5,6 +5,8 @@ export interface CardProps {
     total: number;
     label: string | React.ReactNode;
     icon: React.ReactNode;
+    mode?: TabModeEnum;
+    loading?: boolean;
     [key: string]: any;
 }
 export interface ProTabsItemsProps extends CardProps {
@@ -17,11 +19,14 @@ export interface ProTabsAction {
     /** 获取发生请求的 useRequest 的 ref */
     useRequestRef: Result<any, any>;
 }
+export type TabModeEnum = 'card' | 'line';
 export interface ProTabsProps extends Omit<TabsProps, 'items' | 'onChange'> {
     dataSource: ProTabsItemsProps[];
     /** 是否开启tab切换查询 */
     tabSearch?: boolean;
     onChange?: (activeKey: string, useRequest: Result<any, any>) => void;
+    /** card：卡片模式 tab tab模式 */
+    mode?: TabModeEnum;
     /** 远程请求接口 */
     useRequest?: {
         service: Service<any, any>;

package/es/ProTabs/style/index.less

@@ -38,8 +38,6 @@
     border     : 1px solid var(--zaui-line, #dddddd);
     border-left: none;
 
-
-
     .pro-tabs-card-left {
       width      : 104px;
       text-shadow: none;
@@ -65,4 +63,18 @@
       }
     }
   }
-}
+}
+
+.pro-tabs-tab {
+  .pro-tabs-card {
+    .ant-tag {
+      border-radius: 10px;
+      padding      : 0 var(--zaui-space-size-xs, 4px);
+      margin-right : 0;
+    }
+
+    .ant-space-item {
+      display: flex;
+    }
+  }
+}

package/es/ProThemeTools/component/PrdTools/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { DevToolsPropsType } from '../../propsType';
-declare const PrdTools: ({ onReset, onClose, setState, visible, state }: DevToolsPropsType) => React.JSX.Element;
+declare const PrdTools: ({ onReset, onClose, setState, visible, state, tableBorder, tableStripe, }: DevToolsPropsType) => JSX.Element;
 export default PrdTools;