@chaoswise/ui 3.0.6 → 3.0.8

package/lib/Header/index.js

@@ -0,0 +1,320 @@
+import _Dropdown from "@chaoswise/ui/lib/Dropdown";
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import Icon, { CaretDownOutlined } from "@ant-design/icons";
+import LocaleSwitcher from "./LocaleSwitcher";
+import UserSetting from "./UserSetting";
+import PropTypes from "prop-types";
+import { ConfigConsumer } from "../Antd5/config-provider";
+import Message from "./Message";
+import Document from "./Document";
+import useConfigContext from "../useConfigContext";
+import TopNavigationMenu from "./TopNavigationMenu";
+import classnames from "classnames";
+import useStyle from "./index.style";
+/**
+ *
+ * 页头通常位于页面顶部，起到了内容概览的作用，通常与结构一起使用
+ */
+var defaultLogo = function defaultLogo() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "153px",
+    height: "26px",
+    viewBox: "0 0 153 26",
+    version: "1.1"
+  }, /*#__PURE__*/React.createElement("title", null, "\u7F16\u7EC4 4"), /*#__PURE__*/React.createElement("g", {
+    id: "\u63A7\u4EF6",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u4EA4\u884C-header",
+    transform: "translate(-24.000000, -15.000000)",
+    fill: "#FFFFFF"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u7F16\u7EC4-4",
+    transform: "translate(24.000000, 15.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "\u7F16\u7EC4-2"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.8196393,22.4294364 C12.5313316,23.5328792 10.7820061,25.3255194 7.553386,25.3255194 C5.65110001,25.3255194 3.74838676,24.5580697 2.3318999,23.2196563 C0.827717115,21.7996766 -1.64829966e-13,19.8709501 -1.64829966e-13,17.7883915 C-1.64829966e-13,14.9309002 1.338618,13.139329 2.46264268,12.1392605 C3.86876838,10.8877583 5.71946224,10.1698043 7.54120897,10.1698043 C9.47073304,10.1698043 11.2157859,10.8288553 12.8158894,12.2583493 C12.8158894,12.2583493 12.9559252,12.400529 13.0104013,12.4555836 L13.0258897,12.4673428 L13.028026,12.4735431 C13.2563986,12.7136451 13.3816937,13.0279371 13.3816937,13.3594403 C13.3816937,14.0659558 12.8067033,14.620136 12.1013973,14.6415164 C11.6617426,14.6559481 11.2791278,14.3976728 11.2791278,14.3976728 C10.314793,13.4799189 9.10147015,12.7983115 7.553386,12.7983115 C5.18207099,12.7983115 2.62404164,14.6898361 2.62404164,17.7427444 C2.62404164,20.472274 4.83427813,22.6919878 7.553386,22.6919878 C9.84245269,22.6919878 10.9484255,21.4504276 12.6239411,19.5716244 C12.934562,19.2231237 13.2576804,18.8585878 13.6151935,18.473206 C14.122249,17.9293953 15.6145752,16.379102 16.5060615,15.4545063 C16.7272774,15.2232772 17.5433999,14.4662866 17.5027624,14.6415164 C16.571099,18.6588698 14.0035764,22.2732526 13.8196393,22.4294364 Z",
+    id: "Fill-35"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M23.6171225,24.652678 C22.6402902,24.2024067 21.9278276,23.6708898 21.1428368,22.8040212 C20.7187773,22.3354695 20.6558627,21.9575709 20.6558627,21.8426512 C20.6558627,20.9843347 21.2782795,20.4481141 21.9788856,20.4481141 C22.665392,20.4481141 23.0640292,20.977493 23.0640292,20.977493 C23.6821734,21.8153912 25.1808017,22.6838633 26.7649897,22.6838633 C29.8952323,22.6838633 31.7417604,20.1387397 31.7417604,17.7427444 C31.7417604,15.2629379 29.7272108,12.8036566 26.7998117,12.8036566 C24.6473627,12.8036566 23.3292534,14.2686421 23.1206417,14.4508031 C22.3947202,15.0896497 14.0035764,22.2732526 13.8196393,22.4294364 C12.5313316,23.5328792 10.9484255,21.4504276 12.6239411,19.5716244 C12.934562,19.2231237 13.2576804,18.8585878 13.6151935,18.473206 C14.122249,17.9293953 15.6145752,16.379102 16.5060615,15.4545063 C16.7272774,15.2232772 16.8792672,15.0106869 17.0440936,14.8934845 C19.9831014,12.8036566 21.1428368,12.2241407 24.1846358,10.606606 L24.8095094,10.4060578 C25.4570279,10.2218656 26.1451365,10.1424374 26.8296134,10.1424374 C28.7502717,10.1424374 30.6168812,10.9211118 32.0161706,12.2241407 C32.7471125,12.9020065 33.3179371,13.7027027 33.7164676,14.6043145 C34.1430907,15.5692122 34.3966718,16.6282907 34.3966718,17.7446686 C34.3966718,19.7968669 33.5882884,21.6952333 32.191883,23.0967189 C30.7572374,24.5336961 28.8738578,25.35 26.7477923,25.35 C25.7579285,25.35 24.5873321,25.0991009 23.6171225,24.652678 Z",
+    id: "Fill-35\u5907\u4EFD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.8196393,22.4294364 C12.5313316,23.5328792 10.9484255,21.4504276 12.6239411,19.5716244 C12.934562,19.2231237 13.2576804,18.8585878 13.6151935,18.473206 C14.122249,17.9293953 15.6145752,16.379102 16.5060615,15.4545063 C16.7272774,15.2232772 16.9138849,15.0291431 17.0440936,14.8934845 C19.8973624,11.9221424 20.852511,10.9692177 20.852511,10.9692177 C22.2535095,9.36985637 22.5505648,7.3320898 21.7312861,5.51828299 C20.9207664,3.73366044 19.1353371,2.60787512 17.179109,2.60787512 C14.3984752,2.60787512 12.7437886,4.68562305 12.3766621,6.66181405 L12.3641646,6.66833507 C12.1994543,7.22294282 11.6826786,7.60875226 11.1052313,7.60875226 C10.3830484,7.60875226 9.7657588,7.07039362 9.7657588,6.34655995 C9.7657588,6.1076339 9.80763067,5.88880544 9.80763067,5.88880544 C10.1433533,4.28591634 10.997454,2.88656872 12.3096884,1.78066718 C13.6251274,0.673482813 15.3433694,9.48013597e-15 17.179109,9.48013597e-15 C19.2829568,9.48013597e-15 21.20949,0.83992928 22.5842118,2.2178965 C24.3472098,3.98274217 24.8095094,6.22982293 24.8095094,7.38158544 C24.8095094,9.02082123 24.5195039,9.76133162 24.1846358,10.606606 C17.3972629,18.3843704 13.9422641,22.3253139 13.8196393,22.4294364 Z",
+    id: "Fill-35\u5907\u4EFD-2"
+  })), /*#__PURE__*/React.createElement("text", {
+    id: "\u667A\u80FD\u4E1A\u52A1\u8FD0\u7EF4",
+    fontFamily: "PingFangSC-Regular, PingFang SC",
+    fontSize: "18",
+    fontWeight: "normal",
+    letterSpacing: "0.4"
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: "42",
+    y: "20"
+  }, "\u667A\u80FD\u4E1A\u52A1\u8FD0\u7EF4"))))));
+};
+var homeIconSvg = function homeIconSvg(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 17,
+    height: 16
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "m8.473 1.332 6.58 6.013c-.336.041-.65.179-.901.399l-.004.004-.004.004c-.243.216-.53.596-.53 1.194v5.6h-2.41v-2.38c0-.893-.74-1.619-1.65-1.619h-2.17c-.91 0-1.65.728-1.65 1.62v2.377h-2.38v-5.61c0-.822-.627-1.505-1.437-1.607zm0-1.332c-.23 0-.46.078-.624.232l-7.57 6.92a.746.746 0 0 0-.203.9c.146.31.456.493.814.493h.814c.232 0 .417.175.417.387v6.03c0 .446.397.813.882.813h3.082c.485 0 .882-.367.882-.813v-2.795c0-.214.185-.387.417-.387h2.17c.233 0 .418.175.418.387v2.797c0 .446.396.814.892.814h3.082c.496 0 .903-.368.903-.814V8.942c0-.115.028-.193.117-.271a.46.46 0 0 1 .3-.107h.764a.89.89 0 0 0 .814-.493.75.75 0 0 0-.164-.91L9.1.231A.92.92 0 0 0 8.473 0"
+  }));
+};
+function CWHeader(_ref) {
+  var logo = _ref.logo,
+    title = _ref.title,
+    extra = _ref.extra,
+    showHome = _ref.showHome,
+    onClickHome = _ref.onClickHome,
+    showTopNavigation = _ref.showTopNavigation,
+    topNavigation = _ref.topNavigation,
+    topNavigationTrigger = _ref.topNavigationTrigger,
+    topNavigationClassName = _ref.topNavigationClassName,
+    onClickTopNavigation = _ref.onClickTopNavigation,
+    logoText = _ref.logoText,
+    allProductsTitle = _ref.allProductsTitle,
+    localeSwitcherOption = _ref.localeSwitcherOption,
+    messageOption = _ref.messageOption,
+    documentOption = _ref.documentOption,
+    userSetingOption = _ref.userSetingOption,
+    _ref$logoSize = _ref.logoSize,
+    logoSize = _ref$logoSize === void 0 ? "50%" : _ref$logoSize,
+    homeIcon = _ref.homeIcon,
+    _ref$topNavigationOpt = _ref.topNavigationOption,
+    topNavigationOption = _ref$topNavigationOpt === void 0 ? {} : _ref$topNavigationOpt;
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("basic-header");
+  var _useStyle = useStyle("".concat(prefixCls, "-cw-header-out-wrapper")),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var _topNavigationOption$ = topNavigationOption.topNavigationType,
+    topNavigationType = _topNavigationOption$ === void 0 ? "fold" : _topNavigationOption$;
+  var logoContainerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  useEffect(function () {
+    if (logo) {
+      var logoEle = logoContainerRef.current.querySelector("img");
+      if (!logoEle) {
+        return;
+      }
+      var containerHeight = logoContainerRef.current.offsetHeight;
+      logoEle.style.height = "".concat(containerHeight, "px");
+      logoEle.onload = function () {
+        var imgWidth = logoEle.offsetWidth;
+        var imgHeight = logoEle.offsetHeight;
+        logoEle.style.width = "".concat(imgWidth / imgHeight * containerHeight, "px");
+      };
+    }
+  }, [logo]);
+  function onClickTopNavigationSelf(e, item) {
+    if (onClickTopNavigation) {
+      e.preventDefault();
+      onClickTopNavigation(e, item);
+    }
+  }
+
+  // 数组分组
+  function group(array, subGroupLength) {
+    var index = 0;
+    var newArray = [];
+    while (index < array.length) {
+      newArray.push(array.slice(index, index += subGroupLength));
+    }
+    return newArray;
+  }
+  var renderItem = function renderItem() {
+    if (!topNavigation || !topNavigation.length) {
+      return null;
+    }
+    var groupedData = group(topNavigation, 5);
+    return groupedData.map(function (data, index) {
+      // 不足进行补位 解决如果出现滚动条错位的问题
+      var _data = data.concat(new Array(5 - data.length).fill(null));
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cw-header-dropdown-menu-item-row",
+        key: index
+      }, _data.map(function (item, i) {
+        if (!item) {
+          return /*#__PURE__*/React.createElement("a", {
+            key: "null-".concat(i),
+            className: "cw-header-dropdown-menu-item"
+          });
+        }
+        return /*#__PURE__*/React.createElement("a", {
+          className: "cw-header-dropdown-menu-item",
+          key: item.value,
+          href: item.value,
+          onClick: function onClick(e) {
+            return onClickTopNavigationSelf(e, item);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "cw-header-dropdown-menu-item-box"
+        }, item.icon), /*#__PURE__*/React.createElement("div", {
+          className: "cw-header-dropdown-menu-item-name"
+        }, item.name));
+      }));
+    });
+  };
+  var renderTopNavigationMenu = function renderTopNavigationMenu() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cw-header-dropdown-menu-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cw-header-dropdown-menu-box"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cw-header-dropdown-menu-list"
+    }, renderItem())));
+  };
+  var renderLogo = function renderLogo() {
+    if (!logo) {
+      return null;
+    }
+
+    // src
+    if (typeof logo === "string") {
+      return /*#__PURE__*/React.createElement("img", {
+        src: logo,
+        alt: ""
+      });
+    } else {
+      // 元素
+      return logo;
+    }
+  };
+  return wrapCSSVar(
+  /*#__PURE__*/
+  // layout-header-check-repeat 检测嵌套标记，layout嵌套不显示第二个header
+  React.createElement("header", {
+    className: classnames(hashId, cssVarCls, "".concat(prefixCls, "-cw-header-out-wrapper"), "layout-header-check-repeat")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-header-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-header-logo",
+    ref: logoContainerRef,
+    style: {
+      height: logoSize
+    }
+  }, renderLogo(), logoText && /*#__PURE__*/React.createElement("span", {
+    className: "logo-text"
+  }, logoText)), showHome ? /*#__PURE__*/React.createElement("div", {
+    className: "cw-header-home",
+    onClick: onClickHome
+  }, homeIcon ? homeIcon : /*#__PURE__*/React.createElement(Icon, {
+    component: homeIconSvg
+  })) : null, showTopNavigation && (topNavigationType === "fold" ? /*#__PURE__*/React.createElement(_Dropdown, {
+    trigger: topNavigationTrigger,
+    overlayClassName: classnames("".concat(prefixCls, "-cw-header-dropdown-out-wrapper"), {
+      topNavigationClassName: topNavigationClassName
+    }),
+    overlay: renderTopNavigationMenu(),
+    open: visible,
+    onOpenChange: function onOpenChange(pre) {
+      setVisible(pre);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-header-dropdown-link",
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, allProductsTitle, " ", /*#__PURE__*/React.createElement(CaretDownOutlined, null))) : /*#__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", {
+    className: "cw-header-right"
+  }, extra, /*#__PURE__*/React.createElement(Message, {
+    option: messageOption
+  }), /*#__PURE__*/React.createElement(Document, {
+    option: documentOption
+  }), /*#__PURE__*/React.createElement(LocaleSwitcher, {
+    option: localeSwitcherOption
+  }), /*#__PURE__*/React.createElement(UserSetting, {
+    option: userSetingOption
+  }))));
+}
+CWHeader.defaultProps = {
+  logo: /*#__PURE__*/React.createElement(Icon, {
+    component: defaultLogo
+  }),
+  title: "",
+  showHome: true,
+  showTopNavigation: true,
+  onClickHome: function onClickHome() {},
+  topNavigationTrigger: ["hover"]
+};
+CWHeader.propTypes = {
+  /**
+   * 自定义所有产品的文字
+   */
+  allProductsTitle: PropTypes.string,
+  /**
+   * 自定义logo
+   */
+  logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * logo文案
+   */
+  logoText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * 自定义标题文字
+   */
+  title: PropTypes.string,
+  /**
+   * 自定义页头右侧操作区
+   */
+  extra: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * 是否展示home图标
+   */
+  showHome: PropTypes.bool,
+  /**
+   * 点击home图标触发的事件
+   */
+  onClickHome: PropTypes.func,
+  /**
+   * 开启顶部导航菜单
+   */
+  showTopNavigation: PropTypes.bool,
+  /**
+   * 顶部导航菜单内容
+   */
+  topNavigation: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.node,
+    name: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    value: PropTypes.string
+  })),
+  /**
+   * 顶部导航菜单根元素的类名称
+   */
+  topNavigationClassName: PropTypes.string,
+  /**
+   * 顶部导航菜单触发下拉的行为
+   */
+  topNavigationTrigger: PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "contextMenu"])),
+  /**
+   * 点击顶部导航菜单，function(e,item){}
+   */
+  onClickTopNavigation: PropTypes.func
+};
+export default CWHeader;

