@zat-design/sisyphus-react 4.0.0-beta.4 → 4.0.0-beta.6

package/es/ProTabs/index.js

@@ -1,17 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
 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", "mode"];
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
 import React, { useMemo, useState, forwardRef, useImperativeHandle } from 'react';
-import { Tabs } from 'antd';
 import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
 import classNames from 'classnames';
 import { omit } from 'lodash';
 import { Card } from "./components";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ProTabs = function ProTabs(props, ref) {
+var ProTabs = (props, ref) => {
   var style = props.style,
     className = props.className,
     _props$dataSource = props.dataSource,
@@ -30,7 +30,7 @@ var ProTabs = function ProTabs(props, ref) {
     setSelectList = _useState2[1];
   var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
     manual: true,
-    onSuccess: function onSuccess(data) {
+    onSuccess: data => {
       var responseData;
       if (transformResponse && typeof transformResponse === 'function') {
         // 转换数据
@@ -42,7 +42,7 @@ var ProTabs = function ProTabs(props, ref) {
       if (!Array.isArray(responseData)) {
         return console.error('transformResponse must return a number array, like [1, 2, 3]');
       }
-      var result = selectList.map(function (item, index) {
+      var result = selectList.map((item, index) => {
         return _objectSpread(_objectSpread({}, item), {}, {
           total: responseData[index] || 0
         });
@@ -52,26 +52,30 @@ var ProTabs = function ProTabs(props, ref) {
     debounceWait: 300,
     loadingDelay: 1000
   }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
-  var _items = useMemo(function () {
-    return selectList.map(function (itemProps) {
+  var _items = useMemo(() => {
+    return selectList.map(itemProps => {
       var cardItemProps = {
         total: itemProps.total,
         label: itemProps.label,
         icon: itemProps.icon,
-        mode: mode,
+        mode,
         title: itemProps.title || itemProps.label,
-        loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading
+        loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
+        size: rest === null || rest === void 0 ? void 0 : rest.size
       };
       return _objectSpread(_objectSpread({}, omit(itemProps, ['total', 'label', 'icon'])), {}, {
         label: /*#__PURE__*/_jsx(Card, _objectSpread({}, cardItemProps))
       });
     });
   }, [selectList, fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading]);
-  var cls = classNames(_defineProperty({
+  var cls = classNames({
     'pro-tabs': mode === 'card',
-    'pro-tabs-tab': mode !== 'card'
-  }, className, className));
-  var handleChange = function handleChange(key) {
+    'pro-tabs-mode-card': mode === 'card',
+    'pro-tabs-tab': mode !== 'card',
+    'pro-tabs-size-small': (rest === null || rest === void 0 ? void 0 : rest.size) === 'small',
+    [className]: className
+  });
+  var handleChange = key => {
     var onChange = props.onChange;
     // 开启tab切换查询
     if (tabSearch) {
@@ -81,7 +85,7 @@ var ProTabs = function ProTabs(props, ref) {
   };
 
   // manual为false时，自动执行
-  useDeepCompareEffect(function () {
+  useDeepCompareEffect(() => {
     var _ref = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
       defaultParams = _ref.defaultParams,
       manual = _ref.manual;
@@ -91,15 +95,21 @@ var ProTabs = function ProTabs(props, ref) {
     }
     fetchFunction.run(params);
   }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options]);
-  useImperativeHandle(ref, function () {
-    return {
-      useRequestRef: fetchFunction
-    };
-  });
+
+  // dataSource变化时，更新selectList
+  useDeepCompareEffect(() => {
+    if (!(dataSource !== null && dataSource !== void 0 && dataSource.length)) {
+      return;
+    }
+    setSelectList(dataSource);
+  }, [dataSource]);
+  useImperativeHandle(ref, () => ({
+    useRequestRef: fetchFunction
+  }));
   return /*#__PURE__*/_jsx("div", {
     style: style,
     className: cls,
-    children: /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(_Tabs, _objectSpread(_objectSpread({
       animated: false
     }, rest), {}, {
       items: _items,

package/es/ProTabs/propType.d.ts

@@ -85,6 +85,11 @@ export interface ProTabsType extends Omit<TabsProps, 'items' | 'onChange'> {
         service: Service<any, any>;
         options?: Options<any, any>;
     };
+    /**
+     * @description       卡片大小
+     * @default           default
+     */
+    size?: 'small' | 'middle' | 'large';
     [key: string]: any;
 }
 export type ProTabsProps = ProTabsType;

package/es/ProTabs/style/index.less

@@ -1,5 +1,42 @@
 
 .pro-tabs {
+  &.pro-tabs-mode-card {
+    &.pro-tabs-size-small {
+      .pro-tabs-card {
+        .pro-tabs-card-left {
+          width: 84px !important;
+        }
+        .pro-tabs-card-right img {
+          width: 24px !important;
+        }
+      }
+    }
+    .@{ant-prefix}-tabs-nav-list {
+      div[data-node-key='1'] {
+        margin-left: 0 !important;
+      }
+    }
+    .@{ant-prefix}-tabs-tab {
+      margin-left: 10px !important;
+      background: #ffffff !important;
+      border-radius: 8px !important;
+      &.@{ant-prefix}-tabs-tab-active {
+        background: var(--ant-primary-1) !important;
+        .pro-tabs-card {
+          border-color: var(--ant-primary-color) !important;
+        }
+      }
+      .pro-tabs-card {
+        width: 100%;
+        padding: 8px 12px !important;
+        border: 1px solid #e7e7e7 !important;
+        border-radius: 8px !important;
+      }
+    }
+    .@{ant-prefix}-tabs-ink-bar {
+      display: none !important;
+    }
+  }
   .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav-list .@{ant-prefix}-tabs-tab {
     padding: 0 !important;
   }
@@ -33,7 +70,7 @@
   }
 
   .pro-tabs-card {
-    width: 200px;
+    width: 192px;
     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;
@@ -45,11 +82,11 @@
       .pro-tabs-card-left-total {
         color: var(--zaui-text, #343434);
         font-weight: 600;
-        font-size: var(--zaui-font-size-lg-title, 24px);
+        font-size: var(--zaui-font-size-lg, 16px);
       }
 
       .pro-tabs-card-left-label {
-        color: var(--aui-text, #343434);
+        color: #626366;
         font-weight: 400;
         font-size: var(--zaui-font-size, 14px);
       }

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

@@ -1,7 +1,14 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+import "antd/es/radio/style";
+import _Radio from "antd/es/radio";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "antd/es/drawer/style";
+import _Drawer from "antd/es/drawer";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button, Drawer, Radio, Switch } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { setThemes } from "../../utils/index";
 import { useProConfig } from "../../../ProConfigProvider";
@@ -14,8 +21,8 @@ var connect = function connect(Component) {
   };
   return ComponentWrapper;
 };
-var NewDrawer = connect(Drawer);
-var ProTools = function ProTools(_ref) {
+var NewDrawer = connect(_Drawer);
+var ProTools = _ref => {
   var onReset = _ref.onReset,
     onClose = _ref.onClose,
     setState = _ref.setState,
@@ -45,7 +52,7 @@ var ProTools = function ProTools(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
     setActive = _useState2[1];
-  useEffect(function () {
+  useEffect(() => {
     var themeConfig = localStorage.getItem('themeConfig');
     var curThemeConfig = themeConfig ? JSON.parse(themeConfig) : {};
     var _ref2 = curThemeConfig.data || {},
@@ -53,7 +60,7 @@ var ProTools = function ProTools(_ref) {
       zauiBrand = _ref2$zauiBrand === void 0 ? '#006AFF' : _ref2$zauiBrand;
     if (zauiBrand) {
       var _config$theme;
-      var newArray = active.map(function (activeItem) {
+      var newArray = active.map(activeItem => {
         activeItem.active = false;
         return {
           color: activeItem.color,
@@ -76,7 +83,7 @@ var ProTools = function ProTools(_ref) {
   return /*#__PURE__*/_jsxs(NewDrawer, {
     className: "pro-theme-prd-tools-drawer",
     width: 400,
-    title: "".concat(locale.ProThemeTools.title),
+    title: `${locale.ProThemeTools.title}`,
     placement: "right",
     onClose: onClose,
     open: open,
@@ -90,14 +97,14 @@ var ProTools = function ProTools(_ref) {
     }), /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-space",
       children: [/*#__PURE__*/_jsx("p", {
-        children: "".concat(locale.ProThemeTools.themeColor)
+        children: `${locale.ProThemeTools.themeColor}`
       }), /*#__PURE__*/_jsx("ul", {
         className: "pro-theme-color",
-        children: active.map(function (item, index) {
+        children: active.map((item, index) => {
           return /*#__PURE__*/_jsx("li", {
             className: item.active ? 'active' : '',
-            onClick: function onClick() {
-              var array = active.map(function (activeItem) {
+            onClick: () => {
+              var array = active.map(activeItem => {
                 activeItem.active = false;
                 return {
                   color: activeItem.color,
@@ -131,13 +138,13 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.layout)
+          children: `${locale.ProThemeTools.layout}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsxs(Radio.Group, {
+        children: /*#__PURE__*/_jsxs(_Radio.Group, {
           value: state.zauiSize,
-          onChange: function onChange(e) {
+          onChange: e => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiSize: e.target.value
             }));
@@ -145,15 +152,15 @@ var ProTools = function ProTools(_ref) {
               'zaui-size': e.target.value
             });
           },
-          children: [/*#__PURE__*/_jsx(Radio.Button, {
+          children: [/*#__PURE__*/_jsx(_Radio.Button, {
             value: 0.5,
-            children: "".concat(locale.ProThemeTools.layoutMode[0])
-          }), /*#__PURE__*/_jsx(Radio.Button, {
+            children: `${locale.ProThemeTools.layoutMode[0]}`
+          }), /*#__PURE__*/_jsx(_Radio.Button, {
             value: 1,
-            children: "".concat(locale.ProThemeTools.layoutMode[1])
-          }), /*#__PURE__*/_jsx(Radio.Button, {
+            children: `${locale.ProThemeTools.layoutMode[1]}`
+          }), /*#__PURE__*/_jsx(_Radio.Button, {
             value: 1.5,
-            children: "".concat(locale.ProThemeTools.layoutMode[2])
+            children: `${locale.ProThemeTools.layoutMode[2]}`
           })]
         })
       })]
@@ -162,13 +169,13 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.formLabel)
+          children: `${locale.ProThemeTools.formLabel}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsxs(Radio.Group, {
+        children: /*#__PURE__*/_jsxs(_Radio.Group, {
           value: state.zauiFormAlign,
-          onChange: function onChange(e) {
+          onChange: e => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiFormAlign: e.target.value
             }));
@@ -185,12 +192,12 @@ var ProTools = function ProTools(_ref) {
               }
             });
           },
-          children: [/*#__PURE__*/_jsx(Radio.Button, {
+          children: [/*#__PURE__*/_jsx(_Radio.Button, {
             value: "left",
-            children: "".concat(locale.ProThemeTools.flex[0])
-          }), /*#__PURE__*/_jsx(Radio.Button, {
+            children: `${locale.ProThemeTools.flex[0]}`
+          }), /*#__PURE__*/_jsx(_Radio.Button, {
             value: "right",
-            children: "".concat(locale.ProThemeTools.flex[1])
+            children: `${locale.ProThemeTools.flex[1]}`
           })]
         })
       })]
@@ -199,15 +206,15 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.tableBorder)
+          children: `${locale.ProThemeTools.tableBorder}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsx(Switch, {
-          checkedChildren: "".concat(locale.ProThemeTools.switchText[0]),
-          unCheckedChildren: "".concat(locale.ProThemeTools.switchText[1]),
+        children: /*#__PURE__*/_jsx(_Switch, {
+          checkedChildren: `${locale.ProThemeTools.switchText[0]}`,
+          unCheckedChildren: `${locale.ProThemeTools.switchText[1]}`,
           checked: state.zauiTableBorder,
-          onClick: function onClick(value) {
+          onClick: value => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiTableBorder: value
             }));
@@ -222,15 +229,15 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.tableStripe)
+          children: `${locale.ProThemeTools.tableStripe}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsx(Switch, {
-          checkedChildren: "".concat(locale.ProThemeTools.switchText[0]),
-          unCheckedChildren: "".concat(locale.ProThemeTools.switchText[1]),
+        children: /*#__PURE__*/_jsx(_Switch, {
+          checkedChildren: `${locale.ProThemeTools.switchText[0]}`,
+          unCheckedChildren: `${locale.ProThemeTools.switchText[1]}`,
           checked: state.zauiStripe,
-          onClick: function onClick(value) {
+          onClick: value => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiStripe: value
             }));
@@ -241,9 +248,9 @@ var ProTools = function ProTools(_ref) {
           }
         })
       })]
-    }), /*#__PURE__*/_jsx(Button, {
+    }), /*#__PURE__*/_jsx(_Button, {
       className: "copy-btn",
-      onClick: function onClick() {
+      onClick: () => {
         setActive([{
           color: '#006AFF',
           active: true
@@ -259,7 +266,7 @@ var ProTools = function ProTools(_ref) {
         }]);
         onReset();
       },
-      children: "".concat(locale.ProThemeTools.reset)
+      children: `${locale.ProThemeTools.reset}`
     })]
   });
 };

package/es/ProThemeTools/context/ThemeContext.js

@@ -74,48 +74,48 @@ var ThemeContext = /*#__PURE__*/createContext(undefined);
 
 // Provider 组件
 
-export var ThemeProvider = function ThemeProvider(_ref) {
+export var ThemeProvider = _ref => {
   var children = _ref.children;
   var _useReducer = useReducer(themeReducer, initialState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
-  var updateLocalConfig = useCallback(function (config) {
+  var updateLocalConfig = useCallback(config => {
     dispatch({
       type: 'UPDATE_LOCAL_CONFIG',
       payload: config
     });
   }, []);
-  var updateAntdConfig = useCallback(function (config) {
+  var updateAntdConfig = useCallback(config => {
     dispatch({
       type: 'UPDATE_ANTD_CONFIG',
       payload: config
     });
   }, []);
-  var updateCssVariables = useCallback(function (variables) {
+  var updateCssVariables = useCallback(variables => {
     dispatch({
       type: 'UPDATE_CSS_VARIABLES',
       payload: variables
     });
   }, []);
-  var resetTheme = useCallback(function () {
+  var resetTheme = useCallback(() => {
     dispatch({
       type: 'RESET_THEME'
     });
   }, []);
-  var loadFromCache = useCallback(function (cacheState) {
+  var loadFromCache = useCallback(cacheState => {
     dispatch({
       type: 'LOAD_FROM_CACHE',
       payload: cacheState
     });
   }, []);
   var contextValue = {
-    state: state,
-    updateLocalConfig: updateLocalConfig,
-    updateAntdConfig: updateAntdConfig,
-    updateCssVariables: updateCssVariables,
-    resetTheme: resetTheme,
-    loadFromCache: loadFromCache
+    state,
+    updateLocalConfig,
+    updateAntdConfig,
+    updateCssVariables,
+    resetTheme,
+    loadFromCache
   };
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {
     value: contextValue,
@@ -124,7 +124,7 @@ export var ThemeProvider = function ThemeProvider(_ref) {
 };
 
 // Hook for using theme context
-export var useTheme = function useTheme() {
+export var useTheme = () => {
   var context = useContext(ThemeContext);
   if (context === undefined) {
     throw new Error('useTheme must be used within a ThemeProvider');

package/es/ProThemeTools/index.js

@@ -1,10 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/message/style";
+import _message from "antd/es/message";
 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 = ["size", "className", "cacheTime", "color", "mode", "iconFollowTheme", "prefixCls", "tableBorder", "tableStripe", "theme", "onChange"];
 /* eslint-disable prefer-const */
-import { message } from 'antd';
 import { useEffect, useState } from 'react';
 import { usePrevious, useUpdateEffect, useToggle } from 'ahooks';
 import { ReactSVG } from 'react-svg';
@@ -41,7 +41,7 @@ var defaultThemeConfig = {
   zauiTableBorder: false,
   zauiStripe: true
 };
-var ProThemeTools = function ProThemeTools(_ref) {
+var ProThemeTools = _ref => {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 24 : _ref$size,
     className = _ref.className,
@@ -81,7 +81,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
     zauiTableBorder = state.zauiTableBorder;
 
   // 重置
-  var onReset = function onReset() {
+  var onReset = () => {
     var resetConfig = _objectSpread(_objectSpread({}, state), defaultThemeConfig);
     setState(resetConfig);
 
@@ -114,7 +114,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
   };
 
   // 复制
-  var onCopy = function onCopy() {
+  var onCopy = () => {
     var data = JSON.stringify(getMapKebabCase(state, '@'));
     var input = document.createElement('input');
     document.body.appendChild(input);
@@ -122,13 +122,13 @@ var ProThemeTools = function ProThemeTools(_ref) {
     input.select();
     if (document.execCommand('copy')) {
       document.execCommand('copy');
-      message.success("".concat(locale.ProThemeTools.copySuccess));
+      _message.success(`${locale.ProThemeTools.copySuccess}`);
     }
     document.body.removeChild(input);
   };
 
   // 首次从缓存中读取主题配置
-  useEffect(function () {
+  useEffect(() => {
     var themeConfig = localStorage.getItem('themeConfig');
     var curThemeConfig = themeConfig ? JSON.parse(themeConfig) : {};
     var startTime = curThemeConfig === null || curThemeConfig === void 0 ? void 0 : curThemeConfig.startTime;
@@ -138,10 +138,8 @@ var ProThemeTools = function ProThemeTools(_ref) {
       var _localThemeConfig;
       var localThemeConfig;
       localThemeConfig = curThemeConfig.data;
-      var cssVariables = Object.fromEntries(Object.entries(localThemeConfig).map(function (item) {
-        return ["".concat(getKebabCase(item === null || item === void 0 ? void 0 : item[0])), ['zauiSize'].includes(item === null || item === void 0 ? void 0 : item[0]) || typeof (item === null || item === void 0 ? void 0 : item[1]) !== 'number' ? item === null || item === void 0 ? void 0 : item[1] : "".concat(item === null || item === void 0 ? void 0 : item[1], "px") // zauiSize取数字
-        ];
-      }));
+      var cssVariables = Object.fromEntries(Object.entries(localThemeConfig).map(item => [`${getKebabCase(item === null || item === void 0 ? void 0 : item[0])}`, ['zauiSize'].includes(item === null || item === void 0 ? void 0 : item[0]) || typeof (item === null || item === void 0 ? void 0 : item[1]) !== 'number' ? item === null || item === void 0 ? void 0 : item[1] : `${item === null || item === void 0 ? void 0 : item[1]}px` // zauiSize取数字
+      ]));
       setState(_objectSpread(_objectSpread({}, state), localThemeConfig));
       setThemes(cssVariables);
 
@@ -168,7 +166,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
   }, []);
 
   // 主题色动态切换
-  useEffect(function () {
+  useEffect(() => {
     if (visible && zauiBrand) {
       // 更新 antd 主题
       var antdConfig = getAntd5ThemeConfig({
@@ -179,7 +177,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
   }, [zauiBrand, visible]);
 
   // 斑马纹设置
-  useEffect(function () {
+  useEffect(() => {
     var cssVar = {
       'zaui-table-strip-bg': zauiStripe ? '#fafafa' : '#ffffff'
     };
@@ -188,12 +186,12 @@ var ProThemeTools = function ProThemeTools(_ref) {
   }, [zauiStripe]);
 
   // 表格边框设置
-  useEffect(function () {
+  useEffect(() => {
     setTableBorder(zauiTableBorder);
   }, [zauiTableBorder]);
 
   // 主题配置缓存
-  useEffect(function () {
+  useEffect(() => {
     if (cacheTime) {
       var newThemeConfig = {
         startTime: new Date().getTime(),
@@ -204,7 +202,7 @@ var ProThemeTools = function ProThemeTools(_ref) {
   }, [state, cacheTime]);
 
   // 状态变化时同步到 Context
-  useUpdateEffect(function () {
+  useUpdateEffect(() => {
     if (!isEqual(state, previousState) && visible) {
       // 更新本地配置
       updateLocalConfig(state);
@@ -222,10 +220,11 @@ var ProThemeTools = function ProThemeTools(_ref) {
       onChange === null || onChange === void 0 || onChange(state);
     }
   }, [state]);
-  var cls = classnames(_defineProperty({
+  var cls = classnames({
     'pro-theme-tools': true,
-    'pro-theme-tools-follow': iconFollowTheme
-  }, className, className));
+    'pro-theme-tools-follow': iconFollowTheme,
+    [className]: className
+  });
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/_jsx("div", {
       className: cls,