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

package/lib/ProIcon/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -12,12 +13,20 @@ var _ahooks = require("ahooks");
 var _antd = require("antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
+var _reactSvg = require("react-svg");
+var _react = require("react");
 var _ProConfigProvider = require("../ProConfigProvider");
 var _config2 = require("./config");
+var _utils = require("./utils");
 var _locale = _interopRequireDefault(require("../locale"));
-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", "tooltip"];
 var ProIcon = function ProIcon(props) {
-  var config = (0, _ProConfigProvider.useProConfig)('ProIcon') || {};
+  var _window, _window2;
+  var _useProConfig = (0, _ProConfigProvider.useProConfig)(),
+    state = _useProConfig.state,
+    dispatch = _useProConfig.dispatch;
+  var config = state.ProIcon,
+    antdTheme = state.theme;
   var _config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), props !== null && props !== void 0 ? props : {});
   var _config$type = _config.type,
     type = _config$type === void 0 ? null : _config$type,
@@ -41,14 +50,24 @@ 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,
+    tooltip = _config.tooltip,
     reset = (0, _objectWithoutProperties2.default)(_config, _excluded);
+  // 主题色 primaryColor 用于单应用或处于组件库文档内 qiankunPrimaryColor用于主子应用
+  var _ref = antdTheme !== null && antdTheme !== void 0 ? antdTheme : {},
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? '#006AFF' : _ref$primaryColor,
+    _ref$qiankunPrimaryCo = _ref.qiankunPrimaryColor,
+    qiankunPrimaryColor = _ref$qiankunPrimaryCo === void 0 ? '#006AFF' : _ref$qiankunPrimaryCo;
+  // 文档内部就不用判断window.top !== window.self了
+  var isQiankun =
+  // @ts-ignore
+  ((_window = window) === null || _window === void 0 ? void 0 : _window.__POWERED_BY_QIANKUN__) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.isMicroApp);
   // 语言
   var language = _locale.default.ProIcon.language;
   // 加载内部icon
-  var status = (0, _ahooks.useExternal)('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
-  if (status !== 'ready') {
-    return null;
-  }
+  (0, _ahooks.useExternal)('https://at.alicdn.com/t/c/font_4063056_jmnz9g5uycp.js');
   var rotateStyle = rotate ? {
     msTransform: "rotate(".concat(rotate, "deg)"),
     transform: "rotate(".concat(rotate, "deg)")
@@ -60,6 +79,8 @@ var ProIcon = function ProIcon(props) {
     'pro-icon-btn': disabled
   });
   var _mode = mode || 'icon';
+  // 观察者实例
+  var observer;
   // 特殊情况，如果指定了type，并且没有接收到组件内的mode，那模式就是icon
   if (type && !props.mode) {
     _mode = 'icon';
@@ -70,6 +91,8 @@ var ProIcon = function ProIcon(props) {
   var mergedMapList = (0, _lodash.uniqBy)(mapList.concat(_config2.iconMap), targetTextFill);
   var _type = type;
   var _text = children;
+  // svg图标对应文本
+  var iconText = tooltip || '';
   var typeIsExistAndIncludeEnglish = _type && /[a-zA-Z]/.test(_type);
   // 模式为icon下，对传入的text进行指定语言-icon 映射
   if (isIconMode && !type) {
@@ -79,6 +102,7 @@ var ProIcon = function ProIcon(props) {
       });
       if (target) {
         _type = target === null || target === void 0 ? void 0 : target.type;
+        iconText = target[targetTextFill];
       }
     }
   }
@@ -93,33 +117,115 @@ var ProIcon = function ProIcon(props) {
       }
     }
   }
