@zat-design/sisyphus-react 3.13.14-deta.2 → 4.0.0-beta.3

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

@@ -1,26 +1,20 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { useState, useEffect } from 'react';
-import { setThemes } from '../../utils/index';
-import { useProConfig } from '../../../ProConfigProvider';
-import locale from '../../../locale';
+import { Button, Drawer, Radio, Switch } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { setThemes } from "../../utils/index";
+import { useProConfig } from "../../../ProConfigProvider";
+import locale from "../../../locale";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var connect = function connect(Component) {
   var ComponentWrapper = function ComponentWrapper(props) {
-    return _jsx(Component, _objectSpread({}, props));
+    return /*#__PURE__*/_jsx(Component, _objectSpread({}, props));
   };
   return ComponentWrapper;
 };
-var NewDrawer = connect(_Drawer);
+var NewDrawer = connect(Drawer);
 var ProTools = function ProTools(_ref) {
   var onReset = _ref.onReset,
     onClose = _ref.onClose,
@@ -72,13 +66,14 @@ var ProTools = function ProTools(_ref) {
         payload: {
           theme: {
             primaryColor: zauiBrand,
-            qiankunPrimaryColor: config === null || config === void 0 ? void 0 : (_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.qiankunPrimaryColor
-          }
+            qiankunPrimaryColor: config === null || config === void 0 || (_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.qiankunPrimaryColor
+          },
+          forms: {}
         }
       });
     }
   }, []);
