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

package/lib/ProTable/components/TableResizable/index.js

@@ -15,6 +15,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _index = require("../../index");
 var _utils = require("../../utils");
 var _excluded = ["onDrag", "width", "minwidth"];
+/*
+ * @Author: chongyang wanchongyang@zhongan.io
+ * @Date: 2023-02-23 17:47:46
+ * @LastEditors: chongyang wanchongyang@zhongan.io
+ * @LastEditTime: 2023-03-07 20:18:22
+ * @FilePath: /za-material-warehouse/src/ProTable/TableResizable.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 var ResizableTitle = function ResizableTitle(props) {
   var _restProps$className;
   var onDrag = props.onDrag,

package/lib/ProTable/index.d.ts

@@ -5,7 +5,7 @@ export declare const defaultPage: {
     pageNum: number;
     pageSize: number;
 };
-declare function ProTable(props: ProTableProps): JSX.Element;
+declare function ProTable(props: ProTableProps): React.JSX.Element;
 declare namespace ProTable {
     var defaultProps: {
         quickConfig: boolean;

package/lib/ProTable/index.js

@@ -20,7 +20,7 @@ var _reactSvg = require("react-svg");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _zatDesignProComponent = require("zat-design-pro-component");
 var _utils = require("@zat-design-pro-component/utils");
-var _utils2 = require("@/ProUtils/utils");
+var _utils2 = require("../ProUtils/utils");
 var _components = require("./components");
 var _useAntdTable = _interopRequireDefault(require("./useAntdTable"));
 var _empty = _interopRequireDefault(require("../assets/empty.png"));

package/lib/ProTable/propsType.d.ts

@@ -11,7 +11,7 @@ interface SummaryColumnProps {
     precision?: number;
     prefix?: ReactNode | string;
 }
-export interface SummaryProps {
+export interface ProTableSummaryProps {
     columns: SummaryColumnProps[];
     total?: boolean;
     fixed?: boolean;
@@ -28,7 +28,7 @@ export type ProTableProps = TableProps<any> & {
     sortColumnText?: string;
     storage?: 'localStorage' | 'sessionStorage';
     footerRender?: () => ReactNode;
-    summary?: SummaryProps | TableProps<any>['summary'];
+    summary?: ProTableSummaryProps | TableProps<any>['summary'];
     /**
      * 斑马纹设置
      */
@@ -68,6 +68,7 @@ export interface RequestOptions<T, R> {
     rowSelections?: boolean;
     extraParams?: Partial<T>;
     page?: PaginationProps;
+    crossPageSelect?: boolean;
     onPageChange?: (page: PaginationProps) => void;
     transformParams?: (params: any) => any;
     transformResponse?: (data: any) => R[];

package/lib/ProTable/style/index.less

@@ -129,9 +129,10 @@
     height: 80px;
   }
 
-  .ant-table-thead>tr>th {
+  .ant-table .ant-table-thead>tr>th {
     border-bottom: 0;
     white-space  : nowrap;
+    background   : var(--zaui-table-header-bg, #f2f3f5);
 
     .pro-table-th-cell {
       width        : 100%;
@@ -178,22 +179,6 @@
     border-bottom: 0;
   }
 
-  .ant-table-tbody tr:nth-child(n)>td {
-    background-color: var(--zaui-base-bg, #ffffff);
-  }
-
-  .ant-table-tbody tr:nth-child(2n)>td {
-    background-color: #F7F9FC;
-  }
-
-  .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(n)>td {
-    background-color: #F7F9FC;
-  }
-
-  .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(2n)>td {
-    background-color: var(--zaui-base-bg, #ffffff);
-  }
-
   .react-resizable {
     position       : relative;
     background-clip: padding-box;
@@ -262,6 +247,16 @@
       margin: -50px 0 var(--zaui-space-size-md, 16px) 0;
     }
   }
+
+  .ant-table-summary {
+    background-color: var(--zaui-table-header-bg, #f2f3f5);
+
+    .ant-table-cell {
+      font-weight     : 500;
+      background-color: var(--zaui-table-header-bg, #f2f3f5);
+      border          : none;
+    }
+  }
 }
 
 .setting-overlay {

package/lib/ProTable/useAntdTable.d.ts

@@ -7,8 +7,8 @@ declare function useAntdTable<I, R extends Record<string, any>, S extends Servic
     rowSelection: {
         type: import("antd/lib/table/interface").RowSelectionType;
         selectedRowKeys: Key[];
-        onChange(selectedRowKeys: Key[], rows: any[]): void;
-        onSelectAll: (selected: boolean, selectedRows: R[]) => void;
+        onChange(rowKeys: Key[], rows: any[]): void;
+        onSelectAll: (selected: boolean) => void;
         getCheckboxProps: () => {
             className: string;
         };
@@ -47,8 +47,8 @@ declare function useAntdTable<I, R extends Record<string, any>, S extends Servic
         rowSelection: {
             type: import("antd/lib/table/interface").RowSelectionType;
             selectedRowKeys: Key[];
-            onChange(selectedRowKeys: Key[], rows: any[]): void;
-            onSelectAll: (selected: boolean, selectedRows: R[]) => void;
+            onChange(rowKeys: Key[], rows: any[]): void;
+            onSelectAll: (selected: boolean) => void;
             getCheckboxProps: () => {
                 className: string;
             };

package/lib/ProTable/useAntdTable.js

@@ -13,7 +13,6 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _ahooks = require("ahooks");
-var _lodash = require("lodash");
 var _index = require("./index");
 var _excluded = ["page", "filters", "sorter"];
 var useDefaultOptions = function useDefaultOptions(options) {
@@ -54,6 +53,8 @@ function useAntdTable(service, options, useRequestOptions) {
     rowSelections = _useDefaultOptions.rowSelections,
     _useDefaultOptions$is = _useDefaultOptions.isResetQuery,
     isResetQuery = _useDefaultOptions$is === void 0 ? false : _useDefaultOptions$is,
+    _useDefaultOptions$cr = _useDefaultOptions.crossPageSelect,
+    crossPageSelect = _useDefaultOptions$cr === void 0 ? false : _useDefaultOptions$cr,
     onPageChange = _useDefaultOptions.onPageChange,
     transformParams = _useDefaultOptions.transformParams,
     transformResponse = _useDefaultOptions.transformResponse;
@@ -95,22 +96,19 @@ function useAntdTable(service, options, useRequestOptions) {
     data = _result$data === void 0 ? {} : _result$data,
     run = result.run,
     refresh = result.refresh;
-  var _ref2 = data || {},
+  var _ref2 = transformResponse ? transformResponse(data) : data || {},
     _ref2$data = _ref2.data,
     dataSource = _ref2$data === void 0 ? {} : _ref2$data;
   var _ref3 = dataSource || {},
     _ref3$list = _ref3.list,
-    list = _ref3$list === void 0 ? [] : _ref3$list,
+    newList = _ref3$list === void 0 ? [] : _ref3$list,
     _ref3$total = _ref3.total,
     total = _ref3$total === void 0 ? 0 : _ref3$total;
-  var newList = transformResponse ? transformResponse(dataSource) : list;
   var curService = (0, _react.useMemo)(function () {
     return service.toString();
   }, [service]);
   // service变化时触发 (禁止掉防止service变更时导致的死循环)
   // const prevService = usePrevious(curService);
-  // extraParams变化时触发
-  var prevExtraParams = (0, _ahooks.usePrevious)(extraParams);
   var clearSelected = (0, _react.useCallback)(function () {
     setState({
       allSelected: false,
@@ -118,13 +116,7 @@ function useAntdTable(service, options, useRequestOptions) {
       selectedRowKeys: []
     });
   }, []);
-  // 分页变更
-  var handlePageChange = (0, _react.useCallback)(function (current, pageSize) {
-    var page = {
-      pageNum: current,
-      pageSize: pageSize
-    };
-    onPageChange(page);
+  (0, _react.useEffect)(function () {
     if (allSelected) {
       var filterList = newList.filter(function (item) {
         return !selectedRowKeys.includes(item === null || item === void 0 ? void 0 : item[rowKey]);
@@ -135,7 +127,16 @@ function useAntdTable(service, options, useRequestOptions) {
           return item === null || item === void 0 ? void 0 : item[rowKey];
         })))
       });
-    } else {
+    }
+  }, [allSelected, newList]);
+  // 分页变更
+  var handlePageChange = (0, _react.useCallback)(function (current, pageSize) {
+    var page = {
+      pageNum: current,
+      pageSize: pageSize
+    };
+    onPageChange(page);
+    if (!rowSelections && !crossPageSelect) {
       setState({
         selectedRecords: [],
         selectedRowKeys: []
@@ -207,9 +208,12 @@ function useAntdTable(service, options, useRequestOptions) {
       pageSize: page.pageSize
     };
     resetParams(newPage);
-    isResetQuery && run(getTransformParams({
-      page: newPage
-    }));
+    if (isResetQuery) {
+      onPageChange(newPage);
+      run(getTransformParams({
+        page: newPage
+      }));
+    }
   }, [page.pageSize, run, resetParams, getTransformParams]);
   var handleRefresh = function handleRefresh() {
     setState({
@@ -223,40 +227,56 @@ function useAntdTable(service, options, useRequestOptions) {
     if (!manual && curService) {
       // service改变时重新请求
       resetParams();
+      onPageChange(initPage);
       run(getTransformParams());
     }
   }, [curService]);
-  (0, _react.useEffect)(function () {
-    if (!manual && prevExtraParams && !(0, _lodash.isEqual)(prevExtraParams, extraParams)) {
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!manual && extraParams) {
       var newPage = {
         pageNum: 1,
         pageSize: page.pageSize
       };
+      onPageChange(newPage);
       resetParams(newPage);
       run(getTransformParams({
         page: newPage
       }));
     }
-  }, [manual, prevExtraParams, extraParams, run, resetParams, getTransformParams]);
+  }, [extraParams]);
   var rowSelection = {
     type: rowSelectType,
     selectedRowKeys: selectedRowKeys,
-    onChange: function onChange(selectedRowKeys, rows) {
-      setState({
-        selectedRecords: rows,
-        selectedRowKeys: selectedRowKeys
-      });
-    },
-    onSelectAll: function onSelectAll(selected, selectedRows) {
-      if (selected) {
+    onChange: function onChange(rowKeys, rows) {
+      if (crossPageSelect) {
+        var _newList$map, _Array$from, _ref4;
+        var removeKeys = newList === null || newList === void 0 ? void 0 : (_newList$map = newList.map(function (item) {
+          return item === null || item === void 0 ? void 0 : item[rowKey];
+        })) === null || _newList$map === void 0 ? void 0 : _newList$map.filter(function (key) {
+          return !rowKeys.includes(key);
+        });
+        var newSelectedKeys = (_Array$from = Array.from(new Set([].concat((0, _toConsumableArray2.default)(selectedRowKeys), (0, _toConsumableArray2.default)(rowKeys))))) === null || _Array$from === void 0 ? void 0 : _Array$from.filter(function (item) {
+          return !removeKeys.includes(item);
+        });
+        var selectedRecordObj = (_ref4 = [].concat((0, _toConsumableArray2.default)(selectedRecords), (0, _toConsumableArray2.default)(rows))) === null || _ref4 === void 0 ? void 0 : _ref4.reduce(function (acc, cur) {
+          acc[cur === null || cur === void 0 ? void 0 : cur[rowKey]] = cur;
+          return acc;
+        }, {});
         setState({
-          allSelected: true,
-          selectedRecords: selectedRows,
-          selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
-            return item === null || item === void 0 ? void 0 : item.productId;
-          })
+          selectedRecords: newSelectedKeys === null || newSelectedKeys === void 0 ? void 0 : newSelectedKeys.map(function (item) {
+            return selectedRecordObj === null || selectedRecordObj === void 0 ? void 0 : selectedRecordObj[item];
+          }),
+          selectedRowKeys: newSelectedKeys
         });
       } else {
+        setState({
+          selectedRecords: rows,
+          selectedRowKeys: rowKeys
+        });
+      }
+    },
+    onSelectAll: function onSelectAll(selected) {
+      if (rowSelections && allSelected && !selected) {
         setState({
           allSelected: false,
           selectedRecords: [],

package/lib/ProTable/utils.js

@@ -19,13 +19,22 @@ var _tip = _interopRequireDefault(require("../assets/tip.svg"));
 
 var Paragraph = _antd.Typography.Paragraph,
   Text = _antd.Typography.Text;
+/**
+ * 获取小数点后的位数
+ * @param num 数字
+ * @returns 位数
+ */
+var getDecimalDigits = function getDecimalDigits(num) {
+  var match = num.toString().match(/\.(\d+)/);
+  return match ? match[1].length : 0;
+};
 var formatColumn = function formatColumn(column) {
   var title = column.title,
     valueType = column.valueType,
     _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 ? 0 : _column$precision,
+    precision = _column$precision === void 0 ? 2 : _column$precision,
     ellipsis = column.ellipsis,
     code = column.code,
     copyable = column.copyable,
@@ -55,7 +64,12 @@ var formatColumn = function formatColumn(column) {
         if (!value && value !== 0) {
           return '-';
         }
-        var renderValue = (0, _lodash.multiply)(value, 100);
+        var renderValue = (0, _lodash.multiply)(Number(value), 100);
+        // 获取真实数据的小数位数
+        var decimalDigits = getDecimalDigits(value);
+        if (decimalDigits > precision) {
+          return renderValue;
+        }
         return renderValue.toFixed(precision);
       };
       break;
@@ -65,7 +79,12 @@ var formatColumn = function formatColumn(column) {
         if (!value && value !== 0) {
           return '-';
         }
-        var renderValue = (0, _lodash.multiply)(value, 1000);
+        var renderValue = (0, _lodash.multiply)(Number(value), 1000);
+        // 获取真实数据的小数位数
+        var decimalDigits = getDecimalDigits(value);
+        if (decimalDigits > precision) {
+          return renderValue;
+        }
         return renderValue.toFixed(precision);
       };
       break;
@@ -76,7 +95,7 @@ var formatColumn = function formatColumn(column) {
           return '-';
         }
         if (precision) {
-          return "".concat(value.toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+          return "".concat(Number(value).toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         }
         return "".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       };
@@ -88,7 +107,7 @@ var formatColumn = function formatColumn(column) {
           return '-';
         }
         if (precision) {
-          return "CNY ".concat(value.toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+          return "CNY ".concat(Number(value).toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         }
         return "CNY ".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       };

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _utils = require("@zat-design-pro-component/utils");
+var Card = function Card(props) {
+  var total = props.total,
+    label = props.label,
+    icon = props.icon;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-tabs-card"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: 8,
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-tabs-card-left"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-tabs-card-left-total"
+  }, _utils.tools.formatAmount(total, 0) || 0), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-tabs-card-left-label"
+  }, label)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-tabs-card-right"
+  }, icon || '-')));
+};
+var _default = Card;
+exports.default = _default;

package/lib/ProTabs/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card';

package/lib/ProTabs/components/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card.default;
+  }
+});
+var _Card = _interopRequireDefault(require("./Card"));

package/lib/ProTabs/index.d.ts

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

package/lib/ProTabs/index.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _components = require("./components");
+var _excluded = ["style", "className", "dataSource", "onChange", "transformResponse", "useRequest", "tabSearch"];
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+var ProTabs = function ProTabs(props, ref) {
+  var style = props.style,
+    className = props.className,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    onChange = props.onChange,
+    transformResponse = props.transformResponse,
+    useRequest = props.useRequest,
+    _props$tabSearch = props.tabSearch,
+    tabSearch = _props$tabSearch === void 0 ? false : _props$tabSearch,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useState = (0, _react.useState)(dataSource || []),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectList = _useState2[0],
+    setSelectList = _useState2[1];
+  var fetchFunction = (0, _ahooks.useRequest)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, (0, _objectSpread2.default)({
+    manual: true,
+    onSuccess: function onSuccess(data) {
+      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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+            total: responseData[index]
+          });
+        });
+        setSelectList(result);
+      }
+    },
+    debounceWait: 300
+  }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
+  var _items = (0, _react.useMemo)(function () {
+    return selectList.map(function (itemProps) {
+      var cardItemProps = {
+        total: itemProps.total,
+        label: itemProps.label,
+        icon: itemProps.icon
+      };
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodash.omit)(itemProps, ['total', 'label', 'icon'])), {}, {
+        label: /*#__PURE__*/_react.default.createElement(_components.Card, (0, _objectSpread2.default)({}, cardItemProps))
+      });
+    });
+  }, [selectList]);
+  var cls = (0, _classnames.default)((0, _defineProperty2.default)({
+    'pro-tabs': true
+  }, className, className));
+  var handleChange = function handleChange(key) {
+    var onChange = props.onChange;
+    // 开启tab切换查询
+    if (tabSearch) {
+      fetchFunction.refresh();
+    }
+    onChange && onChange(key, fetchFunction);
+  };
+  // manual为false时，自动执行
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    var _ref = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
+      defaultParams = _ref.defaultParams,
+      manual = _ref.manual;
+    if (manual || !useRequest) {
+      return;
+    }
+    fetchFunction.run(defaultParams);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      useRequestRef: fetchFunction
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    className: cls
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tabs, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    animated: false
+  }, rest), {}, {
+    items: _items,
+    onChange: handleChange
+  })));
+};
+var _default = /*#__PURE__*/(0, _react.forwardRef)(ProTabs);
+exports.default = _default;

