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

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

@@ -16,8 +16,7 @@ import { Props as TimePickerProps } from '../base/TimePicker';
 import { Props as SwitchProps } from '../base/Switch';
 import { Props as SwitchCheckboxProps } from '../base/SwitchCheckbox';
 import { Props as TextAreaProps } from '../base/TextArea';
-import { Props as ProCascaderProps } from '../base/ProCascader';
-import { AddressProps } from '../combination/ProAddressBar/propsType';
+import { ProCascaderProps } from '../combination/ProCascader/propsType';
 import { ProCombinationProps } from '../combination/ProCombination/propsType';
 import { ProModalSelectPropsType as ProModalSelectProps } from '../combination/ProModalSelect/propsType';
 import { ProNumberRangeProps } from '../combination/ProNumberRange/propsType';
@@ -52,7 +51,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;
@@ -123,8 +122,8 @@ export type ColumnPropsMap<Values = any, T = 'ProForm'> = {
     type?: 'TextArea';
     fieldProps?: FieldProps<TextAreaProps, Values, T>;
 } | {
-    type?: 'ProAddressBar';
-    fieldProps?: FieldProps<AddressProps, Values, T>;
+    type?: 'ProCascader';
+    fieldProps?: FieldProps<ProCascaderProps, Values, T>;
 } | {
     type?: 'ProCombination';
     fieldProps?: FieldProps<ProCombinationProps, Values, T>;
@@ -155,9 +154,6 @@ export type ColumnPropsMap<Values = any, T = 'ProForm'> = {
 } | {
     type?: 'ProUpload';
     fieldProps?: FieldProps<ProUploadProps, Values, T>;
-} | {
-    type?: 'ProCascader';
-    fieldProps?: FieldProps<ProCascaderProps<any, any[], any>, Values, T>;
 } | {
     type?: 'ProTree';
     fieldProps?: FieldProps<ProTreeProps, Values, T>;

package/es/ProForm/index.js

@@ -18,7 +18,7 @@ import { DoubleLeftOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { isObject, isString, merge } from 'lodash';
-import { FormFooter, InputRange, ProAddress, ProAddressBar, ProCertNo, ProCertValidity, ProCombination, ProModalSelect, ProNumberRange, ProRangeBox, ProTimeLimit, transferAddressInfoToRegion, ProUpload, ProTreeModal, ProTree, EnumSelect } from './components';
+import { FormFooter, InputRange, ProAddress, ProCascader, ProCertNo, ProCertValidity, ProCombination, ProModalSelect, ProNumberRange, ProRangeBox, ProTimeLimit, transferAddressInfoToRegion, ProUpload, ProTreeModal, ProTree, EnumSelect } from './components';
 import RenderFields from './components/render/RenderFields';
 import { useProConfig, useContextForms } from '../ProConfigProvider';
 import { getLayout, splitNameStr, useControlled, initialValuesToNames } from './utils/index';
@@ -313,7 +313,7 @@ ProFormForward.Provider = ProFormProvider; // 包装Provider
 ProFormForward.useFieldProps = useFieldProps; // 获取每个字段的其他参数  -otherProps
 ProFormForward.useContextForms = useContextForms; // 获取 ProConfigProvider中的表单实例map
 // 内置组合
-ProFormForward.ProAddressBar = ProAddressBar;
+ProFormForward.ProCascader = ProCascader;
 ProFormForward.ProCombination = ProCombination;
 ProFormForward.ProNumberRange = ProNumberRange;
 ProFormForward.ProModalSelect = ProModalSelect;

package/es/ProForm/style/index.less

@@ -4,7 +4,7 @@
 @import '../components/base/TextArea/index.less';
 @import '../components/combination/FormList/style/index.less';
 @import '../components/combination/ProTimeLimit/style/index.less';
-@import '../components/combination/ProAddressBar/style/index.less';
+@import '../components/combination/ProCascader/style/index.less';
 @import '../components/combination/ProNumberRange/style/index.less';
 @import '../components/combination/ProModalSelect/style/index.less';
 @import '../components/combination/Group/style/index.less';

package/es/ProForm/utils/index.js

@@ -43,7 +43,7 @@ export var useControlled = function useControlled(props) {
 export var isSelect = function isSelect(props) {
   var dataSource = props.dataSource,
     type = props.type;
-  return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || ['Select', 'ProSelect', 'ProEnum', 'DatePicker', 'RangePicker', 'ProAddressBar', 'ProTimeLimit', 'ProModalSelect', 'ProTreeModal', 'ProUpload', 'TimePicker'].includes(type);
+  return (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || ['Select', 'ProSelect', 'ProEnum', 'DatePicker', 'RangePicker', 'ProCascader', 'ProTimeLimit', 'ProModalSelect', 'ProTreeModal', 'ProUpload', 'TimePicker'].includes(type);
 };
 /**
  * Input TextArea 移除前后空格

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,28 @@
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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", "tooltip"];
 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 { useEffect, useMemo } from 'react';
 import { useProConfig } from '../ProConfigProvider';
 import { iconMap } from './config';
+import { onBeforeInjection } from './utils';
 import locale from '../locale';
 var ProIcon = function ProIcon(props) {
-  var config = useProConfig('ProIcon') || {};
+  var _window, _window2;
+  var _useProConfig = useProConfig(),
+    state = _useProConfig.state,
+    dispatch = _useProConfig.dispatch;
+  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 +46,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 = _objectWithoutProperties(_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.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)")
@@ -54,6 +75,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';
@@ -64,6 +87,8 @@ var ProIcon = function ProIcon(props) {
   var mergedMapList = uniqBy(mapList.concat(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) {
@@ -73,6 +98,7 @@ var ProIcon = function ProIcon(props) {
       });
       if (target) {
         _type = target === null || target === void 0 ? void 0 : target.type;
+        iconText = target[targetTextFill];
       }
     }
   }
@@ -87,33 +113,115 @@ 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) {
+          onBeforeInjection({
+            svg: svg,
+            actionMap: actionMap,
+            primaryColor: isQiankun ? qiankunPrimaryColor : 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,
-    icon: isIconMode ? RenderIcon : null
-  }, reset), buttonProps), {}, {
-    children: _text
-  }));
+  var _RenderIcon = useMemo(function () {
+    return RenderIcon;
+  }, [primaryColor, qiankunPrimaryColor]);
+  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 = _slicedToArray(_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']
+      });
+    }
+  }, []);
+  useEffect(function () {
+    return function () {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+  return !isExtendButtonMode ? _RenderIcon : _jsx(_Tooltip, {
+    title: tooltip,
+    children: _jsx(_Button, _objectSpread(_objectSpread(_objectSpread({
+      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
+    }))
+  });
 };
 export default ProIcon;

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           -
@@ -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/es/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/es/ProIcon/utils/index.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { themeMap, themeFillMap } from '../config';
+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);
+    }
+  }
+};
+export var 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 = _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);
+          }
+        }
+      });
+    }
+  }
+};

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/ProLayout/components/ProCollapse/style/index.less

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

package/es/ProSelect/index.js

@@ -239,7 +239,7 @@ export var ProSelect = function ProSelect(props, ref) {
       if (!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/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/ProTable/utils.js

@@ -269,19 +269,22 @@ export var formatColumn = function formatColumn(column, originalObj, dataSourceO
         'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
-      var renderValue = _jsx(ProForm.ProAddressBar, {
+      var renderValue = _jsx(ProForm.ProCascader, {
         isView: true,
+        mode: "address",
         code: code,
         value: realValue
       });
-      var originalRenderValue = _jsx(ProForm.ProAddressBar, {
+      var originalRenderValue = _jsx(ProForm.ProCascader, {
         isView: true,
+        mode: "address",
         code: code,
         value: originalRealValue
       });
-      return _jsx(ProForm.ProAddressBar, {
+      return _jsx(ProForm.ProCascader, {
         className: className,
         isView: true,
+        mode: "address",
         code: code,
         value: realValue,
         tooltip: originalValue !== undefined ? _jsxs(_Fragment, {

package/es/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;