-  return _jsxs(NewDrawer, {
+  return /*#__PURE__*/_jsxs(NewDrawer, {
     className: "pro-theme-prd-tools-drawer",
     width: 400,
     title: "".concat(locale.ProThemeTools.title),
@@ -86,20 +81,20 @@ var ProTools = function ProTools(_ref) {
     onClose: onClose,
     open: open,
     closable: false,
-    children: [_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: "pro-drawer-close",
       onClick: onClose,
-      children: _jsx(CloseOutlined, {
+      children: /*#__PURE__*/_jsx(CloseOutlined, {
         className: "close-icon"
       })
-    }), _jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-space",
-      children: [_jsx("p", {
+      children: [/*#__PURE__*/_jsx("p", {
         children: "".concat(locale.ProThemeTools.themeColor)
-      }), _jsx("ul", {
+      }), /*#__PURE__*/_jsx("ul", {
         className: "pro-theme-color",
         children: active.map(function (item, index) {
-          return _jsx("li", {
+          return /*#__PURE__*/_jsx("li", {
             className: item.active ? 'active' : '',
             onClick: function onClick() {
               var array = active.map(function (activeItem) {
@@ -122,24 +117,25 @@ var ProTools = function ProTools(_ref) {
                   theme: {
                     primaryColor: item.color,
                     qiankunPrimaryColor: item.color
-                  }
+                  },
+                  forms: {}
                 }
               });
             },
-            children: item.active ? _jsx(CheckOutlined, {}) : null
+            children: item.active ? /*#__PURE__*/_jsx(CheckOutlined, {}) : null
           }, item.color);
         })
       })]
-    }), _jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-space",
-      children: [_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsx("p", {
+        children: /*#__PURE__*/_jsx("p", {
           children: "".concat(locale.ProThemeTools.layout)
         })
-      }), _jsx("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsxs(_Radio.Group, {
+        children: /*#__PURE__*/_jsxs(Radio.Group, {
           value: state.zauiSize,
           onChange: function onChange(e) {
             setState(_objectSpread(_objectSpread({}, state), {}, {
@@ -149,28 +145,28 @@ var ProTools = function ProTools(_ref) {
               'zaui-size': e.target.value
             });
           },
-          children: [_jsx(_Radio.Button, {
+          children: [/*#__PURE__*/_jsx(Radio.Button, {
             value: 0.5,
             children: "".concat(locale.ProThemeTools.layoutMode[0])
-          }), _jsx(_Radio.Button, {
+          }), /*#__PURE__*/_jsx(Radio.Button, {
             value: 1,
             children: "".concat(locale.ProThemeTools.layoutMode[1])
-          }), _jsx(_Radio.Button, {
+          }), /*#__PURE__*/_jsx(Radio.Button, {
             value: 1.5,
             children: "".concat(locale.ProThemeTools.layoutMode[2])
           })]
         })
       })]
-    }), _jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-space pro-theme-tools-form",
-      children: [_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsx("p", {
+        children: /*#__PURE__*/_jsx("p", {
           children: "".concat(locale.ProThemeTools.formLabel)
         })
-      }), _jsx("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsxs(_Radio.Group, {
+        children: /*#__PURE__*/_jsxs(Radio.Group, {
           value: state.zauiFormAlign,
           onChange: function onChange(e) {
             setState(_objectSpread(_objectSpread({}, state), {}, {
@@ -184,29 +180,30 @@ var ProTools = function ProTools(_ref) {
               payload: {
                 ProForm: {
                   labelAlign: e.target.value
-                }
+                },
+                forms: {}
               }
             });
           },
-          children: [_jsx(_Radio.Button, {
+          children: [/*#__PURE__*/_jsx(Radio.Button, {
             value: "left",
             children: "".concat(locale.ProThemeTools.flex[0])
-          }), _jsx(_Radio.Button, {
+          }), /*#__PURE__*/_jsx(Radio.Button, {
             value: "right",
             children: "".concat(locale.ProThemeTools.flex[1])
           })]
         })
       })]
-    }), tableBorder && _jsxs("div", {
+    }), tableBorder && /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-box pro-theme-tools-space pro-theme-tools-small-space",
-      children: [_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsx("p", {
+        children: /*#__PURE__*/_jsx("p", {
           children: "".concat(locale.ProThemeTools.tableBorder)
         })
-      }), _jsx("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsx(_Switch, {
+        children: /*#__PURE__*/_jsx(Switch, {
           checkedChildren: "".concat(locale.ProThemeTools.switchText[0]),
           unCheckedChildren: "".concat(locale.ProThemeTools.switchText[1]),
           checked: state.zauiTableBorder,
@@ -220,16 +217,16 @@ var ProTools = function ProTools(_ref) {
           }
         })
       })]
-    }), tableStripe && _jsxs("div", {
+    }), tableStripe && /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-box pro-theme-tools-space pro-theme-tools-small-space",
-      children: [_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsx("p", {
+        children: /*#__PURE__*/_jsx("p", {
           children: "".concat(locale.ProThemeTools.tableStripe)
         })
-      }), _jsx("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: _jsx(_Switch, {
+        children: /*#__PURE__*/_jsx(Switch, {
           checkedChildren: "".concat(locale.ProThemeTools.switchText[0]),
           unCheckedChildren: "".concat(locale.ProThemeTools.switchText[1]),
           checked: state.zauiStripe,
@@ -244,7 +241,7 @@ var ProTools = function ProTools(_ref) {
           }
         })
       })]
-    }), _jsx(_Button, {
+    }), /*#__PURE__*/_jsx(Button, {
       className: "copy-btn",
       onClick: function onClick() {
         setActive([{

package/es/ProThemeTools/component/index.js

@@ -1 +1 @@
-export { default as ProTools } from './ProTools';
+export { default as ProTools } from "./ProTools";

package/es/ProThemeTools/context/ThemeContext.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import type { LocalThemeConfigType } from '../propsType';
+export interface AntdThemeConfigType {
+    token?: {
+        colorPrimary?: string;
+        [key: string]: any;
+    };
+    components?: {
+        [key: string]: any;
+    };
+}
+export interface ThemeStateType {
+    localConfig: LocalThemeConfigType;
+    antdConfig: AntdThemeConfigType;
+    cssVariables: Record<string, any>;
+}
+interface ThemeContextType {
+    state: ThemeStateType;
+    updateLocalConfig: (config: Partial<LocalThemeConfigType>) => void;
+    updateAntdConfig: (config: AntdThemeConfigType) => void;
+    updateCssVariables: (variables: Record<string, any>) => void;
+    resetTheme: () => void;
+    loadFromCache: (cacheState: ThemeStateType) => void;
+}
+declare const defaultThemeConfig: LocalThemeConfigType;
+interface ThemeProviderProps {
+    children: ReactNode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextType;
+export { defaultThemeConfig };

package/es/ProThemeTools/context/ThemeContext.js

@@ -0,0 +1,136 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { createContext, useContext, useReducer, useCallback } from 'react';
+
+// antd5 主题配置接口
+
+// 主题状态接口
+
+// Action 类型
+
+// Context 接口
+import { jsx as _jsx } from "react/jsx-runtime";
+// 默认主题配置
+var defaultThemeConfig = {
+  zauiBrand: '#006AFF',
+  zauiText: '#343434',
+  zauiFontSize: '14px',
+  zauiFormAlign: 'left',
+  zauiFormRequiredBefore: 'none',
+  zauiFormRequiredAfter: 'inline',
+  zauiSize: 1,
+  zauiSpaceSizeLg: '32px',
+  zauiSpaceSizeMd: '16px',
+  zauiBigText: false,
+  zauiBaseFontSize: '0px',
+  zauiTableBorder: false,
+  zauiStripe: true
+};
+
+// 初始状态
+var initialState = {
+  localConfig: defaultThemeConfig,
+  antdConfig: {
+    token: {
+      colorPrimary: '#006AFF'
+    }
+  },
+  cssVariables: {}
+};
+
+// Reducer 函数
+function themeReducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_LOCAL_CONFIG':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        localConfig: _objectSpread(_objectSpread({}, state.localConfig), action.payload)
+      });
+    case 'UPDATE_ANTD_CONFIG':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        antdConfig: action.payload
+      });
+    case 'UPDATE_CSS_VARIABLES':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        cssVariables: _objectSpread(_objectSpread({}, state.cssVariables), action.payload)
+      });
+    case 'RESET_THEME':
+      return _objectSpread(_objectSpread({}, initialState), {}, {
+        localConfig: defaultThemeConfig,
+        antdConfig: {
+          token: {
+            colorPrimary: defaultThemeConfig.zauiBrand
+          }
+        }
+      });
+    case 'LOAD_FROM_CACHE':
+      return action.payload;
+    default:
+      return state;
+  }
+}
+
+// 创建 Context
+var ThemeContext = /*#__PURE__*/createContext(undefined);
+
+// Provider 组件
+
+export var ThemeProvider = function 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) {
+    dispatch({
+      type: 'UPDATE_LOCAL_CONFIG',
+      payload: config
+    });
+  }, []);
+  var updateAntdConfig = useCallback(function (config) {
+    dispatch({
+      type: 'UPDATE_ANTD_CONFIG',
+      payload: config
+    });
+  }, []);
+  var updateCssVariables = useCallback(function (variables) {
+    dispatch({
+      type: 'UPDATE_CSS_VARIABLES',
+      payload: variables
+    });
+  }, []);
+  var resetTheme = useCallback(function () {
+    dispatch({
+      type: 'RESET_THEME'
+    });
+  }, []);
+  var loadFromCache = useCallback(function (cacheState) {
+    dispatch({
+      type: 'LOAD_FROM_CACHE',
+      payload: cacheState
+    });
+  }, []);
+  var contextValue = {
+    state: state,
+    updateLocalConfig: updateLocalConfig,
+    updateAntdConfig: updateAntdConfig,
+    updateCssVariables: updateCssVariables,
+    resetTheme: resetTheme,
+    loadFromCache: loadFromCache
+  };
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+
+// Hook for using theme context
+export var useTheme = function useTheme() {
+  var context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+// 导出默认配置
+export { defaultThemeConfig };

package/es/ProThemeTools/index.d.ts

@@ -8,6 +8,9 @@ declare const ProThemeTools: {
         iconFollowTheme: boolean;
         cacheTime: boolean;
     };
-    setThemes: (themes: import("./utils/index").ThemesProps, themeMapping?: import("./utils/index").ThemesProps) => boolean;
+    setThemes: (themes: import("./utils/index").ThemesProps) => boolean;
 };
 export default ProThemeTools;
+export { ThemeProvider, useTheme } from './context/ThemeContext';
+export type { AntdThemeConfigType, ThemeStateType } from './context/ThemeContext';
+export type { LocalThemeConfigType, ProThemeToolsType } from './propsType';

package/es/ProThemeTools/index.js

@@ -1,35 +1,41 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import "antd/es/config-provider/style";
-import _ConfigProvider from "antd/es/config-provider";
-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";
-import _isEqual from "lodash/isEqual";
 var _excluded = ["size", "className", "cacheTime", "color", "mode", "iconFollowTheme", "prefixCls", "tableBorder", "tableStripe", "theme", "onChange"];
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable prefer-const */
-
+import { message } from 'antd';
 import { useEffect, useState } from 'react';
 import { usePrevious, useUpdateEffect, useToggle } from 'ahooks';
 import { ReactSVG } from 'react-svg';
+import { isEqual } from 'lodash';
 import classnames from 'classnames';
-import { getKebabCase, setThemes, setTableBorder, getMapKebabCase, getMapHumpCase } from './utils/index';
-import settingSvg from '../assets/setting.svg';
-import { ProTools } from './component';
-import locale from '../locale';
+import { getKebabCase, setThemes, setTableBorder, getMapKebabCase, getMapHumpCase, getAntd5ThemeConfig } from "./utils/index";
+import settingSvg from "../assets/setting.svg";
+import { ProTools } from "./component";
+import locale from "../locale";
+import { useTheme } from "./context/ThemeContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var defaultCacheTime = 1; // 配置保存时间为一天
+
 var defaultThemeConfig = {
   zauiBrand: '#006AFF',
+  // 主题颜色
   zauiText: '#343434',
   zauiFontSize: '14px',
   zauiFormAlign: 'left',
+  // 表单左对齐
   zauiFormRequiredBefore: 'none',
+  // 前面*display
   zauiFormRequiredAfter: 'inline',
+  // 后面*display
   zauiSize: 1,
+  // 间距倍数
   zauiSpaceSizeLg: '32px',
+  // 卡片行间距
   zauiSpaceSizeMd: '16px',
+  // 控件行间距
   zauiBigText: false,
   zauiBaseFontSize: '0px',
   zauiTableBorder: false,
@@ -56,6 +62,10 @@ var ProThemeTools = function ProThemeTools(_ref) {
     _useToggle2 = _slicedToArray(_useToggle, 2),
     visible = _useToggle2[0],
     toggle = _useToggle2[1].toggle;
+  var _useTheme = useTheme(),
+    updateLocalConfig = _useTheme.updateLocalConfig,
+    updateAntdConfig = _useTheme.updateAntdConfig,
+    updateCssVariables = _useTheme.updateCssVariables;
   var _useState = useState(_objectSpread(_objectSpread({}, defaultThemeConfig), getMapHumpCase(theme))),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
@@ -64,10 +74,23 @@ var ProThemeTools = function ProThemeTools(_ref) {
   var zauiBrand = state.zauiBrand,
     zauiStripe = state.zauiStripe,
     zauiTableBorder = state.zauiTableBorder;
+
   // 重置
   var onReset = function onReset() {
-    setState(_objectSpread(_objectSpread({}, state), defaultThemeConfig));
-    setThemes({
+    var resetConfig = _objectSpread(_objectSpread({}, state), defaultThemeConfig);
+    setState(resetConfig);
+
+    // 更新 Context
+    updateLocalConfig(resetConfig);
+
+    // 更新 antd 主题
+    var antdConfig = getAntd5ThemeConfig({
+      'zaui-brand': '#006AFF'
+    });
+    updateAntdConfig(antdConfig);
+
+    // 设置 CSS 变量
+    var cssVars = {
       'zaui-brand': '#006AFF',
       'zaui-text': '#343434',
       'zaui-form-required-after': 'inline',
@@ -80,8 +103,11 @@ var ProThemeTools = function ProThemeTools(_ref) {
       'zaui-big-text': false,
       'zaui-table-border': false,
       'zaui-stripe': true
-    });
+    };
+    setThemes(cssVars);
+    updateCssVariables(cssVars);
   };
+
   // 复制
   var onCopy = function onCopy() {
     var data = JSON.stringify(getMapKebabCase(state, '@'));
@@ -91,10 +117,11 @@ var ProThemeTools = function ProThemeTools(_ref) {
     input.select();
     if (document.execCommand('copy')) {
       document.execCommand('copy');
-      _message.success("".concat(locale.ProThemeTools.copySuccess));
+      message.success("".concat(locale.ProThemeTools.copySuccess));
     }
     document.body.removeChild(input);
   };
+
   // 首次从缓存中读取主题配置
   useEffect(function () {
     var themeConfig = localStorage.getItem('themeConfig');
@@ -102,10 +129,6 @@ var ProThemeTools = function ProThemeTools(_ref) {
     var startTime = curThemeConfig === null || curThemeConfig === void 0 ? void 0 : curThemeConfig.startTime;
     // 默认时间间隔
     var duration = (typeof cacheTime === 'number' ? cacheTime : defaultCacheTime) * 86400000;
-    // antd4以下版本不支持主题色的动态配置
-    if (!_ConfigProvider.config) {
-      return;
-    }
     if (cacheTime && startTime && new Date().getTime() - startTime < duration) {
       var _localThemeConfig;
       var localThemeConfig;
@@ -116,46 +139,54 @@ var ProThemeTools = function ProThemeTools(_ref) {
       }));
       setState(_objectSpread(_objectSpread({}, state), localThemeConfig));
       setThemes(cssVariables);
-      _ConfigProvider.config({
-        prefixCls: prefixCls,
-        theme: {
-          primaryColor: (_localThemeConfig = localThemeConfig) === null || _localThemeConfig === void 0 ? void 0 : _localThemeConfig.zauiBrand
-        }
+
+      // 更新 Context
+      updateLocalConfig(localThemeConfig);
+      updateCssVariables(cssVariables);
+
+      // 更新 antd 主题
+      var antdConfig = getAntd5ThemeConfig({
+        'zaui-brand': (_localThemeConfig = localThemeConfig) === null || _localThemeConfig === void 0 ? void 0 : _localThemeConfig.zauiBrand
       });
+      updateAntdConfig(antdConfig);
     } else {
-      setThemes(getMapKebabCase(state));
-      _ConfigProvider.config({
-        prefixCls: prefixCls,
-        theme: {
-          primaryColor: state === null || state === void 0 ? void 0 : state.zauiBrand
-        }
+      var cssVars = getMapKebabCase(state);
+      setThemes(cssVars);
+      updateCssVariables(cssVars);
+
+      // 更新 antd 主题
+      var _antdConfig = getAntd5ThemeConfig({
+        'zaui-brand': state === null || state === void 0 ? void 0 : state.zauiBrand
       });
+      updateAntdConfig(_antdConfig);
     }
   }, []);
+
   // 主题色动态切换
   useEffect(function () {
     if (visible && zauiBrand) {
-      // antd4以下版本不支持主题色的动态配置
-      if (!_ConfigProvider.config) {
-        return;
-      }
-      _ConfigProvider.config({
-        theme: {
-          primaryColor: zauiBrand
-        }
+      // 更新 antd 主题
+      var antdConfig = getAntd5ThemeConfig({
+        'zaui-brand': zauiBrand
       });
+      updateAntdConfig(antdConfig);
     }
-  }, [zauiBrand]);
+  }, [zauiBrand, visible]);
+
   // 斑马纹设置
   useEffect(function () {
-    setThemes({
+    var cssVar = {
       'zaui-table-strip-bg': zauiStripe ? '#fafafa' : '#ffffff'
-    });
+    };
+    setThemes(cssVar);
+    updateCssVariables(cssVar);
   }, [zauiStripe]);
+
   // 表格边框设置
   useEffect(function () {
     setTableBorder(zauiTableBorder);
   }, [zauiTableBorder]);
+
   // 主题配置缓存
   useEffect(function () {
     if (cacheTime) {
@@ -166,24 +197,39 @@ var ProThemeTools = function ProThemeTools(_ref) {
       localStorage.setItem('themeConfig', JSON.stringify(newThemeConfig));
     }
   }, [state, cacheTime]);
+
+  // 状态变化时同步到 Context
   useUpdateEffect(function () {
-    if (!_isEqual(state, previousState) && visible) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(state);
+    if (!isEqual(state, previousState) && visible) {
+      // 更新本地配置
+      updateLocalConfig(state);
+
+      // 更新 CSS 变量
+      var cssVars = getMapKebabCase(state);
+      setThemes(cssVars);
+      updateCssVariables(cssVars);
+
+      // 更新 antd 主题
+      var antdConfig = getAntd5ThemeConfig({
+        'zaui-brand': state.zauiBrand
+      });
+      updateAntdConfig(antdConfig);
+      onChange === null || onChange === void 0 || onChange(state);
     }
   }, [state]);
   var cls = classnames(_defineProperty({
     'pro-theme-tools': true,
     'pro-theme-tools-follow': iconFollowTheme
   }, className, className));
-  return _jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
-    children: [_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
       className: cls,
       onClick: toggle,
-      children: _jsx(ReactSVG, {
+      children: /*#__PURE__*/_jsx(ReactSVG, {
         className: "setting-icon",
         src: settingSvg
       })
-    }), _jsx(ProTools, {
+    }), /*#__PURE__*/_jsx(ProTools, {
       prefixCls: prefixCls,
       onReset: onReset,
       onClose: toggle,
@@ -204,4 +250,7 @@ ProThemeTools.defaultProps = {
   cacheTime: false
 };
 ProThemeTools.setThemes = setThemes;
-export default ProThemeTools;
+export default ProThemeTools;
+
+// 导出主题相关组件和类型
+export { ThemeProvider, useTheme } from "./context/ThemeContext";

package/es/ProThemeTools/style/index.less

@@ -1,5 +1,5 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
+/* @root-entry-name: 'default'; */
+/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 @import '../component/ProTools/style/index.less';
 
@@ -23,7 +23,7 @@
   }
 
   &.pro-theme-tools-follow {
-    background: var(--ant-primary-1);
+    background: var(--ant-primary-1, #e6f7ff);
     svg {
       color: var(--zaui-brand, #006aff);
     }