@kdcloudjs/kdesign 1.5.4 → 1.5.5

package/es/tree/tree.js

@@ -2,11 +2,13 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useContext, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
+import cloneDeep from 'lodash/cloneDeep';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import TreeNode from './treeNode';
@@ -62,7 +64,9 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       innerEstimatedItemSize = TreeProps.estimatedItemSize,
       style = TreeProps.style,
       filterTreeNode = TreeProps.filterTreeNode,
-      filterValue = TreeProps.filterValue;
+      filterValue = TreeProps.filterValue,
+      expandOnClickNode = TreeProps.expandOnClickNode,
+      loadData = TreeProps.loadData;
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
 
   var treeNodePrefixCls = getPrefixCls(prefixCls, 'tree-node', customPrefixcls); // 树节点样式前缀
@@ -122,6 +126,16 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dragOverNodeKey = _React$useState10[0],
       setDragOverNodeKey = _React$useState10[1];
 
+  var _React$useState11 = React.useState(new _Set()),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      loadedKeys = _React$useState12[0],
+      setLoadedKeys = _React$useState12[1];
+
+  var _React$useState13 = React.useState(new _Set()),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      loadingKeys = _React$useState14[0],
+      setLoadingKeys = _React$useState14[1];
+
   var isSearching = React.useMemo(function () {
     return typeof filterTreeNode === 'function' && filterValue;
   }, [filterValue]);
@@ -170,15 +184,54 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       listRef.current.style.transform = "translate3d(0,".concat(tempStartOffset, "px,0)");
     }
   }, [listRef, scrollRef, virtual, estimatedItemSize]);