package/lib/Header/index.style.js

@@ -0,0 +1,154 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genStyleHooks } from "../Antd5/theme/internal";
+import { unit } from '@ant-design/cssinjs';
+var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    bodyBgLayout: token.Layout.bodyBg,
+    headerBgLayout: token.Layout.headerBg,
+    headerColorLayout: token.Layout.headerColor,
+    headerHeightLayout: token.Layout.headerHeight,
+    // headerPaddingLayout: token.Layout.headerPadding,
+    divisionBgLayout: token.Layout.divisionBg,
+    topNavMenuBgLayout: token.Layout.topNavMenuBg
+  };
+};
+var genCustomCWHeaderStyle = function genCustomCWHeaderStyle(token) {
+  var prefixCls = token.antCls;
+  var basicHeaderPrefix = "".concat(prefixCls, "-basic-header");
+  return _defineProperty(_defineProperty({}, "".concat(basicHeaderPrefix, "-cw-header-out-wrapper"), {
+    height: "".concat(unit(token.headerHeightLayout)),
+    lineHeight: "".concat(unit(token.headerHeightLayout)),
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: token.headerBgLayout,
+    color: token.headerColorLayout,
+    fontSize: "14px",
+    ".cw-division": {
+      width: "1px",
+      height: "20px",
+      margin: "0 16px",
+      backgroundColor: token.divisionBgLayout
+    },
+    ".cw-header-left": {
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      ".cw-header-logo": {
+        overflow: "hidden",
+        marginLeft: "24px",
+        display: "flex",
+        alignItems: "center",
+        img: {
+          display: "block"
+        },
+        ".logo-text": {
+          color: token.headerColorLayout,
+          marginLeft: "8px",
+          fontSize: "18px"
+        }
+      },
+      ".cw-header-home": {
+        minWidth: "16px",
+        minHeight: "16px",
+        fontSize: "16px",
+        display: "flex",
+        alignItems: "center",
+        marginLeft: "31px",
+        cursor: "pointer",
+        color: token.headerColorLayout
+      },
+      ".cw-header-dropdown-link": {
+        height: "".concat(unit(token.headerHeightLayout)),
+        lineHeight: "".concat(unit(token.headerHeightLayout)),
+        marginLeft: "16px",
+        cursor: "pointer"
+        // [`${token.iconCls}-caret-down`]: {
+        //   marginLeft: "8px",
+        // },
+      },
+      ".cw-page-name": {
+        letterSpacing: "0"
+      }
+    },
+    ".cw-header-right": {
+      height: "100%",
+      marginRight: "24px",
+      width: "max-content",
+      display: "flex",
+      alignItems: "center"
+    }
+  }), "".concat(basicHeaderPrefix, "-cw-header-dropdown-out-wrapper"), {
+    ".cw-header-dropdown-menu-container": {
+      background: token.topNavMenuBgLayout,
+      width: "656px",
+      padding: "16px",
+      overflow: "auto",
+      maxHeight: "calc(100vh - 100px)",
+      boxShadow: token.boxShadow,
+      borderRadius: token.borderRadius,
+      ".cw-header-dropdown-menu-box": {
+        width: "100%",
+        overflowY: "auto",
+        ".cw-header-dropdown-menu-list": {
+          ".cw-header-dropdown-menu-item-row": {
+            display: "flex",
+            marginBottom: "8px",
+            flexWrap: "nowrap",
+            "&:last-child": {
+              marginBottom: "0"
+            },
+            ".cw-header-dropdown-menu-item": {
+              width: "112px",
+              flexDirection: "column",
+              display: "flex",
+              alignItems: "center",
+              padding: "8px 0",
+              fontSize: "12px",
+              lineHeight: "20px",
+              marginRight: "16px",
+              "&:last-child": {
+                marginRight: "0"
+              },
+              ".cw-header-dropdown-menu-item-box": {
+                background: token.colorBgContainer,
+                boxShadow: "0 2px 6px 1px rgba(101, 124, 236, 0.28)",
+                width: "36px",
+                height: "36px",
+                overflow: "hidden",
+                borderRadius: "36px",
+                border: "none",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                cursor: "pointer",
+                padding: "10px",
+                marginBottom: "8px",
+                "> img": {
+                  width: "100%",
+                  height: "100%"
+                }
+              },
+              ".cw-header-dropdown-menu-item-name": {
+                color: token.colorText,
+                cursor: "pointer",
+                textAlign: "center",
+                letterSpacing: "0"
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+};
+// ============================== Export ==============================
+export default genStyleHooks("CWHeader", function (token) {
+  return [
+  //
+  genCustomCWHeaderStyle(token)];
+}, prepareComponentToken);

package/lib/Icon/index.js

@@ -0,0 +1,23 @@
+var _excluded = ["type", "theme"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { Suspense } from "react";
+import AntdIcon from "@ant-design/icons";
+import { loadIcon } from "./utils";
+import { cloneComProps } from "../utils";
+var Icon = function Icon(props) {
+  var type = props.type,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "outlined" : _props$theme,
+    rest = _objectWithoutProperties(props, _excluded);
+  if (type) {
+    var IconComponent = loadIcon(type, theme);
+    // fallback={<></>} 如果为loading切换的时候会出现闪烁
+    return /*#__PURE__*/React.createElement(Suspense, {
+      fallback: /*#__PURE__*/React.createElement(React.Fragment, null)
+    }, /*#__PURE__*/React.createElement(IconComponent, rest));
+  }
+  return /*#__PURE__*/React.createElement(AntdIcon, rest);
+};
+cloneComProps(AntdIcon, Icon);
+export default Icon;

package/lib/Icon/utils.js

@@ -0,0 +1,20 @@
+import React from "react";
+var toCamelCase = function toCamelCase(type, theme) {
+  var typeTheme = "".concat(type, "-").concat(theme.charAt(0).toUpperCase()).concat(theme.slice(1));
+  var result = typeTheme.split("-").map(function (item, index) {
+    if (index === 0) {
+      return item.charAt(0).toUpperCase() + item.slice(1);
+    } else {
+      return item.charAt(0).toUpperCase() + item.slice(1);
+    }
+  });
+  return result.join("");
+};
+
+// 创建一个动态加载图标的函数
+export var loadIcon = function loadIcon(type, theme) {
+  var iconComponentName = toCamelCase(type, theme);
+  return /*#__PURE__*/React.lazy(function () {
+    return import("@ant-design/icons/es/icons/".concat(iconComponentName));
+  });
+};

package/lib/IconSelect/components/CustomImg/index.js

@@ -0,0 +1,84 @@
+import _Upload from "@chaoswise/ui/lib/Upload";
+import _Button from "@chaoswise/ui/lib/Button";
+import _message from "@chaoswise/ui/lib/message";
+import React from "react";
+import { useIntl } from "../../../locales";
+var CustomImg = function CustomImg(_ref) {
+  var onChange = _ref.onChange,
+    iconInfo = _ref.iconInfo,
+    setCustomFileInfo = _ref.setCustomFileInfo,
+    customFileInfo = _ref.customFileInfo;
+  var intl = useIntl();
+  var beforeUpload = function beforeUpload(file) {
+    var type = file.type,
+      size = file.size;
+    var checkTypeIsImage = function checkTypeIsImage() {
+      return !(type !== null && type !== void 0 && type.startsWith("image"));
+    };
+    var checkSizeIsNull = function checkSizeIsNull() {
+      return size == 0;
+    };
+    var checkSizeIsBig = function checkSizeIsBig() {
+      return size > 2 * 1024 * 1024;
+    };
+    if (checkTypeIsImage()) {
+      _message.error(intl.get("c0839048-28ed-4a1f-bbad-be025e41ae75").d("暂不支持该格式文件"));
+      return false;
+    }
+    if (checkSizeIsNull()) {
+      _message.error(intl.get("b7e613a0-9941-444c-a3f8-ae1f7d1943c3").d("不能上传空文件"));
+      return false;
+    }
+    if (checkSizeIsBig()) {
+      _message.error(intl.get("eb6227c5-2594-4fb6-92cb-496295288cdd").d("图片大小不超过2M"));
+      return false;
+    }
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function () {
+      var _customFileInfo = {
+        baseCode: reader.result,
+        name: file.name,
+        id: file.uid
+      };
+      var fileInfo = {
+        iconInfo: iconInfo,
+        customFileInfo: _customFileInfo
+      };
+      setCustomFileInfo(_customFileInfo);
+      onChange(fileInfo);
+      // console.log(reader.result, "reader.result");
+    };
+    reader.onerror = function () {
+      _message.error(intl.get("95862d90-8807-499e-9b92-4b890337c82e").d("读取文件失败"));
+    };
+    return false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "link-upload-box"
+  }, /*#__PURE__*/React.createElement(_Upload, {
+    className: "upload-custom",
+    accept: ".png,.svg,.jpg,.jpeg",
+    dropSingleFileUpload: true,
+    beforeUpload: beforeUpload,
+    fileList: customFileInfo ? [customFileInfo] : [],
+    onRemove: function onRemove(e) {
+      var fileInfo = {
+        iconInfo: iconInfo,
+        customFileInfo: null
+      };
+      setCustomFileInfo(null);
+      onChange(fileInfo);
+    },
+    showUploadList: {
+      showDownloadIcon: true
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "custom-img"
+  }, /*#__PURE__*/React.createElement(_Button, {
+    icon: "upload"
+  }, intl.get("1a190483-11d6-4fc7-bdd8-9ebed6dcf14e").d("上传本地图片")), /*#__PURE__*/React.createElement("div", {
+    className: "custom-img-tip"
+  }, intl.get("718c1df1-dba2-4e7a-a078-46c54ee4875a").d("推荐上传40*40的PNG、SVG、JPG、JGPG,⼤⼩不超过2M"))))));
+};
+export default CustomImg;