+  var svgProps = {
+    className: proIconClassNames,
+    fill: 'currentColor',
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      width: size,
+      height: size
+    }, rotateStyle), style)
+  };
   var RenderIcon = (0, _jsxRuntime.jsx)("span", (0, _objectSpread2.default)((0, _objectSpread2.default)({
     className: "anticon",
     style: {
       color: color
     }
   }, reset), {}, {
-    children: (0, _jsxRuntime.jsx)("svg", {
-      className: proIconClassNames,
-      "aria-hidden": "true",
-      onClick: onClick,
-      fill: "currentColor",
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        width: size,
-        height: size
-      }, rotateStyle), style),
-      children: (0, _jsxRuntime.jsx)("use", {
-        xlinkHref: "#icon-".concat(_type)
-      })
+    children: (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+      title: iconText,
+      children: !src ? (0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, svgProps), {}, {
+        onClick: onClick,
+        "aria-hidden": "true",
+        children: (0, _jsxRuntime.jsx)("use", {
+          xlinkHref: "#icon-".concat(_type)
+        })
+      })) : (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, svgProps), {}, {
+        // @ts-ignore
+        onClick: onClick,
+        "aria-hidden": "true",
+        src: src,
+        beforeInjection: function beforeInjection(svg) {
+          (0, _utils.onBeforeInjection)({
+            svg: svg,
+            actionMap: actionMap,
+            primaryColor: isQiankun ? qiankunPrimaryColor : primaryColor
+          });
+        }
+      }))
     })
   }));
-  return !isExtendButtonMode ? RenderIcon : (0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
-    type: isIconMode ? 'text' : (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) || 'link',
-    className: proIconClassNames,
-    disabled: disabled,
-    icon: isIconMode ? RenderIcon : null
-  }, reset), buttonProps), {}, {
-    children: _text
-  }));
+  var _RenderIcon = (0, _react.useMemo)(function () {
+    return RenderIcon;
+  }, [primaryColor, qiankunPrimaryColor]);
+  (0, _react.useEffect)(function () {
+    // 处于主子应用情况下才会执行下方逻辑，主题色的变更以主框架的为准
+    if (actionMap && isQiankun) {
+      observer = new MutationObserver(function (mutationsList) {
+        var targetEntries = mutationsList[0];
+        if (targetEntries) {
+          if (targetEntries && targetEntries.target) {
+            var _Object$values, _Object$values$find, _Object$values$find$v3, _targetEntries$target, _targetEntries$target2;
+            var _Object$values$find$v = // @ts-ignore
+              (_Object$values = Object.values((_targetEntries$target = targetEntries === null || targetEntries === void 0 ? void 0 : (_targetEntries$target2 = targetEntries.target) === null || _targetEntries$target2 === void 0 ? void 0 : _targetEntries$target2.attributes) !== null && _targetEntries$target !== void 0 ? _targetEntries$target : {})) === null || _Object$values === void 0 ? void 0 : (_Object$values$find = _Object$values.find(function (item) {
+                return item.nodeName === 'style';
+              })
+              // @ts-ignore
+              ) === null || _Object$values$find === void 0 ? void 0 : (_Object$values$find$v3 = _Object$values$find.value) === null || _Object$values$find$v3 === void 0 ? void 0 : _Object$values$find$v3.match(/--zaui-brand:(.*?);/),
+              _Object$values$find$v2 = (0, _slicedToArray2.default)(_Object$values$find$v, 2),
+              label = _Object$values$find$v2[0],
+              value = _Object$values$find$v2[1];
+            if (label && value) {
+              if (qiankunPrimaryColor !== value) {
+                dispatch({
+                  type: 'set',
+                  payload: {
+                    theme: {
+                      primaryColor: primaryColor,
+                      qiankunPrimaryColor: value === null || value === void 0 ? void 0 : value.trim()
+                    }
+                  }
+                });
+              }
+            }
+          }
+        }
+      });
+      var zaAccessibilityTarget = document.documentElement;
+      if (window.parent === window) {
+        // 在最顶层的window环境中，可以直接使用document
+        zaAccessibilityTarget = document.documentElement;
+      } else {
+        // 向上遍历直到找到主应用的window
+        var currentWindow = window;
+        while (currentWindow.parent !== currentWindow) {
+          // @ts-ignore
+          currentWindow = currentWindow.parent;
+        }
+        zaAccessibilityTarget = currentWindow.document.documentElement;
+      }
+      observer.observe(zaAccessibilityTarget, {
+        attributes: true,
+        attributeFilter: ['style']
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+  return !isExtendButtonMode ? _RenderIcon : (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    title: tooltip,
+    children: (0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+      type: isIconMode ? 'text' : (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) || 'link',
+      className: proIconClassNames,
+      disabled: disabled,
+      icon: isIconMode ? RenderIcon : null
+    }, reset), buttonProps), {}, {
+      children: _text
+    }))
+  });
 };
 var _default = exports.default = ProIcon;

package/lib/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           -
@@ -40,6 +54,11 @@ export interface ProIconProps {
      * @default           false
      */
     disabled?: boolean;
+    /**
+     * @description      提示
+     * @default           -
+     */
+    tooltip?: string | React.ReactNode;
     /**
      * @description      是否跟随主题色
      * @default           false
@@ -75,5 +94,10 @@ export interface ProIconProps {
      * @default            项目内认默映射
      */
     mapList?: iconMap[];
+    /**
+     * @description        svg变更操作表 请到 ProThemeTools 主题配置查看示例
+     * @default
+     */
+    actionMap?: actionMap;
 }
 export {};

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

@@ -0,0 +1,6 @@
+export declare const recurseGetNodes: (type: any, node: any, queue: any) => void;
+export declare const onBeforeInjection: ({ svg, actionMap, primaryColor }: {
+    svg: any;
+    actionMap: any;
+    primaryColor: any;
+}) => void;

package/lib/ProIcon/utils/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.recurseGetNodes = exports.onBeforeInjection = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _config = require("../config");
+var recurseGetNodes = exports.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);
+    }
+  }
+};
+var onBeforeInjection = exports.onBeforeInjection = function onBeforeInjection(_ref) {
+  var svg = _ref.svg,
+    actionMap = _ref.actionMap,
+    primaryColor = _ref.primaryColor;
+  if (actionMap && svg) {
+    var _actionMap$themeMap, _actionMap$themeFillM, _actionMap$gradation, _actionMap$fill;
+    // 项目内置的四种主题匹配渐变色
+    var mergeThemeMap = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _config.themeMap), (_actionMap$themeMap = actionMap.themeMap) !== null && _actionMap$themeMap !== void 0 ? _actionMap$themeMap : {});
+    // 项目内置的四种双色匹配fill
+    var mergeFillThemeMap = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _config.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);
+          }
+        }
+      });
+    }
+  }
+};

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

@@ -12,9 +12,9 @@ var _react = require("react");
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactSvg = require("react-svg");
 var _lodash = require("lodash");
 var _fold = _interopRequireDefault(require("../../../assets/fold.svg"));
+var _index = _interopRequireDefault(require("../../../ProIcon/index"));
 var Panel = _antd.Collapse.Panel;
 var ProCollapse = function ProCollapse(props) {
   var title = props.title,
@@ -79,8 +79,11 @@ var ProCollapse = function ProCollapse(props) {
         align: "center",
         children: [(0, _jsxRuntime.jsx)("div", {
           className: "pro-collapse-icon",
-          children: (0, _lodash.isBoolean)(icon) ? (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-            src: _fold.default
+          children: (0, _lodash.isBoolean)(icon) ? (0, _jsxRuntime.jsx)(_index.default, {
+            src: _fold.default,
+            actionMap: {
+              fill: []
+            }
           }) : icon
         }), title]
       });

package/lib/ProLayout/components/ProCollapse/style/index.less

@@ -16,7 +16,7 @@
     }
     .pro-collapse-level2{
       .@{ant-prefix}-collapse-header {
-        display: block !important;
+        display: flex !important;
       }
     }
   }

package/lib/ProSelect/index.js

