@kdcloudjs/kdesign 1.7.25 → 1.7.26

package/lib/cascader/style/index.less

@@ -12,22 +12,6 @@
   cursor: pointer;
   background: @cascader-bg-color;
 
-  &:focus > &-input {
-    border-color: @cascader-active-color;
-
-    .@{kd-prefix}-input-suffix,
-    i[class*='kdicon'] {
-      color: @cascader-active-color;
-    }
-  }
-
-  &:hover > &-input {
-    .@{kd-prefix}-input-suffix,
-    i[class*='kdicon'] {
-      color: @cascader-active-color;
-    }
-  }
-
   &.disabled {
     .@{cascader-picker-prefix-cls}-input {
       cursor: not-allowed;
@@ -54,7 +38,7 @@
   }
 
   &-input {
-    background-color: transparent !important;
+    background-color: transparent;
     transition: all 0.2s;
 
     > input {
@@ -63,10 +47,7 @@
     }
 
     &.expand {
-      border-color: @cascader-active-color;
-
       i[class*='kdicon'] {
-        color: @cascader-active-color;
         transform: rotate(180deg);
       }
     }
@@ -105,7 +86,7 @@
     transform: scale(0.9) translateY(-50%);
 
     &:hover {
-      color: @cascader-active-color;
+      color: @cascader-clear-color-hover;
     }
   }
 }
@@ -217,6 +198,11 @@
     position: relative;
     border-bottom: 1px solid #d9d9d9;
     background: @cascader-bg-color;
+
+    &:not(.@{kd-prefix}-cascader-disabled):focus {
+      border-color: @cascader-selected-color;
+      outline: none;
+    }
   }
 
   &-multiple-wrapper {
@@ -228,7 +214,8 @@
 
   &-placeholder {
     position: absolute;
-    color: @select-placeholder-color;
+    font-size: @middle-font-size;
+    color: @cascader-placeholder-color;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -267,10 +254,6 @@
         transform: rotate(0deg);
         transition: transform calc(@transition-duration - 0.1s) @ease;
       }
-
-      &-focus {
-        color: @cascader-g-color-border-foucs;
-      }
     }
 
     &-clear {
@@ -285,6 +268,7 @@
       }
     }
   }
+
   &-tag {
     &-describe {
       font-size: 12px;
@@ -296,7 +280,6 @@
       &-content {
         display: inline-flex;
         align-items: center;
-        vertical-align: middle;
         padding: 0 7px;
         overflow: hidden;
         white-space: nowrap;
@@ -306,4 +289,43 @@
       }
     }
   }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    .@{kd-prefix}-cascader-picker-label {
+      color: @cascader-disabled-color;
+    }
+
+    .@{kd-prefix}-cascader-picker-input {
+      background-color: @cascader-disabled-color-background;
+
+      > input {
+        background-color: @cascader-disabled-color-background;
+      }
+    }
+
+    &.@{kd-prefix}-cascader-multiple {
+      background-color: @cascader-disabled-color-background;
+    }
+
+    .@{kd-prefix}-cascader-suffix {
+      color: @cascader-disabled-color;
+    }
+
+    .@{kd-prefix}-cascader-tag-describe-content {
+      color: @cascader-tag-disabled-color;
+      border-color: @cascader-tag-disabled-color;
+    }
+  }
+
+  &-picker:not(&-disabled):hover, &-expand {
+    .kd-input-wrapper {
+      border-color: @cascader-g-color-border-focus;
+    }
+  }
+
+  &-multiple:not(&-disabled):hover, &-expand {
+    border-color: @cascader-g-color-border-focus;
+  }
 }

package/lib/cascader/style/token.less

@@ -12,17 +12,18 @@
 @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
 
 // colors
-@cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
 @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
 @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
 @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-disabled-color-background: var(~'@{cascader-prefix}-color-background-disabled', @color-background-contain-disabled);
 @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
-@cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
-@cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
 @cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
