@aloudata/aloudata-design 2.0.0-beta.9 → 2.0.1

package/dist/Input/components/TextArea/index.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["bordered", "size", "disabled", "className"];
+var _excluded = ["bordered", "size", "disabled", "className", "allowClear"];
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
@@ -11,6 +11,7 @@ import classnames from 'classnames';
 import React, { useContext } from 'react';
 import SizeContext from "../../../ConfigProvider/sizeContext";
 import { CloseCircleFill } from "../../../Icon";
+import IconButton from "../../../IconButton";
 import { getSizeType } from "../Input";
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$bordered = props.bordered,
@@ -19,19 +20,24 @@ export default /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled = props.disabled,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
     rest = _objectWithoutProperties(props, _excluded);
   var contentSize = useContext(SizeContext);
   var size = customSize || contentSize || 'middle';
   return /*#__PURE__*/React.createElement(AntdTextArea, _extends({}, rest, {
+    autoComplete: "off",
     disabled: disabled,
     spellCheck: false,
     className: classnames('ald-input', 'ald-input-textarea', "ald-input-textarea-".concat(getSizeType(size)), _defineProperty({}, "ald-input-disabled", disabled), className),
-    allowClear: {
-      clearIcon: /*#__PURE__*/React.createElement(CloseCircleFill, {
-        size: 20,
-        color: "#6B7280"
+    allowClear: allowClear ? {
+      clearIcon: /*#__PURE__*/React.createElement(IconButton, {
+        size: "small",
+        icon: /*#__PURE__*/React.createElement(CloseCircleFill, {
+          color: "#9CA3AF"
+        })
       })
-    },
+    } : false,
     ref: ref,
     bordered: bordered
   }));

package/dist/Input/style/index.less

@@ -1,6 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 @import '../../style/index.less';
 @import '../../Icon/index.less';
+@import '../../IconButton/style/index.less';
 @import './reset.less';
 @import './size.less';
 @import './status.less';

package/dist/MemberPicker/index.js

@@ -1,3 +1,5 @@
+var _excluded = ["value", "type", "onChange", "multiple", "dropdownWidth", "open", "onOpenChange", "placeholder", "className", "allowClear", "disabled", "onClear", "size", "selectType", "prefix", "lockedIds"];
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -6,12 +8,16 @@ 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; }
+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; }
 import { useRequest } from 'ahooks';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Avatar from "../Avatar";
 import ConfigProvider from "../ConfigProvider";
 import { EUserType } from "../ConfigProvider/getUserList";
+import { UserGroup } from "../Icon";
 import Select from "../Select";
 import message from "../message";
 import Panel from "./components/Panel";
@@ -30,14 +36,16 @@ var Component = function Component(_ref) {
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? '选择' : _ref$placeholder,
     className = _ref.className,
-    prefix = _ref.prefix,
     allowClear = _ref.allowClear,
     disabled = _ref.disabled,
     _onClear = _ref.onClear,
     size = _ref.size,
-    selectType = _ref.selectType,
+    _ref$selectType = _ref.selectType,
+    selectType = _ref$selectType === void 0 ? 'secondary' : _ref$selectType,
+    propPrefix = _ref.prefix,
     _ref$lockedIds = _ref.lockedIds,
-    lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds;
+    lockedIds = _ref$lockedIds === void 0 ? [] : _ref$lockedIds,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
     getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
@@ -183,8 +191,14 @@ var Component = function Component(_ref) {
     setDropdownOpen(open);
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
   }, [onOpenChange]);
