@chaoswise/ui 2.3.2 → 2.3.4

package/lib/BasicLayout/index.js

@@ -4,7 +4,7 @@ import _ErrorBoundary from "@chaoswise/ui/lib/ErrorBoundary";
 import "@chaoswise/ui/lib/Header/index.less";
 import _Header from "@chaoswise/ui/lib/Header";
 import _Layout from "@chaoswise/ui/lib/Antd/Layout";
-var _excluded = ["logo", "headerTitle", "headerExtra", "showHome", "onClickHome", "showTopNavigation", "topNavigation", "topNavigationClassName", "topNavigationTrigger", "onClickTopNavigation", "siderMenu", "children", "siderWidth", "siderCollapsedWidth", "collapsed", "onCollapse", "showHead", "showBreadcrumb", "showBack", "onClickBack", "backNavigationTitle", "backIcon", "showSider", "breadcrumbOptions", "menuOptions", "contentClassName", "currentPath", "className", "version", "versionTooltip", "customContent", "allProductsTitle", "logoText", "localeSwitcherOption", "messageOption", "documentOption", "userSetingOption", "logoSize", "renderSetting", "showMessage", "homeIcon", "contentOption", "ErrorBoundary", "onPassWidth"];
+var _excluded = ["logo", "headerTitle", "headerExtra", "showHome", "onClickHome", "showTopNavigation", "topNavigation", "topNavigationClassName", "topNavigationTrigger", "onClickTopNavigation", "siderMenu", "children", "siderWidth", "siderCollapsedWidth", "collapsed", "onCollapse", "showHead", "showBreadcrumb", "showBack", "onClickBack", "backNavigationTitle", "backIcon", "showSider", "breadcrumbOptions", "menuOptions", "contentClassName", "currentPath", "className", "version", "versionTooltip", "customContent", "allProductsTitle", "logoText", "localeSwitcherOption", "messageOption", "documentOption", "userSetingOption", "logoSize", "renderSetting", "showMessage", "homeIcon", "contentOption", "ErrorBoundary", "onPassWidth", "topNavigationOption"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -93,6 +93,8 @@ var BasicLayout = function BasicLayout(_ref) {
     ErrorBoundary = _ref$ErrorBoundary === void 0 ? true : _ref$ErrorBoundary,
     _ref$onPassWidth = _ref.onPassWidth,
     onPassWidth = _ref$onPassWidth === void 0 ? function () {} : _ref$onPassWidth,
+    _ref$topNavigationOpt = _ref.topNavigationOption,
+    topNavigationOption = _ref$topNavigationOpt === void 0 ? {} : _ref$topNavigationOpt,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useConfigContext = useConfigContext(),
     getPrefixCls = _useConfigContext.getPrefixCls;
@@ -271,7 +273,8 @@ var BasicLayout = function BasicLayout(_ref) {
     documentOption: documentOption,
     userSetingOption: userSetingOption,
     showMessage: showMessage,
-    homeIcon: homeIcon
+    homeIcon: homeIcon,
+    topNavigationOption: topNavigationOption
   })), specialContent && /*#__PURE__*/React.createElement("div", {
     className: classnames(specialContentClassName)
   }, specialContent), /*#__PURE__*/React.createElement(_Layout, {
@@ -497,7 +500,17 @@ BasicLayout.propTypes = {
   /**
    * 左侧菜单展开宽度值
    */
-  onPassWidth: PropTypes.func
+  onPassWidth: PropTypes.func,
+  /**
+   * 顶部导航配置(主要针对unfold类型)：{
+   *  topNavigationType: PropTypes.oneOf(["fold", "unfold"]), // 默认为fold，fold会将所有产品折叠收纳，unfold会将所有产品平铺
+   *  activeKey: PropTypes.string, // 受控的活跃的key
+   *  unfoldMaxCount: PropTypes.number // 默认值为4，topNavigationType为unfold类型时，超过unfoldMaxCount数目将会展示到更多中
+   *  moreOverlayClassName: PropTypes.string // 更多浮层类名
+   *  topNavigationWrapperClassName: PropTypes.string // 导航外壳容器类名
+   * }
+   */
+  topNavigationOption: PropTypes.object
 };
 BasicLayout.Footer = Footer;
 export default BasicLayout;

package/lib/CWRangePicker/Refresh/index.js

@@ -39,7 +39,6 @@ var Refresh = /*#__PURE__*/forwardRef(function (props, ref) {
     setRecordDateValue = props.setRecordDateValue,
     onChange = props.onChange,
     value = props.value,
-    isAutoRefresh = props.isAutoRefresh,
     setIsAutoRefresh = props.setIsAutoRefresh,
     refreshOption = props.refreshOption,
     isHasDate = props.isHasDate,
@@ -88,7 +87,7 @@ var Refresh = /*#__PURE__*/forwardRef(function (props, ref) {
   // 自动刷新
   var onAutoRefresh = function onAutoRefresh() {
     setBackTooltipVisible(false);
-    onClickAutoRefresh(!isAutoRefresh);
+    onClickAutoRefresh(!enableAutoRefresh);
     isClickAutoRefresh.current = true;
     if (isHasDate) {
       var values = recordDateValue.value,
@@ -154,7 +153,7 @@ var Refresh = /*#__PURE__*/forwardRef(function (props, ref) {
     title: localeObj["refresh"]
   }, /*#__PURE__*/React.createElement(_Button, {
     onClick: onRefresh,
-    disabled: isDisabledRefresh
+    disabled: isDisabledRefresh || !enableAutoRefresh
   }, /*#__PURE__*/React.createElement(Refresh1Svg, null))), showAutoRefresh && /*#__PURE__*/React.createElement(_Tooltip, {
     title: localeObj["autoRefresh"]
   }, /*#__PURE__*/React.createElement(_Button, {

package/lib/CWRangePicker/TimeSpan/index.js

@@ -24,7 +24,6 @@ var TimeSpan = function TimeSpan(props) {
     isHasDate = props.isHasDate,
     onRecover = props.onRecover,
     timeSpanOption = props.timeSpanOption,
-    isAutoRefresh = props.isAutoRefresh,
     forwardTooltipVisible = props.forwardTooltipVisible,
     setForwardTooltipVisible = props.setForwardTooltipVisible,
     backTooltipVisible = props.backTooltipVisible,

package/lib/CWRangePicker/index.js

@@ -71,7 +71,9 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$format = props.format,
     format = _props$format === void 0 ? "YYYY/MM/DD HH:mm:ss" : _props$format,
     forceRenderTitle = props.forceRenderTitle,
-    open = props.open;
+    open = props.open,
+    _props$rangePickerFor = props.rangePickerFormat,
+    rangePickerFormat = _props$rangePickerFor === void 0 ? "YYYY/MM/DD" : _props$rangePickerFor;
   var _ConfigProvider$useLo = _ConfigProvider.useLocale(),
     _ConfigProvider$useLo2 = _ConfigProvider$useLo.locale,
     locale = _ConfigProvider$useLo2 === void 0 ? "zh" : _ConfigProvider$useLo2;
@@ -82,7 +84,11 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     onAutoRefreshChange = _refreshOption$onAuto2 === void 0 ? function () {} : _refreshOption$onAuto2,
     _refreshOption$delay = refreshOption.delay,
     delay = _refreshOption$delay === void 0 ? 5000 : _refreshOption$delay,
-    openAutoRefresh = refreshOption.openAutoRefresh;
+    openAutoRefresh = refreshOption.openAutoRefresh,
+    _refreshOption$showAu = refreshOption.showAutoRefresh,
+    showAutoRefresh = _refreshOption$showAu === void 0 ? true : _refreshOption$showAu,
+    _refreshOption$isRece = refreshOption.isRecentlyOpenRefresh,
+    isRecentlyOpenRefresh = _refreshOption$isRece === void 0 ? true : _refreshOption$isRece;
   var _menuOption$showCalen = menuOption.showCalendar,
     showCalendar = _menuOption$showCalen === void 0 ? true : _menuOption$showCalen,
     _menuOption$exceedSho = menuOption.exceedShowInMore,
@@ -156,6 +162,10 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputRef = useRef(null);
   // 含有刷新组件暴露的方法
   var refreshRef = useRef(null);
+  var _useState21 = useState([]),
+    _useState22 = _slicedToArray(_useState21, 2),
+    rangePickerValue = _useState22[0],
+    setRangePickerValue = _useState22[1];
   // 组件内部方法抛出
   useImperativeHandle(ref, function () {
     var _refreshRef$current;
@@ -220,40 +230,41 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       _judgeType4 = _slicedToArray(_judgeType3, 1),
       isRule = _judgeType4[0];
     var isHasDate = !isRule && !recordDateValue.value ? false : true;
+    var _isAutoRefresh = enableAutoRefresh;
     if (isHasDate) {
-      if (openAutoRefresh !== undefined) {
+      if (!isRecentlyOpenRefresh) {
         if (!isRule) {
-          if (openAutoRefresh) {
+          if (enableAutoRefresh) {
             onAutoRefreshChange(false);
+            _isAutoRefresh = false;
           }
         } else {
           if (isRule && isClickAutoRefresh.current) {
-            onAutoRefreshChange(true);
+            if (!enableAutoRefresh) {
+              onAutoRefreshChange(true);
+              _isAutoRefresh = true;
+            }
           }
         }
         isClickAutoRefresh.current = false;
       } else {
         if (isRule) {
-          if (!isAutoRefresh) {
+          if (!enableAutoRefresh) {
             onAutoRefreshChange(true);
+            _isAutoRefresh = true;
           }
         } else {
-          if (isAutoRefresh) {
+          if (enableAutoRefresh) {
             onAutoRefreshChange(false);
+            _isAutoRefresh = false;
           }
         }
       }
-      setIsAutoRefresh(function (pre) {
-        if (isRule) {
-          return true;
-        } else {
-          return false;
-        }
-      });
+      setIsAutoRefresh(_isAutoRefresh);
     } else {
       isClickAutoRefresh.current = false;
     }
-  }, [recordDateValue, isAutoRefresh, openAutoRefresh]);
+  }, [recordDateValue, isRecentlyOpenRefresh]);
   useEffect(function () {
     var values = recordDateValue.value;
     var _judgeType5 = judgeType(recordDateValue),
@@ -261,7 +272,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       isRule = _judgeType6[0],
       captureUnit = _judgeType6[1],
       recordUnit = _judgeType6[2];
-    if (enableAutoRefresh && isRule) {
+    if (enableAutoRefresh && isRule && showAutoRefresh) {
       timeRef.current = setInterval(function () {
         var newValue = _objectSpread(_objectSpread({}, recordDateValue), {}, {
           timeDomain: recordUnit,
@@ -273,7 +284,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         onAutoRefresh(newValue);
       }, delay);
     }
-    if (enableAutoRefresh && !isRule && !values) {
+    if (enableAutoRefresh && !isRule && !values && showAutoRefresh) {
       timeRef.current = setInterval(function () {
         onAutoRefresh(recordDateValue);
       }, delay);
@@ -281,14 +292,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     return function () {
       clearInterval(timeRef.current);
     };
-  }, [enableAutoRefresh, recordDateValue, delay]);
-  // 点击空白处日历切换
-  useEffect(function () {
-    document.addEventListener("click", clickBody);
-    return function () {
-      document.removeEventListener("click", clickBody);
-    };
-  }, []);
+  }, [enableAutoRefresh, recordDateValue, delay, showAutoRefresh]);
   // 日期是否存在
   var _useMemo = useMemo(function () {
       // 不符合最近时间格式和没有日期数据返回false
@@ -313,6 +317,16 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     isHasDate = _useMemo2[0],
     _defaultValue = _useMemo2[1],
     isRightDisabled = _useMemo2[2];
+  // 点击空白处日历切换
+  useEffect(function () {
+    document.addEventListener("click", clickBody);
+    return function () {
+      document.removeEventListener("click", clickBody);
+    };
+  }, [_defaultValue]);
+  useEffect(function () {
+    setRangePickerValue(_defaultValue);
+  }, [_defaultValue]);
   // 重组数据源
   var regroupDataSource = useMemo(function () {
     if (exceedShowInMore) {
@@ -327,6 +341,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     if (targetCalendar) {
       if (!targetCalendar.contains(e.target)) {
         setIsCalendar(false);
+        setRangePickerValue(_defaultValue);
       }
     }
     if (targetInput) {
@@ -399,7 +414,7 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   // 外部获取ref停止自动刷新
   var onStop = function onStop() {
-    if (isAutoRefresh) {
+    if (enableAutoRefresh) {
       var _refreshRef$current2, _refreshRef$current3;
       ((_refreshRef$current2 = refreshRef.current) === null || _refreshRef$current2 === void 0 ? void 0 : _refreshRef$current2.onAutoRefresh) && ((_refreshRef$current3 = refreshRef.current) === null || _refreshRef$current3 === void 0 ? void 0 : _refreshRef$current3.onAutoRefresh());
     }
@@ -519,7 +534,8 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       return getPopupContainerCalendar ? getPopupContainerCalendar(triggerNode) : triggerNode;
     },
     dropdownClassName: classnames(dropdownCalendarClassName),
-    format: format,
+    format: rangePickerFormat,
+    allowClear: false,
     onChange: function onChange(_value, mode) {
       setIsCalendar(false);
       setIsFocus(false);
@@ -595,8 +611,35 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       }
     },
-    defaultValue: _defaultValue // 默认为当前已经选择的时间
+    value: rangePickerValue // 默认为当前已经选择的时间
     ,
+    onCalendarChange: function onCalendarChange(data, dataString, info) {
+      var _ref = data || [],
+        _ref2 = _slicedToArray(_ref, 2),
+        data0 = _ref2[0],
+        data1 = _ref2[1];
+      var range = info.range;
+      if (range === "start" && data0) {
+        data0 = moment(data0).set({
+          "hour": 0,
+          "minute": 0,
+          "second": 0,
+          "millisecond": 0
+        });
+      }
+      if (range === "end" && data1) {
+        data1 = moment(data1).set({
+          "hour": 23,
+          "minute": 59,
+          "second": 59,
+          "millisecond": 0
+        });
+        if (moment().isSame(data1, "day")) {
+          data1 = moment();
+        }
+      }
+      setRangePickerValue([data0, data1]);
+    },
     showTime: {
       hideDisabledOptions: true
     }
@@ -633,7 +676,8 @@ var CWRangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
 CWRangePicker.defaultProps = {
   moreItemDropdownPosition: "left",
   growSize: 3,
-  format: "YYYY/MM/DD HH:mm:ss"
+  format: "YYYY/MM/DD HH:mm:ss",
+  rangePickerFormat: "YYYY/MM/DD"
 };
 CWRangePicker.propTypes = {
   /**
@@ -715,6 +759,10 @@ CWRangePicker.propTypes = {
   /**
    * 下拉菜单日历模式的className属性
    */
-  dropdownCalendarClassName: PropTypes.string
+  dropdownCalendarClassName: PropTypes.string,
+  /**
+   * 日历选择模式format展示
+   */
+  rangePickerFormat: PropTypes.string
 };
 export default CWRangePicker;

package/lib/CWRangePicker/utils/index.js

@@ -162,21 +162,25 @@ export var echoInputValue = function echoInputValue() {
   }
   if (!isRule && !values) return title || "Live Tail";
   if (isAutoRefresh) {
+    var _value3;
     if (isRule) {
       if (isFoucs) {
         return recordUnit;
       }
       return echoRecentlyTimeTitle(locale, captureUnit);
     }
+    if (Array.isArray(value) && (_value3 = value) !== null && _value3 !== void 0 && _value3.length) {
+      return echoAbsoluteTimeTitle(value, format);
+    }
   } else {
-    var _value3;
+    var _value4;
     if (isRule) {
       if (isFoucs) {
         return recordUnit;
       }
       return echoRecentlyTimeTitle(locale, captureUnit);
     }
-    if (Array.isArray(value) && (_value3 = value) !== null && _value3 !== void 0 && _value3.length) {
+    if (Array.isArray(value) && (_value4 = value) !== null && _value4 !== void 0 && _value4.length) {
       return echoAbsoluteTimeTitle(value, format);
     }
   }

package/lib/CWSelect/index.js

@@ -187,6 +187,10 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
       var rcSelect = selectRef.current;
       var selectWrapperDom = ReactDom.findDOMNode(rcSelect);
       var selectInputDom = selectWrapperDom.querySelector(".".concat(prefixCls, "-select-selector"));
+      var ExistingSlotDom = selectInputDom.querySelector(".cw-select-custom-slot-wrapper");
+      if (ExistingSlotDom) {
+        selectInputDom.removeChild(ExistingSlotDom);
+      }
       var selectSearchDom = selectInputDom.querySelector(".".concat(prefixCls, "-select-selection-search"));
       var divEle = document.createElement('div');
       divEle.className = "cw-select-custom-slot-wrapper";

package/lib/CWTable/header.js

@@ -3,7 +3,7 @@ import _TooltipText from "@chaoswise/ui/lib/TooltipText";
 import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
 import _Menu from "@chaoswise/ui/lib/Menu";
 var _excluded = ["onResize", "width"],
-  _excluded2 = ["children"];
+  _excluded2 = ["children", "onClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -13,7 +13,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Resizable } from "react-resizable";
 import SortContext from "./SortContext";
 import SortSvg from './icon/SortSvg';
@@ -83,6 +83,7 @@ export function HeaderCell(props) {
   var _onResize = props.onResize,
     width = props.width,
     restProps = _objectWithoutProperties(props, _excluded);
+  var isResizeRef = useRef(null);
   var _useConfigContext = useConfigContext(),
     getPrefixCls = _useConfigContext.getPrefixCls;
   var prefixCls = getPrefixCls();
@@ -129,6 +130,8 @@ export function HeaderCell(props) {
       restProps.children = children;
     }
     var _children = restProps.children,
+      _restProps$onClick = restProps.onClick,
+      _onClick = _restProps$onClick === void 0 ? function () {} : _restProps$onClick,
       rest = _objectWithoutProperties(restProps, _excluded2);
     var findColumnItem = columns === null || columns === void 0 ? void 0 : columns.find(function (item) {
       return (item.dataIndex || item.key) === rest.dataIndex;
@@ -136,7 +139,9 @@ export function HeaderCell(props) {
     var ellipsis = findColumnItem ? findColumnItem.ellipsis && !findColumnItem.filters && !findColumnItem.sorter ? true : false : false;
     var renderChildren = ellipsis ? /*#__PURE__*/React.createElement(_TooltipText, null, _children) : _children;
     if (!width) {
-      return /*#__PURE__*/React.createElement("th", rest, renderChildren);
+      return /*#__PURE__*/React.createElement("th", _extends({}, rest, {
+        onClick: _onClick
+      }), renderChildren);
     }
     return /*#__PURE__*/React.createElement(Resizable, {
       width: width,
@@ -149,6 +154,7 @@ export function HeaderCell(props) {
         document.body.onselectstart = function () {
           return false;
         };
+        isResizeRef.current = true;
       },
       onResizeStop: function onResizeStop(e, data) {
         // 页面选中功能开启
@@ -157,12 +163,21 @@ export function HeaderCell(props) {
         };
         // 第三个参数是拖拽是否结束
         _onResize(e, data, true);
+        setTimeout(function () {
+          isResizeRef.current = false;
+        });
       },
       className: "cw-table-react-resizable",
       draggableOpts: {
         enableUserSelectHack: false
       }
-    }, /*#__PURE__*/React.createElement("th", rest, renderChildren));
+    }, /*#__PURE__*/React.createElement("th", _extends({}, rest, {
+      onClick: function onClick() {
+        if (!isResizeRef.current && _onClick) {
+          _onClick.apply(void 0, arguments);
+        }
+      }
+    }), renderChildren));
   };
   return /*#__PURE__*/React.createElement(SortContext.Consumer, null, render);
 }

package/lib/Header/TopNavigationMenu/index.js

@@ -0,0 +1,59 @@
+import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
+import _Icon from "@chaoswise/ui/lib/Antd/Icon";
+import _Menu from "@chaoswise/ui/lib/Menu";
+import "@chaoswise/ui/lib/TooltipText/index.less";
+import _TooltipText from "@chaoswise/ui/lib/TooltipText";
+import React, { useMemo } from "react";
+import classnames from "classnames";
+import "./index.less";
+// 产品直接在头部容器中展示
+var TopNavigationMenu = function TopNavigationMenu(props) {
+  var topNavigation = props.topNavigation,
+    onClickTopNavigationSelf = props.onClickTopNavigationSelf,
+    topNavigationOption = props.topNavigationOption;
+  var _topNavigationOption$ = topNavigationOption.unfoldMaxCount,
+    unfoldMaxCount = _topNavigationOption$ === void 0 ? 4 : _topNavigationOption$,
+    _topNavigationOption$2 = topNavigationOption.activeKey,
+    activeKey = _topNavigationOption$2 === void 0 ? "" : _topNavigationOption$2,
+    moreOverlayClassName = topNavigationOption.moreOverlayClassName,
+    topNavigationWrapperClassName = topNavigationOption.topNavigationWrapperClassName;
+  var _activeKey = useMemo(function () {
+    return activeKey;
+  }, [activeKey]);
+  if (!topNavigation || !topNavigation.length) {
+    return null;
+  }
+  var menu = /*#__PURE__*/React.createElement(_Menu, {
+    selectable: true,
+    selectedKeys: [_activeKey]
+  }, topNavigation.slice(unfoldMaxCount).map(function (item) {
+    return /*#__PURE__*/React.createElement(_Menu.Item, {
+      onClick: function onClick(_ref) {
+        var domEvent = _ref.domEvent;
+        onClickTopNavigationSelf(domEvent, item);
+      },
+      key: item.value
+    }, /*#__PURE__*/React.createElement(_TooltipText, null, item.name));
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-header-top-navigation-menu-wrapper", topNavigationWrapperClassName)
+  }, topNavigation.slice(0, unfoldMaxCount).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.value,
+      onClick: function onClick(e) {
+        return onClickTopNavigationSelf(e, item);
+      },
+      className: classnames("cw-header-top-navigation-menu-item", {
+        "cw-header-top-navigation-menu-item-seleted": _activeKey === item.value
+      })
+    }, item.name);
+  }), (topNavigation === null || topNavigation === void 0 ? void 0 : topNavigation.length) > unfoldMaxCount && /*#__PURE__*/React.createElement(_Dropdown, {
+    overlay: menu,
+    overlayClassName: classnames(moreOverlayClassName)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-header-top-navigation-menu-more-wrapper"
+  }, /*#__PURE__*/React.createElement(_Icon, {
+    type: "ellipsis"
+  }))));
+};
+export default TopNavigationMenu;

package/lib/Header/TopNavigationMenu/index.less

@@ -0,0 +1,41 @@
+.cw-header-top-navigation-menu-wrapper {
+    margin-left: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    font-size: 12px;
+
+    .cw-header-top-navigation-menu-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 20px;
+        line-height: 20px;
+        padding: 0 12px;
+        &:hover{
+            cursor: pointer;
+        }
+        &:not(.cw-header-top-navigation-menu-item-seleted):hover {
+            color: @primary-5;
+        }
+
+        &:not(:first-child) {
+            margin-left: 8px;
+        }
+
+        &.cw-header-top-navigation-menu-item-seleted {
+            background-color: @primary-color;
+            font-weight: 500;
+            border-radius: 10px;
+        }
+    }
+
+    .cw-header-top-navigation-menu-more-wrapper {
+        margin-left: 20px;
+        &:hover{
+            cursor: pointer;
+            color: @primary-5;
+        }
+    }
+}

package/lib/Header/index.js

@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
 import { ConfigConsumer } from 'antd/es/config-provider';
 import Message from './Message';
 import Document from './Document';
+import TopNavigationMenu from './TopNavigationMenu';
 import './index.less';
 /**
  * 
@@ -106,7 +107,10 @@ function CWHeader(_ref) {
     userSetingOption = _ref.userSetingOption,
     _ref$logoSize = _ref.logoSize,
     logoSize = _ref$logoSize === void 0 ? '50%' : _ref$logoSize,
-    homeIcon = _ref.homeIcon;
+    homeIcon = _ref.homeIcon,
+    topNavigationOption = _ref.topNavigationOption;
+  var _topNavigationOption$ = topNavigationOption.topNavigationType,
+    topNavigationType = _topNavigationOption$ === void 0 ? "fold" : _topNavigationOption$;
   var logoContainerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -224,7 +228,7 @@ function CWHeader(_ref) {
         onClick: onClickHome
       }, homeIcon ? homeIcon : /*#__PURE__*/React.createElement(_Icon, {
         component: homeIconSvg
-      })) : null, showTopNavigation && /*#__PURE__*/React.createElement(_Dropdown, {
+      })) : null, showTopNavigation && (topNavigationType === "fold" ? /*#__PURE__*/React.createElement(_Dropdown, {
         trigger: topNavigationTrigger,
         overlayClassName: "".concat(prefixCls, "-cw-header-dropdown-out-wrapper ").concat(topNavigationClassName !== undefined ? topNavigationClassName : ''),
         overlay: renderTopNavigationMenu(),
@@ -239,11 +243,15 @@ function CWHeader(_ref) {
         }
       }, allProductsTitle, " ", /*#__PURE__*/React.createElement(_Icon, {
         type: "caret-down"
-      }))), /*#__PURE__*/React.createElement("div", {
+      }))) : /*#__PURE__*/React.createElement(TopNavigationMenu, {
+        onClickTopNavigationSelf: onClickTopNavigationSelf,
+        topNavigation: topNavigation,
+        topNavigationOption: topNavigationOption
+      })), topNavigationType === "fold" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "cw-division"
       }), /*#__PURE__*/React.createElement("div", {
         className: "cw-page-name"
-      }, title)), /*#__PURE__*/React.createElement("div", {
+      }, title))), /*#__PURE__*/React.createElement("div", {
         className: "cw-header-right"
       }, extra, /*#__PURE__*/React.createElement(Message, {
         option: messageOption

package/lib/InputNumber/index.js

@@ -25,6 +25,10 @@ var CWInputNumber = /*#__PURE__*/forwardRef(function (props, inputNumberRef) {
       var inputNumberInputDom = ReactDom.findDOMNode(ref.current);
       // rc-input-number底层依赖升级以后需要向上查找
       var inputNumberWrapperDom = inputNumberInputDom.closest(".".concat(prefixCls, "-input-number"));
+      var ExistingSlotDom = inputNumberWrapperDom.querySelector(".cw-input-number-custom-slot-wrapper");
+      if (ExistingSlotDom) {
+        inputNumberWrapperDom.removeChild(ExistingSlotDom);
+      }
       var divEle = document.createElement("div");
       divEle.className = "cw-input-number-custom-slot-wrapper";
       if (inputNumberWrapperDom) {

package/lib/SearchBar/index.js

@@ -336,7 +336,9 @@ var SearchBar = function SearchBar(props) {
     if (index < showExtraCount) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          marginLeft: index === 0 ? 0 : "8px"
+          marginLeft: index === 0 ? 0 : "8px",
+          display: 'flex',
+          alignItems: "center"
         },
         key: value.key ? value.key : index
       }, value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaoswise/ui",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "公共UI库",
   "keywords": [
     "ui",
@@ -140,5 +140,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "gitHead": "59cb2ef17cec258258a9b37afde767275d147c25"
+  "gitHead": "72a624e97dab570b1fe67879de3d4d2f757d19a0"
 }