+@cascader-g-color-border-focus: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
+@cascader-tag-disabled-color: var(~'@{cascader-prefix}-tag-disabled-color', #d9d9d9);
+@cascader-placeholder-color: var(~'@{cascader-prefix}-placeholder-color', @color-text-placeholder);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/lib/city-picker/city-picker.js

@@ -128,9 +128,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var city = (0, _find.default)(cityList).call(cityList, function (city) {
       return city.id === value;
     });
-    if (city) {
-      setSeletedCity(city);
-    }
+    setSeletedCity(city);
   }, [commonList, domesticList, foreignList, value]);
   (0, _react.useEffect)(function () {
     if (typeof props.visible !== 'undefined') {
@@ -244,6 +242,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         key: item.id,
         value: initValue,
         city: item,
+        className: searchValue ? "".concat(selectPrefixCls, "-list-item-match") : undefined,
         renderCityInfo: function renderCityInfo(data, flag) {
           return _renderCityInfo(data, isCommon, flag);
         },
@@ -289,7 +288,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       return (0, _concat.default)(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
     } else {
       var _context4, _context5, _context6;
-      return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
+      return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {

package/lib/city-picker/option.js

@@ -20,6 +20,7 @@ var InternalOption = function InternalOption(props, ref) {
   var children = props.children,
     value = props.value,
     disabled = props.disabled,
+    className = props.className,
     onChangeSelect = props.onChangeSelect,
     _props$city = props.city,
     city = _props$city === void 0 ? {} : _props$city,
@@ -32,7 +33,7 @@ var InternalOption = function InternalOption(props, ref) {
     prefixCls = _useContext.prefixCls;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
-  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
+  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
   var handleClick = function handleClick(e) {
     e.preventDefault();
     if (disabled || id === undefined) return;

package/lib/city-picker/style/index.css

@@ -121,6 +121,9 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.kd-city-picker-selector {
+  width: 100%;
+}
 .kd-city-picker-selector:hover .kd-city-picker-icon-active {
   color: #3761ca;
 }
@@ -341,11 +344,20 @@
   background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
   color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
 }
+.kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
+  color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
+}
 .kd-city-picker-list-item-disabled {
   color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
   background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
 }
+.kd-city-picker-list > .kd-city-picker-list-item-match {
+  color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
+}
+.kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
+  color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
+}
 .kd-city-picker-highlight {
   color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
 }

package/lib/city-picker/style/index.less

@@ -14,6 +14,9 @@
   display: flex;
   flex-direction: column;
 
+  &-selector {
+    width: 100%;
+  }
   &-selector:hover {
     .@{city-picker-prefix-cls}-icon-active {
       color: #3761ca;
@@ -225,6 +228,10 @@
       &-selected:not(&-disabled) {
         background-color: @city-picker-item-selected-bg;
         color: @city-picker-list-item-color-selected;
+
+        .@{city-picker-prefix-cls}-list-item-info {
+          color: @city-picker-list-item-color-selected;
+        }
       }
 
       &-disabled {
@@ -233,6 +240,13 @@
         background-color: @city-picker-disabled-option-bg;
       }
     }
+
+    & > .@{city-picker-prefix-cls}-list-item-match {
+      color: @city-picker-font-color;
+      .@{city-picker-prefix-cls}-list-item-info {
+        color: @city-picker-placeholder-color;
+      }
+    }
   }
 
   &-highlight {

package/lib/collapse/panel.js

@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
@@ -18,27 +20,37 @@ var _utils = require("../_utils");
 var _icon = _interopRequireDefault(require("../icon"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _classNames6, _classNames7, _classNames8;
   var _React$useContext = _react.default.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
-  var _getCompProps = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
-    disabled = _getCompProps.disabled,
-    extra = _getCompProps.extra,
-    assist = _getCompProps.assist,
-    header = _getCompProps.header,
-    onChange = _getCompProps.onChange,
-    panelKey = _getCompProps.panelKey,
-    innerKey = _getCompProps.innerKey,
-    bordered = _getCompProps.bordered,
-    expandIcon = _getCompProps.expandIcon,
-    expandIconPosition = _getCompProps.expandIconPosition,
-    style = _getCompProps.style,
-    className = _getCompProps.className,
-    children = _getCompProps.children,
-    customPrefixcls = _getCompProps.prefixCls;
+  var _a = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
+    disabled = _a.disabled,
+    extra = _a.extra,
+    assist = _a.assist,
+    header = _a.header,
+    onChange = _a.onChange,
+    panelKey = _a.panelKey,
+    innerKey = _a.innerKey,
+    bordered = _a.bordered,
+    expandIcon = _a.expandIcon,
+    expandIconPosition = _a.expandIconPosition,
+    style = _a.style,
+    title = _a.title,
+    className = _a.className,
+    children = _a.children,
+    customPrefixcls = _a.prefixCls,
+    others = __rest(_a, ["disabled", "extra", "assist", "header", "onChange", "panelKey", "innerKey", "bordered", "expandIcon", "expandIconPosition", "style", "title", "className", "children", "prefixCls"]);
   var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
   var childrenRef = (0, _react.useRef)();
   var setHeightTimerRef = (0, _react.useRef)(null);
@@ -80,7 +92,8 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: className,
       onClick: handleClick
     }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/_react.default.createElement("span", {
-      className: headerClassName
+      className: headerClassName,
+      title: title
     }, renderReactNode(header)));
   };
   var renderRight = function renderRight() {
@@ -147,11 +160,11 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
     }
   }, [childrenRef.current, expandAnimation, expand]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: rootClassName,
     style: style,
     ref: panelPrefixClsRef
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, others), /*#__PURE__*/_react.default.createElement("span", {
     className: topClassName
   }, renderLeft(), renderMiddle(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
     className: childrenClassName,

package/lib/collapse/style/index.css

@@ -116,9 +116,12 @@
 .kd-collapse-panel:last-child {
   border-top: none;
 }
-.kd-collapse-panel:first-child {
+.kd-collapse-panel-border.kd-collapse-panel:first-child {
   border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
+.kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
+  border-top: none;
+}
 .kd-collapse-panel {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/lib/collapse/style/index.less

@@ -9,9 +9,12 @@
   &-panel:last-child {
     border-top: none;
   }
-  &-panel:first-child {
+  &-panel-border&-panel:first-child {
     border-top: @collapse-border-width solid @collapse-border-color;
   }
+  &-panel-border&-panel:not(:nth-child(1)) {
+    border-top: none;
+  }
   &-panel {
     display: inline-flex;
     flex-direction: column;

package/lib/form/Field.d.ts

@@ -17,6 +17,7 @@ export interface FormItemProps {
     validateTrigger?: string | string[];
     wrapperWidth?: string | number;
     valuePropName?: string;
+    extra?: React.ReactNode;
 }
 export declare const INNER_VALUE_PROPS_LIST: {
     name: string;

package/lib/form/Field.js

@@ -114,7 +114,8 @@ var Field = function Field(props) {
     wrapperWidth = props.wrapperWidth,
     validateTrigger = props.validateTrigger,
     defaultValue = props.defaultValue,
-    valuePropName = props.valuePropName;
+    valuePropName = props.valuePropName,
+    extra = props.extra;
   var htmlFor = customizeHtmlFor || (name ? (0, _concat.default)(_context = "form_".concat(name, "_")).call(_context, (Math.random() * 100).toFixed(0)) : undefined);
   var childrenNode = null;
   var innerValuePropName = 'value';
@@ -200,7 +201,7 @@ var Field = function Field(props) {
     };
   }, []);
   var formPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form', customizePrefixcls);
-  var formItemClassName = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field"), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), _classnames), className);
+  var formItemClassName = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field"), true), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-hidden"), hidden), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-vertical"), vertical), (0, _defineProperty2.default)(_classnames, "".concat(formPrefixCls, "-field-extra"), extra), _classnames), className);
   var value = getFieldValue(name);
   var validateMessage = getFieldError(name);
   var getInputValueFormProp = function getInputValueFormProp(evt) {
@@ -295,7 +296,8 @@ var Field = function Field(props) {
     requiredMark: mergedRequired
   }), /*#__PURE__*/_react.default.createElement(_FieldWrapper.default, {
     width: wrapperWidth,
-    validateMessage: validateMessage
+    validateMessage: validateMessage,
+    extra: extra
   }, (0, _map.default)(childrenArray).call(childrenArray, function (child, index) {
     var keys = mergeProps((0, _extends3.default)((0, _extends3.default)({}, generateEventHandler(handleValueValidate, validateTrigger)), {
       key: index,

package/lib/form/FieldWrapper.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface FieldWrapperProps {
+    extra?: React.ReactNode;
     children?: React.ReactNode;
     width?: string | number;
     validateMessage?: string;

package/lib/form/FieldWrapper.js

@@ -23,19 +23,27 @@ var FieldWrapper = function FieldWrapper(props) {
   var children = wrapperProps.children,
     customizePrefixCls = wrapperProps.prefixCls,
     width = wrapperProps.width,
-    validateMessage = wrapperProps.validateMessage;
+    validateMessage = wrapperProps.validateMessage,
+    extra = wrapperProps.extra;
   var wrapperPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, 'form-field-wrapper', customizePrefixCls);
   var wrapperClassName = (0, _classnames.default)(["".concat(wrapperPrefixCls)]);
   var messageClassName = (0, _classnames.default)(["".concat(wrapperPrefixCls, "-message")]);
+  var validate = validateMessage ? /*#__PURE__*/_react.default.createElement("p", {
+    className: messageClassName,
+    title: validateMessage
+  }, validateMessage) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,
     style: {
       width: width
     }
-  }, children, validateMessage && /*#__PURE__*/_react.default.createElement("p", {
-    className: messageClassName,
-    title: validateMessage
-  }, validateMessage));
+  }, children, extra ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra-message")
+  }, validateMessage), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(wrapperPrefixCls, "-extra-text")
+  }, extra)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validate));
 };
 var _default = FieldWrapper;
 exports.default = _default;

package/lib/form/style/index.css

@@ -152,6 +152,9 @@
 .kd-form-field-hidden {
   display: none !important;
 }
+.kd-form-field-extra {
+  margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
+}
 .kd-form-field-label {
   font-size: var(--kd-c-form-field-label-font-size, 12px);
   line-height: var(--kd-c-form-field-label-line-height, 18px);
@@ -178,7 +181,8 @@
 .kd-form-field-wrapper {
   position: relative;
 }
-.kd-form-field-wrapper-message {
+.kd-form-field-wrapper-message,
+.kd-form-field-wrapper-extra {
   position: absolute;
   left: -7px;
   right: 0;
@@ -191,3 +195,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.kd-form-field-wrapper-extra-message {
+  color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
+}
+.kd-form-field-wrapper-extra-text {
+  color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
+}

package/lib/form/style/index.less

@@ -46,6 +46,10 @@
   &-hidden {
     display: none !important;
   }
+
+  &-extra {
+    margin-bottom: calc(@form-field-spacing-margin-bottom * 2);
+  }
 }
 
 .@{field-label-cls} {
@@ -76,7 +80,8 @@
 
 .@{field-wrapper-cls} {
   position: relative;
-  &-message {
+
+  &-message, &-extra {
     position: absolute;
     left: -7px;
     right: 0;
@@ -89,4 +94,14 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
+  &-extra {
+    &-message {
+      color: @form-error-color;
+    }
+
+    &-text {
+      color: @form-extra-color;
+    }
+  }
 }

package/lib/form/style/token.less

@@ -5,6 +5,7 @@
 // color
 @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
 @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
+@form-extra-color: var(~'@{form-prefix}-extra-color', @color-text-third);
 
 // font
 @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);

package/lib/tag/tag.d.ts

@@ -19,6 +19,7 @@ export interface ITagProps {
     onClick?: React.MouseEventHandler<HTMLElement>;
     onClose?: React.MouseEventHandler<HTMLElement>;
     children?: React.ReactNode;
+    title?: string;
 }
 declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<unknown>>;
 export default Tag;

package/lib/tree-select/tree-select.js

@@ -456,7 +456,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
         onClose: function onClose(e) {
           return handleRemove(e, key);
         },
-        "data-tag": key
+        "data-tag": key,
+        title: label
       }, label));
     }), maxTagCount && selectTreeNodes.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/_react.default.createElement("span", {
       className: itemCls

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.25",
+  "version": "1.7.26",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [