@zat-design/sisyphus-react 3.2.2 → 3.3.0

package/es/ProTable/style/index.less

@@ -1,38 +1,41 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-table {
   &.pro-table-bordered {
-    .ant-table .ant-table-thead>tr>th {
+    .@{ant-prefix}-table .@{ant-prefix}-table-thead>tr>th {
       border-bottom: 1px solid #f0f0f0
     }
 
-    .ant-table>.ant-table-container>.ant-table-content>table,
-    .ant-table>.ant-table-container>.ant-table-header>table {
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table {
       border-top: 1px solid rgba(0, 0, 0, 0.06);
     }
 
-    .ant-table>.ant-table-container>.ant-table-content>table>thead>tr>th,
-    .ant-table>.ant-table-container>.ant-table-header>table>thead>tr>th,
-    .ant-table>.ant-table-container>.ant-table-body>table>thead>tr>th,
-    .ant-table>.ant-table-container>.ant-table-summary>table>thead>tr>th,
-    .ant-table>.ant-table-container>.ant-table-content>table>tbody>tr>td,
-    .ant-table>.ant-table-container>.ant-table-header>table>tbody>tr>td,
-    .ant-table>.ant-table-container>.ant-table-body>table>tbody>tr>td,
-    .ant-table>.ant-table-container>.ant-table-summary>table>tbody>tr>td,
-    .ant-table>.ant-table-container>.ant-table-content>table>tfoot>tr>th,
-    .ant-table>.ant-table-container>.ant-table-header>table>tfoot>tr>th,
-    .ant-table>.ant-table-container>.ant-table-body>table>tfoot>tr>th,
-    .ant-table>.ant-table-container>.ant-table-summary>table>tfoot>tr>th,
-    .ant-table>.ant-table-container>.ant-table-content>table>tfoot>tr>td,
-    .ant-table>.ant-table-container>.ant-table-header>table>tfoot>tr>td,
-    .ant-table>.ant-table-container>.ant-table-body>table>tfoot>tr>td,
-    .ant-table>.ant-table-container>.ant-table-summary>table>tfoot>tr>td {
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>thead>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>thead>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>thead>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>thead>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>tbody>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>tbody>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>tbody>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>tbody>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>tfoot>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>tfoot>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>tfoot>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>tfoot>tr>th,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-content>table>tfoot>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-header>table>tfoot>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-body>table>tfoot>tr>td,
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container>.@{ant-prefix}-table-summary>table>tfoot>tr>td {
       border-right: 1px solid rgba(0, 0, 0, 0.06);
     }
 
-    .ant-table .ant-table-tbody>tr:not(.ant-table-measure-row)>td {
+    .@{ant-prefix}-table .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-measure-row)>td {
       border-bottom: 1px solid #f0f0f0;
     }
 
-    .ant-table>.ant-table-container {
+    .@{ant-prefix}-table>.@{ant-prefix}-table-container {
       border-left: 1px solid rgba(0, 0, 0, 0.06);
     }
   }
@@ -54,14 +57,22 @@
     }
   }
 
-  .ant-table-tbody {
-    .ant-table-cell-fix-left, .ant-table-cell-fix-right {
+  .@{ant-prefix}-table-tbody {
+    .@{ant-prefix}-table-cell-fix-left, .@{ant-prefix}-table-cell-fix-right {
       background: unset !important;
     }
   }
 
-  .ant-table-body {
-    .ant-table-cell .varied-cell {
+  .@{ant-prefix}-table-body {
+    // .@{ant-prefix}-table-tbody .@{ant-prefix}-table-row:nth-child(odd).new-cell {
+    //   background: #00ae4d !important;
+
+    //   td {
+    //     background: #00ae4d !important;
+    //   }
+    // }
+
+    .@{ant-prefix}-table-cell .varied-cell {
       margin-left: -8px;
       background: var(--zaui-contract-bg, #fffaa1);
       padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-sm, 8px);
@@ -76,7 +87,7 @@
   .copyable-table-cell {
 
 
-    .ant-typography {
+    .@{ant-prefix}-typography {
       margin-bottom: 0;
       display      : flex;
       align-items  : center;
@@ -89,7 +100,7 @@
       }
     }
 
-    .ant-typography-copy-success {
+    .@{ant-prefix}-typography-copy-success {
       svg {
         fill: var(--zaui-success, #00ae4d);
       }
@@ -104,14 +115,14 @@
   }
 
   &.pro-table-no-stripe {
-    .ant-table.ant-table-scroll-horizontal .ant-table-tbody .ant-table-row:nth-child(n)>td {
+    .@{ant-prefix}-table.@{ant-prefix}-table-scroll-horizontal .@{ant-prefix}-table-tbody .@{ant-prefix}-table-row:nth-child(n)>td {
       background: var(--zaui-base-bg, #ffffff);
     }
   }
 
-  .ant-table-thead {
-    .ant-dropdown-trigger {
-      &.ant-dropdown-open {
+  .@{ant-prefix}-table-thead {
+    .@{ant-prefix}-dropdown-trigger {
+      &.@{ant-prefix}-dropdown-open {
 
         .anticon-down {
           transition: transform 0.3s;
@@ -134,7 +145,7 @@
     }
   }
 
-  .ant-table-thead {
+  .@{ant-prefix}-table-thead {
     tr th {
       &:last-child {
         .react-resizable-handle {
@@ -144,11 +155,11 @@
     }
   }
 
-  .ant-space {
+  .@{ant-prefix}-space {
     gap: var(--zaui-space-size-sm, 8px) !important;
   }
 
-  .ant-btn-link {
+  .@{ant-prefix}-btn-link {
     padding: 0 var(--zaui-space-size-xs, 4px);
 
     &:first-child {
@@ -165,7 +176,7 @@
       display    : flex;
       align-items: center;
 
-      >.ant-btn {
+      >.@{ant-prefix}-btn {
 
         &:hover,
         &:visited,
@@ -182,11 +193,22 @@
     }
   }
 
-  .ant-empty .ant-empty-image {
-    height: 80px;
+  .pro-table-empty {
+    margin: var(--zaui-space-size-lg, 32px) 0;
+    color: rgba(0, 0, 0, 0.25);
+    font-size: var(--zaui-font-size-md, 14px);
+    text-align: center;
+
+    .empty-image {
+      height: 80px;
+
+      img {
+        height: 100%;
+      }
+    }
   }
 
-  .ant-table .ant-table-thead>tr>th {
+  .@{ant-prefix}-table .@{ant-prefix}-table-thead>tr>th {
     border-bottom: 0;
     white-space  : nowrap;
     background   : var(--zaui-table-header-bg, #f2f3f5);
@@ -229,29 +251,29 @@
     }
   }
 
-  .ant-table.ant-table-bordered {
-    .ant-table-thead>tr>th {
+  .@{ant-prefix}-table.@{ant-prefix}-table-bordered {
+    .@{ant-prefix}-table-thead>tr>th {
       border-bottom: 1px solid #f0f0f0;
     }
 
-    .ant-table-tbody>tr:not(.ant-table-placeholder)>td {
+    .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-placeholder)>td {
       border-bottom: 1px solid #f0f0f0;
     }
 
-    .ant-table-tbody>tr:not(.ant-table-measure-row)>td {
+    .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-measure-row)>td {
       border-bottom: 1px solid #f0f0f0;
     }
   }
 
-  .ant-table-tbody .ant-table-placeholder {
+  .@{ant-prefix}-table-tbody .@{ant-prefix}-table-placeholder {
     background: var(--zaui-base-bg, #ffffff) !important;
   }
 
-  .ant-table-tbody>tr:not(.ant-table-placeholder)>td {
+  .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-placeholder)>td {
     border-bottom: 0;
   }
 
-  .ant-table-tbody>tr:not(.ant-table-measure-row)>td {
+  .@{ant-prefix}-table-tbody>tr:not(.@{ant-prefix}-table-measure-row)>td {
     border-bottom: 0;
   }
 
@@ -259,7 +281,7 @@
     position       : relative;
     background-clip: padding-box;
 
-    .ant-table-filter-trigger {
+    .@{ant-prefix}-table-filter-trigger {
       margin-right: 0;
     }
   }
@@ -295,20 +317,20 @@
     }
   }
 
-  .ant-table-tbody tr td .ant-checkbox-wrapper-checked.checkbox-disabled {
+  .@{ant-prefix}-table-tbody tr td .@{ant-prefix}-checkbox-wrapper-checked.checkbox-disabled {
     pointer-events: none;
     cursor        : not-allowed;
     opacity       : 0.5;
   }
 
-  .ant-pagination-options-quick-jumper input {
+  .@{ant-prefix}-pagination-options-quick-jumper input {
     border    : unset;
     background: #FAFAFA;
     min-width : 32px;
     height    : 32px;
   }
 
-  .ant-pagination .ant-pagination-item-active a {
+  .@{ant-prefix}-pagination .@{ant-prefix}-pagination-item-active a {
     color        : #ffffff;
     background   : var(--zaui-brand, #006aff) !important;
     border-radius: var(--zaui-border-radius, 4px);
@@ -324,10 +346,10 @@
     }
   }
 
-  .ant-table-summary {
+  .@{ant-prefix}-table-summary {
     background-color: var(--zaui-table-header-bg, #f2f3f5);
 
-    .ant-table-cell {
+    .@{ant-prefix}-table-cell {
       font-weight     : 500;
       background-color: var(--zaui-table-header-bg, #f2f3f5);
       border          : none;
@@ -335,10 +357,10 @@
   }
 }
 
-.ant-dropdown-placement-bottomLeft {
-  .ant-dropdown-menu-vertical.ant-dropdown-menu-light {
+.@{ant-prefix}-dropdown-placement-bottomLeft {
+  .@{ant-prefix}-dropdown-menu-vertical.@{ant-prefix}-dropdown-menu-light {
 
-    .ant-dropdown-menu-item-only-child {
+    .@{ant-prefix}-dropdown-menu-item-only-child {
       &:hover {
         background: rgba(0, 106, 255, 0.08);
       }

package/es/ProTable/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ProTableColumn } from './propsType';
-export declare const formatColumn: (column: ProTableColumn, originalDataSource: any[]) => void;
+export declare const formatColumn: (column: ProTableColumn, originalObj: any, dataSourceObj: any, rowKey: any) => void;
 export declare const getColumnDataIndex: (dataIndex: string | string[]) => string;
 /**
  * 查找最近的父级className

package/es/ProTable/utils.js

@@ -1,6 +1,5 @@
 import "antd/es/space/style";
 import _Space from "antd/es/space";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
 import { isValidElement } from 'react';
@@ -22,7 +21,27 @@ var getDecimalDigits = function getDecimalDigits() {
   var match = Number(num).toString().match(/\.(\d+)/);
   return match ? match[1].length : 0;
 };
-export var formatColumn = function formatColumn(column, originalDataSource) {
+/**
+ * @description: 获取初始值
+ * @author: xiangchengli
+ * @param {any} rowKey
+ * @param any value
+ * @param any originalObj
+ * @param {any} dataIndex
+ * @return {any}
+ */
+var getOriginalValue = function getOriginalValue(value, record, originalObj, rowKey, dataIndex) {
+  if (!originalObj) {
+    return undefined;
+  }
+  var originalRecord = get(originalObj, get(record, rowKey));
+  var originalValue = get(originalRecord, dataIndex);
+  if (!isEqual(originalValue, value)) {
+    return originalValue;
+  }
+  return undefined;
+};
+export var formatColumn = function formatColumn(column, originalObj, dataSourceObj, rowKey) {
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -86,7 +105,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       var multiple = valueType === 'percentage' ? 100 : 1000;
       var realValue = tools.calc(Number(value), '*', multiple);
       var renderValue = getDecimalDigits(value) > valueTypePrecision ? realValue : realValue.toFixed(valueTypePrecision);
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = tools.calc(Number(originalValue || null), '*', multiple);
       var originalRenderValue = getDecimalDigits(originalValue) > valueTypePrecision ? originalRealValue : originalRealValue.toFixed(valueTypePrecision);
       if (!originalValue && originalValue !== 0) {
@@ -97,7 +116,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       }
       return _jsx(RenderColumn, {
         valueType: valueType,
-        originalValue: !originalDataSource || renderValue === originalRenderValue ? undefined : originalRenderValue,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: renderValue,
@@ -111,7 +130,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
     column.render = function (value, record, index) {
       var valueStr = valueTypePrecision ? "".concat(Number(value).toFixed(valueTypePrecision)) : "".concat(value);
       var renderValue = valueStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = valueTypePrecision ? "".concat(Number(originalValue).toFixed(valueTypePrecision)) : "".concat(originalValue);
       var originalRenderValue = originalRealValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       if (!originalValue && originalValue !== 0) {
@@ -126,7 +145,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       }
       return _jsx(RenderColumn, {
         valueType: valueType,
-        originalValue: !originalDataSource || renderValue === originalRenderValue ? undefined : originalRenderValue,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -139,7 +158,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
     column.render = function (value, record, index) {
       var _moment, _moment2, _moment3, _moment4, _moment5, _moment6, _moment7, _moment8, _moment9, _moment10, _moment11, _moment12, _moment13, _moment14;
       var renderValue = (_moment = moment(value)) === null || _moment === void 0 ? void 0 : _moment.format(format);
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRenderValue = (_moment2 = moment(originalValue)) === null || _moment2 === void 0 ? void 0 : _moment2.format(format);
       switch (valueType) {
         case 'date':
@@ -178,7 +197,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       }
       return _jsx(RenderColumn, {
         valueType: valueType,
-        originalValue: !originalDataSource || renderValue === originalRenderValue ? undefined : originalRenderValue,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -191,7 +210,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
     column.render = function (value, record, index) {
       var realCode = typeof code === 'function' ? code() : code;
       var renderValue = getEnumLabel(realCode, value, valueType === 'enumCodeName');
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRenderValue = getEnumLabel(realCode, originalValue, valueType === 'enumCodeName');
       var node = _jsxs(_Space, {
         size: 8,
@@ -199,7 +218,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       });
       return _jsx(RenderColumn, {
         valueType: valueType,
-        originalValue: !originalDataSource || value === originalValue ? undefined : originalRenderValue,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -211,7 +230,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
   } else if (precision || prefix || suffix) {
     column.render = function (value, record, index) {
       var renderValue = value === 'number' ? value.toFixed(precision) : value;
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRenderValue = originalValue === 'number' ? originalValue.toFixed(precision) : originalValue;
       var node = _jsxs(_Space, {
         size: 8,
@@ -225,7 +244,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       }
       return _jsx(RenderColumn, {
         valueType: valueType,
-        originalValue: !originalDataSource || renderValue === originalRenderValue ? undefined : originalRenderValue,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -238,7 +257,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
     column.render = function (value, record, index) {
       var _realValue$filter;
       var realValue = transform ? transform(value, record) : value;
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = transform ? transform(originalValue, record) : originalValue;
       var isEmpty = !realValue || Array.isArray(realValue) && (realValue === null || realValue === void 0 ? void 0 : (_realValue$filter = realValue.filter(function (item) {
         return !!item;
@@ -247,7 +266,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
         return '-';
       }
       var className = classnames({
-        'varied-cell': originalDataSource && !isEqual(value, originalValue),
+        'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
       var renderValue = _jsx(ProForm.ProAddressBar, {
@@ -265,7 +284,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
         isView: true,
         code: code,
         value: realValue,
-        tooltip: originalDataSource && !isEqual(value, originalValue) ? _jsxs(_Fragment, {
+        tooltip: originalValue !== undefined ? _jsxs(_Fragment, {
           children: ["\u521D\u59CB\u503C\uFF1A", originalRenderValue, _jsx("br", {}), ellipsis ? _jsxs(_Fragment, {
             children: ["\u5F53\u524D\u503C\uFF1A", renderValue]
           }) : undefined]
@@ -289,7 +308,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
     };
   } else if (ellipsis) {
     column.render = function (value, record, index) {
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       if (!value && value !== 0 && value === originalValue) {
         return '-';
       }
@@ -297,7 +316,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
         size: 8,
         children: [prefixNode(value, record, index), _jsx(RenderColumn, {
           valueType: valueType,
-          originalValue: !originalDataSource || value === originalValue ? undefined : originalValue || '-',
+          originalValue: originalValue === undefined ? undefined : originalValue || '-',
           ellipsis: ellipsis,
           width: width,
           node: value,
@@ -309,7 +328,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
     };
   } else {
     column.render = function (value, record, index) {
-      var originalValue = get(originalDataSource, Array.isArray(dataIndex) ? [index].concat(_toConsumableArray(dataIndex)) : [index, dataIndex]);
+      var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       var node = _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), value, suffixNode(value, record, index)]
@@ -319,7 +338,7 @@ export var formatColumn = function formatColumn(column, originalDataSource) {
       }
       return _jsx(RenderColumn, {
         valueType: valueType,
-        originalValue: !originalDataSource || value === originalValue ? undefined : originalValue || '-',
+        originalValue: originalValue === undefined ? undefined : originalValue || '-',
         ellipsis: ellipsis,
         width: width,
         node: node,

package/es/ProTabs/style/index.less

@@ -1,18 +1,20 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
 .pro-tabs {
-  .ant-tabs .ant-tabs-nav-list .ant-tabs-tab {
+  .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav-list .@{ant-prefix}-tabs-tab {
     padding: 0 !important;
   }
 
-  .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 {
+  .@{ant-prefix}-tabs-top > .@{ant-prefix}-tabs-nav::before,
+  .@{ant-prefix}-tabs-bottom > .@{ant-prefix}-tabs-nav::before,
+  .@{ant-prefix}-tabs-top > div > .@{ant-prefix}-tabs-nav::before,
+  .@{ant-prefix}-tabs-bottom > div > .@{ant-prefix}-tabs-nav::before {
     border: none;
   }
 
-
-  .ant-tabs-nav-list {
-    .ant-tabs-tab {
+  .@{ant-prefix}-tabs-nav-list {
+    .@{ant-prefix}-tabs-tab {
       &:first-child {
         .pro-tabs-card {
           border-left: 1px solid var(--zaui-line, #dddddd);
@@ -21,37 +23,37 @@
     }
   }
 
-  .ant-tabs-tab-active {
+  .@{ant-prefix}-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;
+  .@{ant-prefix}-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);
+    width: 200px;
+    padding: calc(9px * var(--zaui-size; 1)) 16px calc(9px * var(--zaui-size; 1)) 24px;
+    border: 1px solid var(--zaui-line, #dddddd);
     border-left: none;
 
     .pro-tabs-card-left {
-      width      : 104px;
+      width: 104px;
       text-shadow: none;
 
       .pro-tabs-card-left-total {
-        font-size  : var(--zaui-font-size-lg-title, 24px);
+        color: var(--zaui-text, #343434);
         font-weight: 600;
-        color      : var(--zaui-text, #343434);
+        font-size: var(--zaui-font-size-lg-title, 24px);
       }
 
       .pro-tabs-card-left-label {
-        font-size  : var(--zaui-font-size, 14px);
+        color: var(--aui-text, #343434);
         font-weight: 400;
-        color      : var(--aui-text, #343434);
+        font-size: var(--zaui-font-size, 14px);
       }
     }
 
@@ -67,13 +69,13 @@
 
 .pro-tabs-tab {
   .pro-tabs-card {
-    .ant-tag {
+    .@{ant-prefix}-tag {
+      margin-right: 0;
+      padding: 0 var(--zaui-space-size-xs, 4px);
       border-radius: 10px;
-      padding      : 0 var(--zaui-space-size-xs, 4px);
-      margin-right : 0;
     }
 
-    .ant-space-item {
+    .@{ant-prefix}-space-item {
       display: flex;
     }
   }

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

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

package/es/ProThemeTools/component/PrdTools/index.js

@@ -27,7 +27,8 @@ var PrdTools = function PrdTools(_ref) {
     visible = _ref.visible,
     state = _ref.state,
     tableBorder = _ref.tableBorder,
-    tableStripe = _ref.tableStripe;
+    tableStripe = _ref.tableStripe,
+    prefixCls = _ref.prefixCls;
   var _useState = useState([{
       color: '#006AFF',
       active: true
@@ -150,18 +151,18 @@ var PrdTools = function PrdTools(_ref) {
             var after = e.target.value === 'left' ? 'inline' : 'none';
             var before = e.target.value === 'right' ? 'inline' : 'none';
             // 遍历添加className
-            var formItemLabels = document.querySelectorAll('.ant-form-item-label');
+            var formItemLabels = document.querySelectorAll(".".concat(prefixCls, "-form-item-label"));
             // 遍历元素列表，为每个元素添加新的 class
             formItemLabels.forEach(function (label) {
               var _label$classList, _label$classList$valu, _label$classList2, _label$classList2$val;
               if (!label) {
                 return false;
               }
-              if (e.target.value === 'left' && !((_label$classList = label.classList) === null || _label$classList === void 0 ? void 0 : (_label$classList$valu = _label$classList.value) === null || _label$classList$valu === void 0 ? void 0 : _label$classList$valu.includes('ant-form-item-label-left'))) {
-                label.classList.add('ant-form-item-label-left');
+              if (e.target.value === 'left' && !((_label$classList = label.classList) === null || _label$classList === void 0 ? void 0 : (_label$classList$valu = _label$classList.value) === null || _label$classList$valu === void 0 ? void 0 : _label$classList$valu.includes("".concat(prefixCls, "-form-item-label-left")))) {
+                label.classList.add("".concat(prefixCls, "-form-item-label-left"));
               }
-              if (e.target.value === 'right' && ((_label$classList2 = label.classList) === null || _label$classList2 === void 0 ? void 0 : (_label$classList2$val = _label$classList2.value) === null || _label$classList2$val === void 0 ? void 0 : _label$classList2$val.includes('ant-form-item-label-left'))) {
-                label.classList.remove('ant-form-item-label-left');
+              if (e.target.value === 'right' && ((_label$classList2 = label.classList) === null || _label$classList2 === void 0 ? void 0 : (_label$classList2$val = _label$classList2.value) === null || _label$classList2$val === void 0 ? void 0 : _label$classList2$val.includes("".concat(prefixCls, "-form-item-label-left")))) {
+                label.classList.remove("".concat(prefixCls, "-form-item-label-left"));
               }
             });
             setState(_objectSpread(_objectSpread({}, state), {}, {

package/es/ProThemeTools/component/PrdTools/style/index.less

@@ -1,17 +1,17 @@
 .pro-theme-prd-tools-drawer {
-  .ant-drawer-header {
+  .@{ant-prefix}-drawer-header {
     border-bottom: none;
   }
 
-  .ant-drawer-title {
+  .@{ant-prefix}-drawer-title {
     font-size: var(--zaui-font-size-xl, 18px);
   }
 
-  .ant-drawer-body {
+  .@{ant-prefix}-drawer-body {
     padding: 0 32px 32px;
   }
 
-  .ant-space-vertical {
+  .@{ant-prefix}-space-vertical {
     gap: var(--zaui-space-size-sm, 8px) !important;
   }
 
@@ -118,12 +118,12 @@
     }
   }
 
-  .ant-radio-button-wrapper {
+  .@{ant-prefix}-radio-button-wrapper {
     padding: 0 28px;
   }
 
   .pro-theme-tools-form {
-    .ant-radio-button-wrapper {
+    .@{ant-prefix}-radio-button-wrapper {
       padding: 0 42px;
     }
   }

package/es/ProThemeTools/index.d.ts

@@ -1,6 +1,6 @@
 import type { ProThemeToolsProps } from './propsType';
 declare const ProThemeTools: {
-    ({ size, className, cacheTime, color, mode, iconFollowTheme, tableBorder, tableStripe, theme, ...props }: ProThemeToolsProps): JSX.Element;
+    ({ size, className, cacheTime, color, mode, iconFollowTheme, prefixCls, tableBorder, tableStripe, theme, ...props }: ProThemeToolsProps): JSX.Element;
     defaultProps: {
         size: number;
         mode: string;