-  return /*#__PURE__*/React.createElement(Select, {
-    prefix: prefix,
+  var panelKey = useMemo(function () {
+    if (dropdownOpen) {
+      return _.sampleSize('abcdefghijklmnopqrstuvwxyz0123456789', 8).join('');
+    }
+  }, [dropdownOpen]);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    prefix: propPrefix
+  }, restProps, {
     size: size,
     type: selectType,
     className: classNames('ald-member-picker-select', className),
@@ -211,14 +225,25 @@ var Component = function Component(_ref) {
     options: selectedUserList.map(function (item) {
       if (item.type === EUserType.USER_GROUP) return {
         label: item.name,
-        value: item.groupId
+        value: item.groupId,
+        tag: /*#__PURE__*/React.createElement("div", {
+          className: 'ald-member-picker-tag'
+        }, /*#__PURE__*/React.createElement(UserGroup, {
+          size: 20
+        }), item.name)
       };
       return {
         label: item.nickname || item.name,
-        value: item.userId
+        value: item.userId,
+        tag: /*#__PURE__*/React.createElement("div", {
+          className: 'ald-member-picker-tag'
+        }, /*#__PURE__*/React.createElement(Avatar, {
+          size: 20,
+          src: item.photo
+        }), item.nickname || item.name)
       };
     }),
-    optionLabelProp: "label",
+    optionLabelProp: multiple ? 'label' : 'tag',
     open: dropdownOpen,
     onDropdownVisibleChange: onDropdownOpenChange,
     dropdownMatchSelectWidth: false,
@@ -232,6 +257,7 @@ var Component = function Component(_ref) {
         dataList: totalUserList,
         lockedIds: lockedIds,
         multiple: multiple,
+        key: panelKey,
         loading: loading,
         dropdownWidth: dropdownContentWidth,
         onSearchValueChange: onSearchValueChange,
@@ -239,7 +265,7 @@ var Component = function Component(_ref) {
         onCancel: setDropdownOpen.bind(null, false)
       }));
     }
-  });
+  }));
 };
 var MemberSelector = Component;
 MemberSelector.MemberPanel = MemberPanel;

package/dist/MemberPicker/interface.d.ts

@@ -9,7 +9,7 @@ export declare enum EMemberPicker {
     USER = "USER",
     BOTH = "BOTH"
 }
-export interface IBaseMemberSelectorProps extends Pick<ISelectProps, 'allowClear' | 'disabled' | 'prefix' | 'placeholder' | 'className' | 'size' | 'onClear' | 'prefixWidth'> {
+export interface IBaseMemberSelectorProps extends Omit<ISelectProps, 'type'> {
     value?: TMemberPickerValue;
     dropdownWidth?: number;
     open?: boolean;

package/dist/MemberPicker/style/index.less

@@ -14,13 +14,13 @@
   box-sizing: border-box;
   border: 1px solid var(--colors-gray-400, #dbdbdb);
   background: var(--global-colors-base-white-950a, #fff);
-  box-shadow: 0 20px 24px -4px rgb(16 24 40 / 0.08),
-    0 8px 8px -4px rgb(16 24 40 / 0.03);
+  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
 
   &.ald-member-picker-multiple {
     display: flex;
     flex-wrap: wrap;
-    border-radius: 2px;
+    border-radius: 6px;
+    overflow: hidden;
     // .memberSelection {
     // }
 
@@ -316,9 +316,17 @@
 
 .ald-select-popup.ald-member-picker-popup.ald-member-picker-popup.ald-member-picker-popup {
   border: none;
-  background-color: transparent;
   overflow: hidden;
   padding: 0;
-  box-shadow: none;
   border-radius: 0;
+  border-radius: 4px;
+  background: var(--colors-neutral-white, #fff);
+  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0 8px 8px -4px rgba(16, 24, 40, 0.03);
+}
+
+.ald-member-picker-tag {
+  display: flex;
+  align-items: center;
+  gap: var(--alias-spacing-75, 6px);
 }

package/dist/Menu/style/index.less

@@ -84,9 +84,9 @@
 .menu-wrap {
   border: 1px solid var(--alias-colors-border-strong, #d1d5db);
   border-radius: var(--alias-radius-75, 6px);
-  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
-    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
   overflow: hidden;
+  padding: 2px 0;
 }
 
 // menu菜单

package/dist/Modal/index.d.ts

@@ -9,16 +9,15 @@ interface IModalInterface extends React.FC<ModalProps> {
     useModal: typeof useModal;
 }
 export interface ModalProps extends Omit<AntdModalProps, 'okButtonProps' | 'cancelButtonProps' | 'okType'> {
-    forbidBodyScroll?: boolean;
     children?: React.ReactNode;
     subTitle?: React.ReactNode;
     icon?: React.ReactElement;
-    cancelButtonProps?: IButtonProps;
-    okButtonProps?: IButtonProps;
-    okType?: ButtonType;
     paddingLess?: boolean;
     virtualScrollBar?: boolean;
     hideHeaderBottomBorder?: boolean;
+    cancelButtonProps?: IButtonProps;
+    okButtonProps?: IButtonProps;
+    okType?: ButtonType;
 }
 export interface ModalFuncProps extends Omit<AntdModalFuncProps, 'okButtonProps' | 'cancelButtonProps' | 'okType' | 'icon'> {
     cancelButtonProps?: IButtonProps;

package/dist/Modal/index.js

@@ -5,7 +5,7 @@ var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
   _excluded4 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
   _excluded5 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
   _excluded6 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
-  _excluded7 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "className", "okText", "cancelText"];
+  _excluded7 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "className", "okText", "cancelText", "type"];
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -55,16 +55,39 @@ var ModalTitle = function ModalTitle(_ref, type) {
     subTitle = _ref.subTitle;
   return /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-title-container'
-  }, /*#__PURE__*/React.createElement("div", {
+  }, icon && /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-modal-icon-container', _defineProperty({}, "ald-modal-cion-".concat(type, "-container"), type))
   }, icon), /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-text-container'
   }, title && /*#__PURE__*/React.createElement("div", {
-    className: 'ald-modal-text-title'
+    className: classNames('ald-modal-text-title', {
+      'ald-modal-text-title-only': !subTitle
+    })
   }, title), subTitle && /*#__PURE__*/React.createElement("div", {
     className: 'ald-modal-text-sub-title'
   }, subTitle)));
 };
+function getIcon(type) {
+  if (type === 'success') return /*#__PURE__*/React.createElement(CheckCircleLightLine, {
+    fill: "#fff",
+    color: "#22C55E",
+    size: 24
+  });
+  if (type === 'error') return /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
+    color: "#EF4444",
+    fill: '#fff',
+    size: 24
+  });
+  if (type === 'warning') return /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
+    color: "#EAB308",
+    size: 24
+  });
+  return /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+    size: 24,
+    color: '#2986F4',
+    className: "ald-modal-close"
+  });
+}
 var OriginModal = function OriginModal(props) {
   var className = props.className,
     children = props.children,
@@ -260,6 +283,8 @@ Modal.confirm = function confirmFn(props) {
     okText = _props$okText6 === void 0 ? '确定' : _props$okText6,
     _props$cancelText6 = props.cancelText,
     cancelText = _props$cancelText6 === void 0 ? '取消' : _props$cancelText6,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'confirm' : _props$type,
     restProps = _objectWithoutProperties(props, _excluded7);
   return AntdModal.confirm(_objectSpread({
     okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
@@ -267,14 +292,10 @@ Modal.confirm = function confirmFn(props) {
     width: width || DEFAULT_WIDTH,
     className: classNames('ald-modal', className),
     title: ModalTitle({
-      icon: /*#__PURE__*/React.createElement(InformationCircleLightLine, {
-        size: 24,
-        color: '#2986F4',
-        className: "ald-modal-close"
-      }),
+      icon: getIcon(type),
       title: title,
       subTitle: subTitle
-    }, 'confirm'),
+    }, type),
     okText: okText,
     cancelText: cancelText
   }, restProps));

package/dist/Modal/style/modal.less

@@ -26,7 +26,7 @@
     }
 
     .ant-modal-header {
-      padding: var(--alias-spacing-200, 16px) var(--alias-spacing-250, 20px);
+      padding: var(--alias-spacing-200, 16px) var(--alias-padding-300, 24px);
       margin-bottom: 0;
       border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
       background: var(--alias-colors-bg-skeleton-subtler, #fff);
@@ -54,6 +54,10 @@
               font-weight: 600;
               font-size: 18px;
               line-height: 28px;
+
+              &.ald-modal-text-title-only {
+                font-size: 20px;
+              }
             }
 
             .ald-modal-text-sub-title {

package/dist/Modal/style/modalConfirm.less

@@ -73,11 +73,15 @@
                   font-size: 18px;
                   font-weight: 600;
                   line-height: 28px;
+
+                  &.ald-modal-text-title-only {
+                    font-size: 20px;
+                  }
                 }
 
                 .ald-modal-text-sub-title {
                   color: var(--alias-colors-text-subtle, #4b5563);
-                  font-size: 14px;
+                  font-size: 12px;
                   font-weight: 400;
                   line-height: 20px;
                 }

package/dist/Modal/style/polyfill/index.less

@@ -32,9 +32,6 @@
   font-size: 14px;
   line-height: 1.5714;
   list-style: none;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   pointer-events: none;
   position: relative;
   top: 100px;

package/dist/Popconfirm/index.js

@@ -16,7 +16,7 @@ function MyPopconfirm(props) {
     rootClassName = props.rootClassName,
     _props$icon = props.icon,
     icon = _props$icon === void 0 ? /*#__PURE__*/React.createElement(AttentionTriangleFill, {
-      size: 20,
+      size: 16,
       color: "#D64343",
       fill: "#fff"
     }) : _props$icon,

package/dist/Popconfirm/style/index.less

@@ -36,21 +36,18 @@
   padding: 12px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
-  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0 4px 6px -2px rgba(16, 24, 40, 0.03);
+  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
 
   .ant-popover-inner-content {
     .ant-popconfirm-message {
-      padding-bottom: 12px;
+      padding-bottom: 8px;
       margin-bottom: 0;
     }
 
     .ant-popconfirm-buttons {
-      padding-top: 12px;
-      padding-left: 24px;
+      padding-left: 16px;
       display: flex;
       align-items: center;
-      gap: 16px;
       flex-direction: row-reverse;
       justify-content: start;
     }
@@ -77,7 +74,6 @@
 
 .ald-pop-confirm.ant-popover.ant-popover .ant-popover-arrow {
   &::after {
-    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08),
-      0 4px 6px -2px rgba(16, 24, 40, 0.03);
+    box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
   }
 }

package/dist/Progress/style/index.less

@@ -7,11 +7,14 @@
   pointer-events: none;
 
   &-show-bg {
-    background-color: #d6e3f4;
+    background-color: var(
+      --alias-colors-bg-accent-blue-subtle-default,
+      #d4e7fd
+    );
   }
 
   &-inner {
-    background-color: #3271c9;
+    background-color: var(--alias-colors-icon-information, #2986f4);
     border-radius: 2px 0 0;
     height: 100%;
     width: 0;

package/dist/Radio/components/Radio/index.js

@@ -9,7 +9,6 @@ import _ from 'lodash';
 import React, { useContext, useEffect, useRef } from 'react';
 import { getUUID } from "../../../_utils/hooks/useId";
 import { RadioGroupContext } from "../Group";
-var FILL_BUTTON_MARGIN = 4;
 export default function Radio(props) {
   var groupContext = useContext(RadioGroupContext);
   var labelRef = useRef(null);
@@ -63,8 +62,8 @@ export default function Radio(props) {
   useEffect(function () {
     var _groupContext$sliderR;
     if (radioProps.checked && groupContext !== null && groupContext !== void 0 && (_groupContext$sliderR = groupContext.sliderRef) !== null && _groupContext$sliderR !== void 0 && _groupContext$sliderR.current && labelRef !== null && labelRef !== void 0 && labelRef.current) {
-      groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft, "px");
-      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth - FILL_BUTTON_MARGIN, "px");
+      groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft - 2, "px");
+      groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth, "px");
     }
   }, [groupContext.sliderRef, radioProps.checked]);
   var onChange = function onChange() {
@@ -90,6 +89,29 @@ export default function Radio(props) {
   }), /*#__PURE__*/React.createElement("span", {
     className: "ald-radio-inner"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "ald-radio-desc"
+    className: "ald-radio-desc",
+    onMouseEnter: function onMouseEnter() {
+      if (radioProps.checked) {
+        var _groupContext$sliderR2, _groupContext$sliderR3;
+        (_groupContext$sliderR2 = groupContext.sliderRef) === null || _groupContext$sliderR2 === void 0 ? void 0 : (_groupContext$sliderR3 = _groupContext$sliderR2.current) === null || _groupContext$sliderR3 === void 0 ? void 0 : _groupContext$sliderR3.classList.add('ald-radio-fill-slider-hover');
+      }
+    },
+    onMouseLeave: function onMouseLeave() {
+      if (radioProps.checked) {
+        var _groupContext$sliderR4, _groupContext$sliderR5, _groupContext$sliderR6, _groupContext$sliderR7;
+        (_groupContext$sliderR4 = groupContext.sliderRef) === null || _groupContext$sliderR4 === void 0 ? void 0 : (_groupContext$sliderR5 = _groupContext$sliderR4.current) === null || _groupContext$sliderR5 === void 0 ? void 0 : _groupContext$sliderR5.classList.remove('ald-radio-fill-slider-hover');
+        (_groupContext$sliderR6 = groupContext.sliderRef) === null || _groupContext$sliderR6 === void 0 ? void 0 : (_groupContext$sliderR7 = _groupContext$sliderR6.current) === null || _groupContext$sliderR7 === void 0 ? void 0 : _groupContext$sliderR7.classList.remove('ald-radio-fill-slider-active');
+      }
+    },
+    onMouseDown: function onMouseDown() {
+      if (radioProps.checked) {
+        var _groupContext$sliderR8, _groupContext$sliderR9;
+        (_groupContext$sliderR8 = groupContext.sliderRef) === null || _groupContext$sliderR8 === void 0 ? void 0 : (_groupContext$sliderR9 = _groupContext$sliderR8.current) === null || _groupContext$sliderR9 === void 0 ? void 0 : _groupContext$sliderR9.classList.add('ald-radio-fill-slider-active');
+      }
+    },
+    onMouseUp: function onMouseUp() {
+      var _groupContext$sliderR10, _groupContext$sliderR11;
+      if (radioProps.checked) (_groupContext$sliderR10 = groupContext.sliderRef) === null || _groupContext$sliderR10 === void 0 ? void 0 : (_groupContext$sliderR11 = _groupContext$sliderR10.current) === null || _groupContext$sliderR11 === void 0 ? void 0 : _groupContext$sliderR11.classList.remove('ald-radio-fill-slider-active');
+    }
   }, props.children));
 }

package/dist/Radio/style/index.less

@@ -1,8 +1,8 @@
 @import '../../style/index.less';
 
-@radio-icon-button-padding-large: 6px;
-@radio-icon-button-padding-middle: 6px;
-@radio-icon-button-padding-small: 7px;
+@radio-icon-button-padding-large: 4px;
+@radio-icon-button-padding-middle: 4px;
+@radio-icon-button-padding-small: 5px;
 @radio-group-height-large: 36px;
 @radio-group-height-middle: 32px;
 @radio-group-height-small: 28px;
@@ -77,6 +77,7 @@
   font-size: 14px;
   line-height: 20px;
   user-select: none;
+  white-space: nowrap;
 }
 // 绘制选中时的圆圈样式
 .ald-radio-checked > .ald-radio-inner {
@@ -183,26 +184,33 @@
   // transition: width, left, height 0.3s, 0.3s, 0.3s ease;
   cursor: pointer;
 
-  &:hover {
+  &:hover,
+  &.ald-radio-fill-slider-hover {
+    border-radius: var(--alias-radius-75, 6px);
     border: 1px solid
       var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af);
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
   }
 
-  &:active {
+  &:active,
+  &.ald-radio-fill-slider-active {
+    border-radius: var(--alias-radius-75, 6px);
     border: 1px solid
       var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
     background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
   }
 }
 
+.ald-radio-group-icon-button {
+  padding: 0 !important;
+}
+
 // button状态下的样式
 .ald-radio-group-button,
 .ald-radio-group-icon-button {
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
-  width: min-content;
-  width: auto;
   padding: 0;
   overflow: hidden;
 
@@ -263,6 +271,10 @@
     }
   }
 