@@ -240,7 +240,7 @@ var ProSelect = exports.ProSelect = function ProSelect(props, ref) {
       if (!(0, _lodash.isObject)(value)) {
         return undefined;
       }
-      return value === null || value === void 0 ? void 0 : value[code];
+      return (value === null || value === void 0 ? void 0 : value[code]) || (value === null || value === void 0 ? void 0 : value.value);
     }
     if (labelInValue && selectProps.mode) {
       // 对传入的值做一些基础判断

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

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
-var _reactSvg = require("react-svg");
+var _index = _interopRequireDefault(require("../../../ProIcon/index"));
 var _catalog = _interopRequireDefault(require("../../../assets/catalog.svg"));
 var _Anchor = _interopRequireDefault(require("../Anchor"));
 var _locale = _interopRequireDefault(require("../../../locale"));
@@ -67,10 +67,11 @@ var Step = exports.Step = function Step(_ref) {
     onMouseLeave: handleMouseLeave,
     children: [(0, _jsxRuntime.jsxs)("div", {
       className: "step-menu",
-      children: [(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+      children: [(0, _jsxRuntime.jsx)(_index.default, {
+        src: _catalog.default,
         className: "menu-icon",
-        src: _catalog.default
-      }), onOff && (0, _jsxRuntime.jsx)("div", {
+        actionMap: {}
+      }), true && (0, _jsxRuntime.jsx)("div", {
         children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProStep = _locale.default.ProStep) === null || _locale$ProStep === void 0 ? void 0 : _locale$ProStep.catalogue
       })]
     }), options.map(function (item) {

package/lib/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/lib/ProTable/utils.js

@@ -276,19 +276,22 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
-      var renderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProAddressBar, {
+      var renderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
         isView: true,
+        mode: "address",
         code: code,
         value: realValue
       });
-      var originalRenderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProAddressBar, {
+      var originalRenderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
         isView: true,
+        mode: "address",
         code: code,
         value: originalRealValue
       });
-      return (0, _jsxRuntime.jsx)(_ProForm.default.ProAddressBar, {
+      return (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
         className: className,
         isView: true,
+        mode: "address",
         code: code,
         value: realValue,
         tooltip: originalValue !== undefined ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

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

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

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

@@ -28,12 +28,10 @@ var PrdTools = function PrdTools(_ref) {
     open = _ref.open,
     state = _ref.state,
     tableBorder = _ref.tableBorder,
-    tableStripe = _ref.tableStripe,
-    prefixCls = _ref.prefixCls;
+    tableStripe = _ref.tableStripe;
   var _useProConfig = (0, _ProConfigProvider.useProConfig)(),
     config = _useProConfig.state,
     dispatch = _useProConfig.dispatch;
-  var ProForm = config.ProForm;
   var _useState = (0, _react.useState)([{
       color: '#006AFF',
       active: true
@@ -46,6 +44,9 @@ var PrdTools = function PrdTools(_ref) {
     }, {
       color: '#A00F20',
       active: false
+    }, {
+      color: '#31AF96',
+      active: false
     }]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     active = _useState2[0],
@@ -57,6 +58,7 @@ var PrdTools = function PrdTools(_ref) {
       _ref2$zauiBrand = _ref2.zauiBrand,
       zauiBrand = _ref2$zauiBrand === void 0 ? '#006AFF' : _ref2$zauiBrand;
     if (zauiBrand) {
+      var _config$theme;
       var newArray = active.map(function (activeItem) {
         activeItem.active = false;
         return {
@@ -65,6 +67,15 @@ var PrdTools = function PrdTools(_ref) {
         };
       });
       setActive(newArray);
+      dispatch({
+        type: 'set',
+        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
+          }
+        }
+      });
     }
   }, []);
   return (0, _jsxRuntime.jsxs)(NewDrawer, {
@@ -105,6 +116,15 @@ var PrdTools = function PrdTools(_ref) {
               (0, _index.setThemes)({
                 'zaui-brand': item.color
               });
+              dispatch({
+                type: 'set',
+                payload: {
+                  theme: {
+                    primaryColor: item.color,
+                    qiankunPrimaryColor: item.color
+                  }
+                }
+              });
             },
             children: item.active ? (0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}) : null
           }, item.color);
@@ -151,8 +171,14 @@ var PrdTools = function PrdTools(_ref) {
       }), (0, _jsxRuntime.jsx)("div", {
         className: "pro-theme-tools-item",
         children: (0, _jsxRuntime.jsxs)(_antd.Radio.Group, {
-          value: ProForm === null || ProForm === void 0 ? void 0 : ProForm.labelAlign,
+          value: state.zauiFormAlign,
           onChange: function onChange(e) {
+            setState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+              zauiFormAlign: e.target.value
+            }));
+            (0, _index.setThemes)({
+              'zaui-form-align': e.target.value
+            });
             dispatch({
               type: 'setWithLocal',
               payload: {