-  var handleExpand = React.useCallback(function (key, value, node) {
-    var newExpandedKeys = value ? addKeys(expandedKeys, [key]) : delKey(expandedKeys, [key]);
+  var handleNodeLoad = useCallback(function (loadedKeys, loadingKeys, data) {
+    var key = data.key;
+
+    if (!loadData || loadedKeys.has(key) || loadingKeys.has(key)) {
+      return;
+    }
+
+    setLoadingKeys(function (prevLoadingKeys) {
+      var _context;
+
+      return new _Set(_concatInstanceProperty(_context = []).call(_context, _toConsumableArray(prevLoadingKeys), [key]));
+    });
+    loadData(data).then(function () {
+      setLoadedKeys(function (prevState) {
+        var _context2;
+
+        return new _Set(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(prevState), [key]));
+      });
+      setLoadingKeys(function (prevState) {
+        var prevLoadingKeys = cloneDeep(prevState);
+        prevLoadingKeys.delete(key);
+        return prevLoadingKeys;
+      });
+    }).catch(function (e) {
+      setLoadingKeys(function (prevState) {
+        var prevLoadingKeys = cloneDeep(prevState);
+        prevLoadingKeys.delete(key);
+        return prevLoadingKeys;
+      });
+      setExpandedKeys(function (preExpandedKeys) {
+        return delKey(_toConsumableArray(preExpandedKeys), [key]);
+      });
+      throw e;
+    });
+  }, [loadData, setExpandedKeys]);
+  var handleExpand = React.useCallback(function (key, expanded, node) {
+    var newExpandedKeys = expanded ? addKeys(expandedKeys, [key]) : delKey(expandedKeys, [key]);
     onExpand && onExpand(newExpandedKeys, {
       node: node,
-      expanded: value
+      expanded: expanded
     });
     setScrollKey('');
     setIsInit(false);
-  }, [expandedKeys, onExpand]);
+
+    if (expanded && loadData) {
+      handleNodeLoad(loadedKeys, loadingKeys, node);
+    }
+  }, [expandedKeys, onExpand, loadData, handleNodeLoad, loadedKeys, loadingKeys]);
   var handleCheck = React.useCallback(function (key, value, node, event, pos) {
     var newCheckedKeys = value ? addKeys(checkedKeys, [key]) : delKey(checkedKeys, [key]);
     var checkState = checkStrictly ? getDataCheckededStateStrictly(newCheckedKeys) : getDataCheckededState(spreadAttrData, newCheckedKeys, halfCheckedKeys, maxLevel, false, pos, value);
@@ -267,11 +320,11 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }, [onDragEnd]);
   var handleDrop = React.useCallback(function (event, node, dragNode, dragNodesKeys) {
-    var _context;
+    var _context3;
 
     var pos = getPos(flattenAllData, dragNodesKeys);
 
-    var keys = _concatInstanceProperty(_context = getAllChildKeys(flattenAllData, pos)).call(_context, dragNodesKeys);
+    var keys = _concatInstanceProperty(_context3 = getAllChildKeys(flattenAllData, pos)).call(_context3, dragNodesKeys);
 
     onDrop && onDrop({
       event: event,
@@ -337,7 +390,6 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: treeRootClassName,
     ref: listRef
   }, visibleData && _mapInstanceProperty(visibleData).call(visibleData, function (item) {
-    // const props: any = {}
     var checked = getChecked(checkedKeys, item.key);
     var indeterminate = getHalfChecked(halfCheckedKeys, item.key);
     item.nodeKey = item.key;
@@ -352,8 +404,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     item.onSelect = handleSelect;
     item.checked = checked;
     item.selected = getSelected(selectedKeys, item.key);
-    item.indeterminate = indeterminate; // item.showLine = showLine
-
+    item.indeterminate = indeterminate;
     item.disabled = getDisabled(disabled, item.disabled);
     item.showIcon = showIcon || false;
     item.checkable = getCheckable(checkable, item.checkable); // 哪个优先
@@ -368,6 +419,9 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     item.getDragNode = getDragNode;
     item.setDragNode = setDragNode;
     item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
+    item.expandOnClickNode = expandOnClickNode;
+    item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
+    item.loadData = loadData;
     return /*#__PURE__*/React.createElement(TreeNode, _extends({}, item, {
       key: item.key,
       ref: treeNodeRef

package/es/tree/treeHooks.js

@@ -112,7 +112,6 @@ export var useScrollToKey = function useScrollToKey(scrollKey, index, estimatedI
     }
 
     if (treeRoot && treeNode) {
-      // const treeRootScrollTop = treeRoot.scrollTop
       var treeRootRect = treeRoot.getBoundingClientRect();
       var treeNodeRect = treeNode.getBoundingClientRect();
 

package/es/tree/treeNode.d.ts

@@ -25,6 +25,7 @@ export interface TreeNodeProps {
     pos?: string;
     estimatedItemSize?: number;
     dragOver?: boolean;
+    isLeaf?: boolean;
     onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
     onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
     onExpand?: (value: boolean, node: React.ReactNode) => void;

package/es/tree/treeNode.js

@@ -17,12 +17,13 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import Checkbox from './../checkbox';
 import Icon from '../icon';
+import Spin from '../spin';
 var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _context;
 
@@ -57,6 +58,8 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       indeterminate = TreeNodeProps.indeterminate,
       estimatedItemSize = TreeNodeProps.estimatedItemSize,
       dragOver = TreeNodeProps.dragOver,
+      expandOnClickNode = TreeNodeProps.expandOnClickNode,
+      loading = TreeNodeProps.loading,
       onExpand = TreeNodeProps.onExpand,
       onCheck = TreeNodeProps.onCheck,
       onDragStart = TreeNodeProps.onDragStart,
@@ -66,7 +69,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDragEnd = TreeNodeProps.onDragEnd,
       onDrop = TreeNodeProps.onDrop,
       onSelect = TreeNodeProps.onSelect,
-      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
 
   var nodeData = React.useMemo(function () {
     return _extends({
@@ -84,7 +87,6 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       indeterminate: indeterminate,
       icon: icon,
       switcherIcon: switcherIcon,
-      // showLine,
       showIcon: showIcon,
       selected: selected
     }, others);
@@ -166,57 +168,46 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return indentArr;
-  }; // line的两种模式， 图标被替换和图标不被替换
+  };
+
+  var isLeaf = useCallback(function () {
+    var isLeaf = TreeNodeProps.isLeaf,
+        loadData = TreeNodeProps.loadData,
+        hasChildNode = TreeNodeProps.hasChildNode;
+
+    if (isLeaf === false) {
+      return false;
+    }
 
+    return isLeaf || !loadData && !hasChildNode;
+  }, [TreeNodeProps]); // line的两种模式， 图标被替换和图标不被替换
 
   var renderExpandIcon = function renderExpandIcon() {
-    // todo 图标被替换则 line样式改变
-    // if(switcherIcon){
-    // }
-    if (hasChildNode) {
-      var _classNames2;
-
-      // todo    showLine模式 使用+ -符号图标
-      // if(!!showLine){
-      //   return (
-      //     <span
-      //     onClick={handleClick}
-      //     className={classNames(`${treeNodePrefixCls}-icon`)}
-      //   >
-      //     {expand ? <Icon type='search' /> : <Icon type='add' />}
-      //   </span>
-      //   )
-      // }
+    if (loading) {
+      return /*#__PURE__*/React.createElement(Spin, {
+        type: "component"
+      });
+    }
+
+    var showExpandIcon = !isLeaf();
+
+    if (showExpandIcon) {
+      var _classNames3;
+
       if (Array.isArray(switcherIcon) && switcherIcon.length === 2) {
         return /*#__PURE__*/React.createElement("span", {
-          className: classNames("".concat(treeNodePrefixCls, "-icon"))
+          className: classNames("".concat(treeNodePrefixCls, "-icon"), _defineProperty({}, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode)),
+          onClick: expandOnClickNode ? undefined : handleExpandIconClick
         }, expandState ? renderIcon(switcherIcon[1]) : renderIcon(switcherIcon[0]));
       }
 
       return /*#__PURE__*/React.createElement("span", {
-        className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames2, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _classNames2))
+        className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode), _classNames3)),
+        onClick: expandOnClickNode ? undefined : handleExpandIconClick
       }, renderIcon(switcherIcon || /*#__PURE__*/React.createElement(Icon, {
         type: "arrow-right-solid"
       })));
     } else {
-      // if(typeof showLine === 'object' && !showLine.showLeafIcon){
-      //   return (
-      //     <span
-      //       className={classNames(`${treeNodePrefixCls}-icon-hidden`)}
-      //     >
-      //       {/* todo  renderLeafLine() */}
-      //       {renderIcon(leafIcon)}
-      //     </span>
-      //   )
-      // }else if(typeof showLine === 'object' && showLine.showLeafIcon || showLine === true){
-      //   return (
-      //     <span
-      //       className={classNames(`${treeNodePrefixCls}-leaf-icon`)}
-      //     >
-      //       {renderIcon(leafIcon)}
-      //     </span>
-      //   )
-      // }
       // 叶子结点 隐藏展开按钮
       return /*#__PURE__*/React.createElement("span", {
         className: "".concat(treeNodePrefixCls, "-icon-hidden")
@@ -231,11 +222,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var renderNode = function renderNode() {
-    var _classNames3;
+    var _classNames4, _classNames5;
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       draggable: draggable && !disabled,
-      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-drag-over"), dragOver), _classNames3)),
+      className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _defineProperty(_classNames4, "".concat(treeNodePrefixCls, "-drag-over"), dragOver), _classNames4)),
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       onDragOver: handleDragOver,
@@ -244,7 +235,8 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDrop: handleDrop,
       ref: dragRef
     }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(treeNodePrefixCls, "-title-wrap")
+      className: classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap"), true), _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-hover"), !expandOnClickNode && !disabled), _defineProperty(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-selected"), selected && selectable && !disabled && !expandOnClickNode), _classNames5)),
+      onClick: expandOnClickNode ? undefined : handleClick
     }, checkable ? /*#__PURE__*/React.createElement(Checkbox, {
       onChange: handleOnchange,
       checked: checked,
@@ -271,12 +263,16 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       selectNode: handleSelect
     };
   });
-  var handleClick = React.useCallback(function (e) {
-    e.stopPropagation();
+  var handleExpandIconClick = useCallback(function (e) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
     setExpandState(!expandState);
     onExpand && onExpand(nodeKey, !expandState, nodeData);
+  }, [expandState, nodeData, nodeKey, onExpand, setExpandState]);
+  var handleClick = React.useCallback(function (e) {
+    e.stopPropagation();
+    expandOnClickNode && handleExpandIconClick();
     handleSelect(e);
-  }, [setExpandState, expandState, onExpand, nodeKey, nodeData, handleSelect]);
+  }, [expandOnClickNode, handleExpandIconClick, handleSelect]);
   var handleDragStart = React.useCallback(function (e) {
     if (!draggable) return;
     setDragNode(nodeData);
@@ -325,11 +321,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [onDrop, nodeData, nodeKey]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(treeNodePrefixCls, "-item"), _defineProperty({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable), _defineProperty({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-opened"), expandState), _concatInstanceProperty(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
+    className: classNames("".concat(treeNodePrefixCls, "-item"), _defineProperty({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable && expandOnClickNode), _defineProperty({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled && expandOnClickNode), _defineProperty({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-opened"), expandState), _concatInstanceProperty(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
     style: _extends({
       height: "".concat(estimatedItemSize, "px")
     }, style),
-    onClick: handleClick
+    onClick: expandOnClickNode ? handleClick : undefined
   }, renderNode());
 });
 TreeNode.displayName = 'TreeNode';

package/es/tree/utils/treeUtils.js

@@ -56,7 +56,7 @@ export var flattenAll = function flattenAll(treeData) {
 
       var _pos = pos ? _concatInstanceProperty(_context = "".concat(pos, "-")).call(_context, index) : "".concat(index);
 
-      var hasChildNode = children && children instanceof Array && children.length > 0;
+      var hasChildNode = item.isLeaf ? false : children && children instanceof Array && children.length > 0;
 
       var flattenNode = _extends({
         title: title,
@@ -75,7 +75,7 @@ export var flattenAll = function flattenAll(treeData) {
       }
 
       _level++;
-      fn(children, newTreeData, _level, _pos, flattenNode);
+      hasChildNode && fn(children, newTreeData, _level, _pos, flattenNode);
     });
     return newTreeData;
   };

package/lib/_utils/usePopper.js

@@ -520,6 +520,11 @@ function usePopper(locatorElement, popperElement, props) {
     props.visible === undefined && setVisible(false);
     onVisibleChange && onVisibleChange(false);
   }, [onVisibleChange, props.visible]);
+
+  var matchTrigger = function matchTrigger(words) {
+    return Array.isArray(trigger) ? (0, _includes.default)(trigger).call(trigger, words) : trigger === words;
+  };
+
   (0, _react.useEffect)(function () {
     if (exist && visible) {
       var mouseleaveTimer;
@@ -536,13 +541,13 @@ function usePopper(locatorElement, popperElement, props) {
             Y = e.clientY;
         var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
         var inPopperRect = X > popperRect.left && X < popperRect.right && Y > popperRect.top && Y < popperRect.bottom;
-        var ableArea = evType === 'contextmenu' ? inPopperRect : inTriggerRect || inPopperRect;
+        var ableArea = matchTrigger('contextMenu') ? inPopperRect : inTriggerRect || inPopperRect;
 
         if (ableArea) {
           mouseleaveTimer && clearTimeout(mouseleaveTimer);
-          evType === 'focus' && triggerNode.focus();
+          matchTrigger('focus') && triggerNode.focus();
         } else {
-          evType === 'mouseenter' ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
+          matchTrigger('hover') ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
         }
       };
 
@@ -550,14 +555,18 @@ function usePopper(locatorElement, popperElement, props) {
         leading: true
       });
       var mapEvent = {
-        mouseenter: 'mousemove',
-        mouseup: 'mousedown',
+        hover: 'mousemove',
+        click: 'mousedown',
         focus: 'mousedown',
-        contextmenu: 'mousedown'
+        contextMenu: 'mousedown'
       };
-      document.addEventListener(mapEvent[evType], debounceHidePopper);
+      Array.isArray(trigger) ? trigger.forEach(function (action) {
+        return document.addEventListener(mapEvent[action], debounceHidePopper);
+      }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);
       return function () {
-        document.removeEventListener(mapEvent[evType], debounceHidePopper);
+        Array.isArray(trigger) ? trigger.forEach(function (action) {
+          return document.removeEventListener(mapEvent[action], debounceHidePopper);
+        }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
       };
     }
   }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);

package/lib/alert/alert.js

@@ -217,13 +217,13 @@ var Alert = function Alert(props) {
   };
 
   var iconNode = /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(alertPrefixCls, "-icon")
+    className: (0, _classnames.default)("".concat(alertPrefixCls, "-icon"), getAlertColorType('icon'))
   }, icon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
     type: alertIconType
   }));
 
   var AlertComp = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(alertClasses, getAlertColorType('bg'), getAlertColorType('font'))
+    className: (0, _classnames.default)(alertClasses, getAlertColorType('bg'), getAlertColorType('border'))
   }, events, {
     ref: alertRef
   }), showIcon && iconNode, /*#__PURE__*/_react.default.createElement("div", {

package/lib/alert/style/index.css

@@ -109,12 +109,14 @@
   z-index: var(--kd-g-z-index-apex, 9999);
   display: none;
   width: 100%;
-  padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px);
+  padding: var(--kd-c-alert-sizing-padding-vertical, 12px) var(--kd-c-alert-sizing-padding-horizontal, 20px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-transition: display 3s;
   transition: display 3s;
+  border-radius: var(--kd-c-alert-radius-border, 4px);
+  border: 1px solid;
 }
 .kd-alert-banner-container {
   display: -webkit-box;
@@ -140,23 +142,24 @@
 .kd-alert.alert-info-bg-color {
   background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
-.kd-alert.alert-success-font-color {
-  color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854));
+.kd-alert.alert-success-border-color {
+  border-color: var(--kd-c-alert-color-border-success, #DCFAE4);
 }
-.kd-alert.alert-warning-font-color {
-  color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c));
+.kd-alert.alert-warning-border-color {
+  border-color: var(--kd-c-alert-color-border-warning, #FFF1D4);
 }
-.kd-alert.alert-error-font-color {
-  color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323));
+.kd-alert.alert-error-border-color {
+  border-color: var(--kd-c-alert-color-border-error, #FFDBE0);
 }
-.kd-alert.alert-info-font-color {
-  color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5));
+.kd-alert.alert-info-border-color {
+  border-color: var(--kd-c-alert-color-border-info, #E0EFFF);
 }
 .kd-alert-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   cursor: default;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
   font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
 }
@@ -164,9 +167,22 @@
   -ms-flex-item-align: center;
       align-self: center;
 }
+.kd-alert-icon.alert-success-icon-color {
+  color: var(--kd-c-alert-color-icon-success, var(--kd-g-color-success, #1ba854));
+}
+.kd-alert-icon.alert-warning-icon-color {
+  color: var(--kd-c-alert-color-icon-warning, var(--kd-g-color-warning, #ff991c));
+}
+.kd-alert-icon.alert-error-icon-color {
+  color: var(--kd-c-alert-color-icon-error, var(--kd-g-color-error, #fb2323));
+}
+.kd-alert-icon.alert-info-icon-color {
+  color: var(--kd-c-alert-color-icon-info, var(--kd-g-color-ongoing, #276ff5));
+}
 .kd-alert-message {
+  color: var(--kd-c-alert-color-text, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
-  line-height: 18px;
+  line-height: 16px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -196,10 +212,10 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
   color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
   font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
-  justify-self: flex-end;
   cursor: pointer;
 }
 .kd-alert-close-icon:hover {

package/lib/alert/style/index.less

@@ -16,11 +16,18 @@
   @info: @alert-info-bg-color;
 }
 
-.alert-font-type-set() {
-  @success: @alert-success-font-color;
-  @warning: @alert-warning-font-color;
-  @error: @alert-error-font-color;
-  @info: @alert-info-font-color;
+.alert-icon-type-set() {
+  @success: @alert-success-icon-color;
+  @warning: @alert-warning-icon-color;
+  @error: @alert-error-icon-color;
+  @info: @alert-info-icon-color;
+}
+
+.alert-border-type-set() {
+  @success: @alert-success-border-color;
+  @warning: @alert-warning-border-color;
+  @error: @alert-error-border-color;
+  @info: @alert-info-border-color;
 }
 
 @alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);
@@ -36,9 +43,11 @@
     z-index: @z-index-apex;
     display: none;
     width: 100%;
-    padding: @alert-padding-top @alert-padding-horizontal @alert-padding-bottom;
+    padding: @alert-padding-vertical @alert-padding-horizontal;
     align-items: center;
     transition: display 3s;
+    border-radius: @alert-radius-border;
+    border: 1px solid;
   }
   &-banner-container {
     display: flex;
@@ -50,19 +59,24 @@
   each(.alert-bg-type-set(), {
     .alert-bg-type(@key, @value);
   });
-  each(.alert-font-type-set(), {
-    .alert-font-type(@key, @value);
+  each(.alert-border-type-set(), {
+    .alert-border-type(@key, @value);
   });
   &-icon {
     display: flex;
     cursor: default;
     .icon-center();
+    height: @alert-message-icon-font-size;
     margin-right: @alert-message-icon-margin-right;
     font-size: @alert-message-icon-font-size;
+    each(.alert-icon-type-set(), {
+      .alert-icon-type(@key, @value);
+    });
   }
   &-message {
+    color: @alert-message-color-text;
     font-size: @alert-message-font-size;
-    line-height: 18px;
+    line-height: 16px;
     display: flex;
     flex-grow: 1;
     cursor: default;
@@ -86,10 +100,10 @@
   }
   &-close-icon {
     display: flex;
+    height: @alert-message-icon-font-size;
     margin-left: @alert-close-icon-margin-left;
     color: @alert-close-icon-color;
     font-size: @alert-close-icon-font-size;
-    justify-self: flex-end;
     cursor: pointer;
     &:hover {
       color: @alert-close-icon-color-hover;

package/lib/alert/style/mixin.less

@@ -4,12 +4,18 @@
   }
 }
 
-.alert-font-type(@type, @color) {
-  &.alert-@{type}-font-color {
+.alert-icon-type(@type, @color) {
+  &.alert-@{type}-icon-color {
     color: @color
   }
 }
 
+.alert-border-type(@type, @color) {
+  &.alert-@{type}-border-color {
+    border-color: @color
+  }
+}
+
 .square(@side-length) {
   width: @side-length;
   height: @side-length;

package/lib/alert/style/token.less

@@ -8,10 +8,16 @@
 @alert-error-bg-color: var(~'@{alert-custom-prefix}-color-background-error', @color-background-error); // 反馈浮层错误提示的背景色
 @alert-info-bg-color: var(~'@{alert-custom-prefix}-color-background-info', @color-background-ongoing); // 反馈浮层一般提示的背景色
 
-@alert-success-font-color: var(~'@{alert-custom-prefix}-color-text-success', @color-success); // 反馈浮层成功提示的文字色
-@alert-warning-font-color: var(~'@{alert-custom-prefix}-color-text-warning', @color-warning); // 反馈浮层警告提示的文字色 
-@alert-error-font-color: var(~'@{alert-custom-prefix}-color-text-error', @color-error); // 反馈浮层错误提示的文字色
-@alert-info-font-color: var(~'@{alert-custom-prefix}-color-text-info', @color-ongoing); // 反馈浮层一般提示的文字色
+@alert-message-color-text: var(~'@{alert-custom-prefix}-color-text', @color-text-primary); // 反馈浮层提示的文字色
+@alert-success-icon-color: var(~'@{alert-custom-prefix}-color-icon-success', @color-success); // 反馈浮层成功提示的图标颜色
+@alert-warning-icon-color: var(~'@{alert-custom-prefix}-color-icon-warning', @color-warning); // 反馈浮层警告提示的图标颜色
+@alert-error-icon-color: var(~'@{alert-custom-prefix}-color-icon-error', @color-error); // 反馈浮层错误提示的图标颜色
+@alert-info-icon-color: var(~'@{alert-custom-prefix}-color-icon-info', @color-ongoing); // 反馈浮层一般提示的图标颜色
+
+@alert-success-border-color: var(~'@{alert-custom-prefix}-color-border-success', #DCFAE4); // 反馈浮层成功提示的边框色
+@alert-warning-border-color: var(~'@{alert-custom-prefix}-color-border-warning', #FFF1D4); // 反馈浮层警告提示的边框色 
+@alert-error-border-color: var(~'@{alert-custom-prefix}-color-border-error', #FFDBE0); // 反馈浮层错误提示的边框色
+@alert-info-border-color: var(~'@{alert-custom-prefix}-color-border-info', #E0EFFF); // 反馈浮层一般提示的边框色
 
 @alert-close-icon-color: var(~'@{alert-custom-prefix}-close-icon-color-text', @color-text-secondary); 
 @alert-close-icon-color-hover: var(~'@{alert-custom-prefix}-close-icon-color-text-hover', @color-theme-hover); 
@@ -22,8 +28,10 @@
 @alert-close-icon-font-size: var(~'@{alert-custom-prefix}-close-icon-font-size', @font-size-middle);
 
 // spacing
-@alert-padding-top: var(~'@{alert-custom-prefix}-sizing-padding-top', 8px);
-@alert-padding-bottom: var(~'@{alert-custom-prefix}-sizing-padding-bottom', 12px);
-@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 12px);
+@alert-padding-vertical: var(~'@{alert-custom-prefix}-sizing-padding-vertical', 12px);
+@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 20px);
 @alert-message-icon-margin-right: var(~'@{alert-custom-prefix}-message-icon-sizing-margin-right', 8px);
-@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
+@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
+
+// radius
+@alert-radius-border: var(~'@{alert-custom-prefix}-radius-border', 4px);