+  .ald-radio-icon-button-wrapper-filled {
+    margin: 2px;
+  }
+
   // button选中状态下的样式
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border,
   .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
@@ -304,7 +316,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    height: calc(100% - 4px);
     background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
     cursor: pointer;
 
@@ -368,6 +380,15 @@
   // 各种大小
   &.ald-radio-group-middle {
     height: @radio-group-height-middle;
+    border-radius: @border-radius-middle;
+
+    .ald-radio-filled-slider {
+      border-radius: var(--alias-radius-50, 4px);
+    }
+
+    .ald-radio-icon-button-wrapper-filled {
+      border-radius: var(--alias-radius-50, 4px) !important ;
+    }
 
     .ald-radio-label {
       .ald-radio-desc {
@@ -375,6 +396,12 @@
       }
     }
 
+    .ald-radio-label.ald-radio-button-wrapper-filled {
+      height: 28px;
+      border-radius: @border-radius-middle;
+      margin-top: 2px;
+    }
+
     .ald-radio-icon-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-middle;
@@ -409,6 +436,11 @@
 
   &.ald-radio-group-small {
     height: @radio-group-height-small;
+    border-radius: @border-radius-small;
+
+    .ald-radio-filled-slider {
+      border-radius: var(--alias-radius-25, 2px);
+    }
 
     .ald-radio-label {
       .ald-radio-desc {
@@ -416,6 +448,16 @@
       }
     }
 
+    .ald-radio-icon-button-wrapper-filled {
+      border-radius: var(--alias-radius-25, 2px) !important ;
+    }
+
+    .ald-radio-label.ald-radio-button-wrapper-filled {
+      height: 24px;
+      margin-top: 2px;
+      border-radius: @border-radius-small !important;
+    }
+
     .ald-radio-icon-button-wrapper-filled,
     .ald-radio-icon-button-wrapper-filter {
       padding: 0 @radio-icon-button-padding-small;
@@ -469,6 +511,21 @@
 
   &.ald-radio-group.ald-radio-group-large {
     height: @radio-group-height-large;
+    border-radius: @border-radius-large;
+
+    .ald-radio-filled-slider {
+      border-radius: var(--alias-radius-75, 6px);
+    }
+
+    .ald-radio-icon-button-wrapper-filled {
+      border-radius: var(--alias-radius-75, 6px) !important ;
+    }
+
+    .ald-radio-label.ald-radio-button-wrapper-filled {
+      height: 32px;
+      margin-top: 2px;
+      border-radius: @border-radius-large!important;
+    }
 
     .ald-radio-label {
       .ald-radio-desc {
@@ -527,3 +584,21 @@
     }
   }
 }
+
+.ald-radio-group-filled {
+  display: flex;
+  gap: 2px;
+  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+  padding: 0 2px;
+  width: min-content;
+
+  .ald-radio-label:not(.ald-radio-wrapper-disabled) {
+    &:hover {
+      background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
+    }
+
+    &:active {
+      background: var(--alias-colors-bg-interaction-press, rgba(0, 0, 0, 0.1));
+    }
+  }
+}