@zat-design/sisyphus-react 3.4.4 → 3.4.5-beta.1

package/es/ProForm/components/combination/ProModalSelect/index.js

@@ -22,7 +22,6 @@ var _excluded = ["value", "onChange", "disabled", "labelInValue", "fieldNames",
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SearchOutlined } from '@ant-design/icons';
 import { useMount, useSetState } from 'ahooks';
-import { useRequest as useUmiRequest } from 'umi';
 import { cloneDeep, debounce, isArray, isEqual, isFunction, omit } from 'lodash';
 import { ReactSVG } from 'react-svg';
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
@@ -127,17 +126,22 @@ var ProModalSelect = function ProModalSelect(props, ref) {
     form = _Form$useForm2[0];
   var selectedRows = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) || _selectedRows;
   var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || _selectedRowKeys;
-  var _useUmiRequest = useUmiRequest(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread(_objectSpread({}, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options), {}, {
+  var _useRequestList = useRequestList(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
+      withPagination: withPagination,
+      transformParams: transformParams,
+      transformResponse: transformResponse
+    }, _objectSpread(_objectSpread({}, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options), {}, {
       manual: true,
-      onSuccess: function onSuccess(data) {
-        var list = withPagination ? data === null || data === void 0 ? void 0 : data.list : data;
+      onSuccess: function onSuccess(res) {
+        var _res$data;
+        var list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.list : res === null || res === void 0 ? void 0 : res.data;
         setState({
           options: list
         });
       }
     })),
-    run = _useUmiRequest.run;
-  var _useRequestList = useRequestList(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
+    run = _useRequestList.run;
+  var _useRequestList2 = useRequestList(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, {
       withPagination: withPagination,
       transformParams: transformParams,
       transformResponse: transformResponse
@@ -145,13 +149,13 @@ var ProModalSelect = function ProModalSelect(props, ref) {
       manual: true,
       ready: ((useRequest === null || useRequest === void 0 ? void 0 : useRequest.initParams) || defaultOne) && !readOnly || visible
     }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options)),
-    data = _useRequestList.data,
-    loading = _useRequestList.loading,
-    pagination = _useRequestList.pagination,
-    onSearch = _useRequestList.onSearch,
-    onReset = _useRequestList.onReset,
-    runAsync = _useRequestList.runAsync,
-    mutate = _useRequestList.mutate;
+    data = _useRequestList2.data,
+    loading = _useRequestList2.loading,
+    pagination = _useRequestList2.pagination,
+    onSearch = _useRequestList2.onSearch,
+    onReset = _useRequestList2.onReset,
+    runAsync = _useRequestList2.runAsync,
+    mutate = _useRequestList2.mutate;
   var defaultOptionRender = function defaultOptionRender(rowData) {
     return rowData === null || rowData === void 0 ? void 0 : rowData[labelKey];
   };
@@ -423,7 +427,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   // 初始化回显，当传入initParams时，前端用来回险
   var getInitValues = /*#__PURE__*/function () {
     var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var _contentForm$getField, _useRequest$options2, _useRequest$options3, queryBean, page, params, res, _list, list, _res$data, _data2, nextSelectRowKeys;
+      var _contentForm$getField, _useRequest$options2, _useRequest$options3, queryBean, page, params, res, _list, list, _res$data2, _data2, nextSelectRowKeys;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -452,7 +456,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
               if (transformResponse) {
                 list = transformResponse(res === null || res === void 0 ? void 0 : res.data);
               } else {
-                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.list : res === null || res === void 0 ? void 0 : res.data;
+                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.list : res === null || res === void 0 ? void 0 : res.data;
               }
               _data2 = isMultiple ? list : (_list = list) === null || _list === void 0 ? void 0 : _list[0];
               if (_data2) {
@@ -489,7 +493,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
   var getDefaultOneValues = /*#__PURE__*/function () {
     var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
       var _useRequest$options4, _useRequest$options5;
-      var queryBean, page, params, res, _list2, list, _res$data2, _data3, nextSelectRowKeys;
+      var queryBean, page, params, res, _list2, list, _res$data3, _data3, nextSelectRowKeys;
       return _regeneratorRuntime().wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
@@ -511,7 +515,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
               if (transformResponse) {
                 list = transformResponse(res === null || res === void 0 ? void 0 : res.data);
               } else {
-                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.list : res === null || res === void 0 ? void 0 : res.data;
+                list = withPagination ? res === null || res === void 0 ? void 0 : (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3.list : res === null || res === void 0 ? void 0 : res.data;
               }
               _data3 = isMultiple ? list : (_list2 = list) === null || _list2 === void 0 ? void 0 : _list2[0];
               nextSelectRowKeys = isMultiple ? value : [value];
@@ -670,7 +674,7 @@ var ProModalSelect = function ProModalSelect(props, ref) {
         // 没有值的时候，初始化点击默认查询前五十条
         if (!value && isInit || !(options === null || options === void 0 ? void 0 : options.length)) {
           var _useRequest$options9;
-          var queryBean = useRequest === null || useRequest === void 0 ? void 0 : (_useRequest$options9 = useRequest.options) === null || _useRequest$options9 === void 0 ? void 0 : _useRequest$options9.defaultParams;
+          var queryBean = (useRequest === null || useRequest === void 0 ? void 0 : (_useRequest$options9 = useRequest.options) === null || _useRequest$options9 === void 0 ? void 0 : _useRequest$options9.defaultParams) || {};
           var params = withPagination ? {
             pageNum: 1,
             pageSize: 50,

package/es/ProForm/components/index.js

@@ -21,6 +21,7 @@ export { default as ProModalSelect } from './combination/ProModalSelect';
 export { default as ProTimeLimit } from './combination/ProTimeLimit';
 export { default as ProRangeLimit } from './combination/ProRangeLimit';
 export { default as Group } from './combination/Group';
+// export { default as GroupCopy } from './combination/GroupCopy';
 export { default as ProCollapse } from './combination/Container';
 export { default as Container } from './combination/Container';
 export { default as ProEnum } from '../../ProEnum';

package/es/ProForm/components/render/Render.js

@@ -155,9 +155,9 @@ var Render = function Render(props) {
   Object.assign(otherFormItemProps, transforms, {
     names: otherProps.names
   }, internalRule, {
-    required: typeof labelRequired === 'boolean' ? labelRequired : _required || (rules === null || rules === void 0 ? void 0 : rules.some(function (item) {
+    required: typeof labelRequired === 'boolean' ? labelRequired : _required || Array.isArray(rules) && (rules === null || rules === void 0 ? void 0 : rules.some(function (item) {
       return item === null || item === void 0 ? void 0 : item.required;
-    }))
+    })) || false
   }, otherProps.isView && !requiredOnView ? {
     required: false
   } : null, _objectSpread({}, isTrim(type, trim, useProConfig())), // 优先取传进来的，其次取ProConfigProvider配置的

package/es/ProForm/components/render/propsType.d.ts

@@ -52,7 +52,7 @@ interface ControlProps {
 /**
  * 扩展函数的参数
  */
-type FunctionArgs<Values, R = any> = (value: any, record: any, { form, index, namePath, option, selectedOptions, dateString, }: {
+export type FunctionArgs<Values, R = any> = (value: any, record: any, { form, index, namePath, option, selectedOptions, dateString, }: {
     form: FormInstance<Values>;
     index?: number;
     namePath?: NamePath;

package/es/ProIcon/config/index.d.ts

@@ -3,3 +3,17 @@ export declare const iconMap: {
     'text-cn': string;
     'text-en': string;
 }[];
+export declare const themeMap: {
+    '#006AFF': string[];
+    '#00BC70': string[];
+    '#FF8C16': string[];
+    '#A00F20': string[];
+    '#31AF96': string[];
+};
+export declare const themeFillMap: {
+    '#006AFF': string[];
+    '#00BC70': string[];
+    '#FF8C16': string[];
+    '#A00F20': string[];
+    '#31AF96': string[];
+};

package/es/ProIcon/config/index.js

@@ -254,4 +254,20 @@ export var iconMap = [{
   type: 'tiaozhengxuhao',
   'text-cn': '调整序号',
   'text-en': 'adjust order'
-}];
+}];
+// 渐变色icon预设
+export var themeMap = {
+  '#006AFF': ['#ADDDFF', '#5FB3D8', '#4181FF'],
+  '#00BC70': ['#FFFFFF', '#54DFA7', '#00BC70'],
+  '#FF8C16': ['#FFFFFF', '#FFA74E', '#FF8C17'],
+  '#A00F20': ['#FFFFFF', '#E47B7B', '#A00E20'],
+  '#31AF96': ['#5FD8C7', '#5FD8C7', '#31AF96']
+};
+// 双色icon预设
+export var themeFillMap = {
+  '#006AFF': ['none', '#87F1FC', 'black', '#4181FF'],
+  '#00BC70': ['none', '#05FFEC', 'black', '#00BC70'],
+  '#FF8C16': ['none', '#FED736', 'black', '#FF8C17'],
+  '#A00F20': ['none', '#FD8357', 'black', '#A00E20'],
+  '#31AF96': ['none', '#BBF392', 'black', '#31AF96']
+};

package/es/ProIcon/index.js

@@ -1,17 +1,25 @@
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["type", "onClick", "size", "color", "className", "style", "spin", "rotate", "theme", "disabled", "mode", "buttonProps", "children", "mapList"];
+var _excluded = ["type", "onClick", "size", "color", "className", "style", "spin", "rotate", "theme", "disabled", "mode", "buttonProps", "children", "mapList", "src", "actionMap"];
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useExternal } from 'ahooks';
 import classNames from 'classnames';
 import { uniqBy } from 'lodash';
+import { ReactSVG } from 'react-svg';
+import { useMemo } from 'react';
 import { useProConfig } from '../ProConfigProvider';
-import { iconMap } from './config';
+import { iconMap, themeMap, themeFillMap } from './config';
+import { recurseGetNodes } from './utils';
 import locale from '../locale';
 var ProIcon = function ProIcon(props) {
-  var config = useProConfig('ProIcon') || {};
+  var _useProConfig = useProConfig(),
+    state = _useProConfig.state;
+  var config = state.ProIcon,
+    antdTheme = state.theme;
   var _config = _objectSpread(_objectSpread({}, config), props !== null && props !== void 0 ? props : {});
   var _config$type = _config.type,
     type = _config$type === void 0 ? null : _config$type,
@@ -35,14 +43,17 @@ var ProIcon = function ProIcon(props) {
     children = _config.children,
     _config$mapList = _config.mapList,
     mapList = _config$mapList === void 0 ? [] : _config$mapList,
+    src = _config.src,
+    actionMap = _config.actionMap,
     reset = _objectWithoutProperties(_config, _excluded);
+  // 主题色
+  var _ref = antdTheme !== null && antdTheme !== void 0 ? antdTheme : {},
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? '#006AFF' : _ref$primaryColor;
   // 语言
   var language = locale.ProIcon.language;
   // 加载内部icon
-  var status = useExternal('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
-  if (status !== 'ready') {
-    return null;
-  }
+  useExternal('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
   var rotateStyle = rotate ? {
     msTransform: "rotate(".concat(rotate, "deg)"),
     transform: "rotate(".concat(rotate, "deg)")
@@ -64,6 +75,8 @@ var ProIcon = function ProIcon(props) {
   var mergedMapList = uniqBy(mapList.concat(iconMap), targetTextFill);
   var _type = type;
   var _text = children;
+  // svg图标对应文本
+  var iconText = '';
   var typeIsExistAndIncludeEnglish = _type && /[a-zA-Z]/.test(_type);
   // 模式为icon下，对传入的text进行指定语言-icon 映射
   if (isIconMode && !type) {
@@ -73,6 +86,7 @@ var ProIcon = function ProIcon(props) {
       });
       if (target) {
         _type = target === null || target === void 0 ? void 0 : target.type;
+        iconText = target[targetTextFill];
       }
     }
   }
@@ -87,27 +101,95 @@ var ProIcon = function ProIcon(props) {
       }
     }
   }
+  var svgProps = {
+    className: proIconClassNames,
+    fill: 'currentColor',
+    style: _objectSpread(_objectSpread({
+      width: size,
+      height: size
+    }, rotateStyle), style)
+  };
   var RenderIcon = _jsx("span", _objectSpread(_objectSpread({
     className: "anticon",
     style: {
       color: color
     }
   }, reset), {}, {
-    children: _jsx("svg", {
-      className: proIconClassNames,
-      "aria-hidden": "true",
-      onClick: onClick,
-      fill: "currentColor",
-      style: _objectSpread(_objectSpread({
-        width: size,
-        height: size
-      }, rotateStyle), style),
-      children: _jsx("use", {
-        xlinkHref: "#icon-".concat(_type)
-      })
+    children: _jsx(_Tooltip, {
+      title: iconText,
+      children: !src ? _jsx("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+        onClick: onClick,
+        "aria-hidden": "true",
+        children: _jsx("use", {
+          xlinkHref: "#icon-".concat(_type)
+        })
+      })) : _jsx(ReactSVG, _objectSpread(_objectSpread({}, svgProps), {}, {
+        // @ts-ignore
+        onClick: onClick,
+        "aria-hidden": "true",
+        src: src,
+        beforeInjection: function beforeInjection(svg) {
+          if (actionMap && svg) {
+            var _actionMap$themeMap, _actionMap$themeFillM, _actionMap$gradation, _actionMap$fill;
+            // 项目内置的四种主题匹配渐变色
+            var mergeThemeMap = _objectSpread(_objectSpread({}, themeMap), (_actionMap$themeMap = actionMap.themeMap) !== null && _actionMap$themeMap !== void 0 ? _actionMap$themeMap : {});
+            // 项目内置的四种双色匹配fill
+            var mergeFillThemeMap = _objectSpread(_objectSpread({}, themeFillMap), (_actionMap$themeFillM = actionMap.themeFillMap) !== null && _actionMap$themeFillM !== void 0 ? _actionMap$themeFillM : {});
+            var _gradList = mergeThemeMap[primaryColor];
+            var _fillList = mergeFillThemeMap[primaryColor];
+            // 渐变操作序列
+            var gradList = (_actionMap$gradation = actionMap === null || actionMap === void 0 ? void 0 : actionMap.gradation) !== null && _actionMap$gradation !== void 0 ? _actionMap$gradation : _gradList;
+            // 填充操作序列
+            var fillList = (_actionMap$fill = actionMap === null || actionMap === void 0 ? void 0 : actionMap.fill) !== null && _actionMap$fill !== void 0 ? _actionMap$fill : _fillList;
+            // 节点收集
+            var nodeMap = {
+              // 渐变色节点收集
+              gradation: [],
+              // 具有fill属性的节点收集
+              fill: []
+            };
+            // 目前只支持处理渐变及fill填充
+            var types = Reflect.ownKeys(nodeMap !== null && nodeMap !== void 0 ? nodeMap : {});
+            types.forEach(function (typeKey) {
+              recurseGetNodes(typeKey, svg, nodeMap[typeKey]);
+            });
+            if ((gradList === null || gradList === void 0 ? void 0 : gradList.length) > 0) {
+              nodeMap.gradation.forEach(function (item, index) {
+                // 下一步准备替换的
+                var nextStr = gradList[index];
+                // 属性原本的值
+                var originStr = item.getAttribute('stop-color');
+                if (nextStr && originStr !== nextStr) {
+                  item.setAttribute('stop-color', nextStr);
+                }
+              });
+            }
+            if ((fillList === null || fillList === void 0 ? void 0 : fillList.length) > 0) {
+              nodeMap.fill.forEach(function (item, index) {
+                // 默认接收的
+                var receiveStr = fillList[index];
+                // 下一步准备替换的
+                var nextFillStr = receiveStr === 'theme' ? primaryColor : receiveStr;
+                // 属性原本的值
+                var originFill = item.getAttribute('fill');
+                // 如果包含url(则是内链，不作替换处理
+                if (!(originFill && originFill.includes('url(')) && nextFillStr) {
+                  // 不同才替换
+                  if (originFill !== nextFillStr) {
+                    item.setAttribute('fill', nextFillStr);
+                  }
+                }
+              });
+            }
+          }
+        }
+      }))
     })
   }));
-  return !isExtendButtonMode ? RenderIcon : _jsx(_Button, _objectSpread(_objectSpread(_objectSpread({
+  var _RenderIcon = useMemo(function () {
+    return RenderIcon;
+  }, [primaryColor]);
+  return !isExtendButtonMode ? _RenderIcon : _jsx(_Button, _objectSpread(_objectSpread(_objectSpread({
     type: isIconMode ? 'text' : (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) || 'link',
     className: proIconClassNames,
     disabled: disabled,

package/es/ProIcon/propsTypes.d.ts

@@ -6,7 +6,21 @@ interface iconMap {
     'text-cn'?: string;
     'text-en'?: string;
 }
+interface themeMap {
+    [key: string]: string[];
+}
+interface actionMap {
+    themeMap?: themeMap;
+    themeFillMap?: themeMap;
+    gradation?: string[];
+    fill?: string[];
+}
 export interface ProIconProps {
+    /**
+     * @description        本地import引入
+     * @default            ""
+     */
+    src?: string;
     /**
      * @description       图标的名称
      * @default           -
@@ -75,5 +89,10 @@ export interface ProIconProps {
      * @default            项目内认默映射
      */
     mapList?: iconMap[];
+    /**
+     * @description        svg变更操作表 请到 ProThemeTools 主题配置查看示例
+     * @default
+     */
+    actionMap?: actionMap;
 }
 export {};

package/es/ProIcon/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const recurseGetNodes: (type: any, node: any, queue: any) => void;

package/es/ProIcon/utils/index.js

@@ -0,0 +1,23 @@
+export var recurseGetNodes = function recurseGetNodes(type, node, queue) {
+  switch (type) {
+    // 渐变
+    case 'gradation':
+      if (node.nodeName === 'stop' && node.getAttribute('stop-color')) {
+        queue.push(node);
+      }
+      break;
+    // 填充
+    case 'fill':
+      if (node.getAttribute && node.getAttribute('fill')) {
+        queue.push(node);
+      }
+      break;
+    default:
+      break;
+  }
+  if (node.childNodes) {
+    for (var i = 0; i < node.childNodes.length; i++) {
+      recurseGetNodes(type, node.childNodes[i], queue);
+    }
+  }
+};

package/es/ProLayout/components/ProCollapse/index.js

@@ -10,9 +10,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect } from 'react';
 import { CaretRightOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import { ReactSVG } from 'react-svg';
 import { isBoolean } from 'lodash';
 import foldSvg from '../../../assets/fold.svg';
+import ProIcon from '../../../ProIcon/index';
 var Panel = _Collapse.Panel;
 var ProCollapse = function ProCollapse(props) {
   var title = props.title,
@@ -77,8 +77,11 @@ var ProCollapse = function ProCollapse(props) {
         align: "center",
         children: [_jsx("div", {
           className: "pro-collapse-icon",
-          children: isBoolean(icon) ? _jsx(ReactSVG, {
-            src: foldSvg
+          children: isBoolean(icon) ? _jsx(ProIcon, {
+            src: foldSvg,
+            actionMap: {
+              fill: []
+            }
           }) : icon
         }), title]
       });

package/es/ProStep/components/Step/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState } from 'react';
 import { cloneDeep } from 'lodash';
-import { ReactSVG } from 'react-svg';
+import ProIcon from '../../../ProIcon/index';
 import catalogSvg from '../../../assets/catalog.svg';
 import Anchor from '../Anchor';
 import locale from '../../../locale';
@@ -59,10 +59,11 @@ export var Step = function Step(_ref) {
     onMouseLeave: handleMouseLeave,
     children: [_jsxs("div", {
       className: "step-menu",
-      children: [_jsx(ReactSVG, {
+      children: [_jsx(ProIcon, {
+        src: catalogSvg,
         className: "menu-icon",
-        src: catalogSvg
-      }), onOff && _jsx("div", {
+        actionMap: {}
+      }), true && _jsx("div", {
         children: locale === null || locale === void 0 ? void 0 : (_locale$ProStep = locale.ProStep) === null || _locale$ProStep === void 0 ? void 0 : _locale$ProStep.catalogue
       })]
     }), options.map(function (item) {

package/es/ProStep/style/index.less

@@ -27,6 +27,26 @@
     height: 48px;
     font-size: var(--zaui-font-size-lg, 16px);
     border-bottom: 1px solid var(--zaui-line, #dddddd);
+    > .anticon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 24px;
+      > .menu-icon {
+        width: auto !important;
+        height: auto !important;
+        font-size: var(--zaui-font-size-lg-title, 24px);
+        fill: var(--zaui-brand, #006aff);
+        > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 48px;
+          height: 24px;
+        }
+      }
+    }
 
     > .menu-icon {
       font-size: var(--zaui-font-size-lg-title, 24px);

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

@@ -46,6 +46,9 @@ var PrdTools = function PrdTools(_ref) {
     }, {
       color: '#A00F20',
       active: false
+    }, {
+      color: '#31AF96',
+      active: false
     }]),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
@@ -65,8 +68,17 @@ var PrdTools = function PrdTools(_ref) {
         };
       });
       setActive(newArray);
+      dispatch({
+        type: 'set',
+        payload: {
+          theme: {
+            primaryColor: zauiBrand
+          }
+        }
+      });
     }
   }, []);
+  console.log('我看看zg', active);
   return _jsxs(NewDrawer, {
     className: "pro-theme-prd-tools-drawer",
     width: 400,
@@ -105,6 +117,14 @@ var PrdTools = function PrdTools(_ref) {
               setThemes({
                 'zaui-brand': item.color
               });
+              dispatch({
+                type: 'set',
+                payload: {
+                  theme: {
+                    primaryColor: item.color
+                  }
+                }
+              });
             },
             children: item.active ? _jsx(CheckOutlined, {}) : null
           }, item.color);