package/lib/ProTabs/propType.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { TabsProps } from 'antd';
+import { Service, Options, Result } from 'ahooks/lib/useRequest/src/types';
+export interface CardProps {
+    total: number;
+    label: string | React.ReactNode;
+    icon: React.ReactNode;
+    [key: string]: any;
+}
+export interface ProTabsItemsProps extends CardProps {
+    key: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export interface ProTabsAction {
+    /** 获取发生请求的 useRequest 的 ref */
+    useRequestRef: Result<any, any>;
+}
+export interface ProTabsProps extends Omit<TabsProps, 'items' | 'onChange'> {
+    dataSource: ProTabsItemsProps[];
+    /** 是否开启tab切换查询 */
+    tabSearch?: boolean;
+    onChange?: (activeKey: string, useRequest: Result<any, any>) => void;
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+    [key: string]: any;
+}

package/lib/ProTabs/propType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ProTabs/style/index.less

@@ -0,0 +1,68 @@
+.pro-tabs {
+  .ant-tabs .ant-tabs-nav-list .ant-tabs-tab {
+    padding: 0;
+  }
+
+  .ant-tabs-top>.ant-tabs-nav::before,
+  .ant-tabs-bottom>.ant-tabs-nav::before,
+  .ant-tabs-top>div>.ant-tabs-nav::before,
+  .ant-tabs-bottom>div>.ant-tabs-nav::before {
+    border: none;
+  }
+
+
+  .ant-tabs-nav-list {
+    .ant-tabs-tab {
+      &:first-child {
+        .pro-tabs-card {
+          border-left: 1px solid var(--zaui-line, #dddddd);
+        }
+      }
+    }
+  }
+
+  .ant-tabs-tab-active {
+    .pro-tabs-card {
+      background: var(--ant-primary-color-active-deprecated-f-30, rgba(230, 247, 255, 0.3));
+    }
+  }
+
+  .ant-tabs-ink-bar {
+    top   : 0;
+    height: 3px !important;
+  }
+
+  .pro-tabs-card {
+    width      : 200px;
+    padding    : 14px 16px 14px 24px;
+    border     : 1px solid var(--zaui-line, #dddddd);
+    border-left: none;
+
+
+
+    .pro-tabs-card-left {
+      width      : 104px;
+      text-shadow: none;
+
+      .pro-tabs-card-left-total {
+        font-size  : 26px;
+        font-weight: 600;
+        color      : var(--zaui-text, #343434);
+      }
+
+      .pro-tabs-card-left-label {
+        font-size  : var(--zaui-font-size, 14px);
+        font-weight: 400;
+        color      : var(--aui-text, #343434);
+      }
+    }
+
+    .pro-tabs-card-right {
+      display: flex;
+
+      img {
+        width: 48px;
+      }
+    }
+  }
+}

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

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