@nutui/nutui-react 3.0.18 → 3.0.19

package/dist/es/packages/popup/popup.js

@@ -2,7 +2,7 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
@@ -10,6 +10,7 @@ import { Close } from "@nutui/icons-react";
 import { defaultOverlayProps } from "../overlay/overlay";
 import Overlay from "../overlay";
 import { useLockScroll } from "../../hooks/use-lock-scroll";
+import { useConfig } from "../configprovider";
 var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     position: 'center',
     transition: '',
@@ -22,6 +23,8 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
     portal: null,
     overlay: true,
     round: false,
+    resizable: false,
+    minHeight: '',
     onOpen: function() {},
     onClose: function() {},
     onOverlayClick: function() {
@@ -29,28 +32,44 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
     },
     onCloseIconClick: function() {
         return true;
-    }
+    },
+    onTouchStart: function() {},
+    onTouchMove: function() {},
+    onTouchEnd: function() {}
 });
 // 默认1000，参看variables
 var _zIndex = 1100;
 export var Popup = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd, closeAriaLabel = _$_object_spread.closeAriaLabel;
     var nodeRef = React.useRef(null);
+    var topNodeRef = React.useRef(null);
     var innerIndex = zIndex || _zIndex;
     var _useState = _sliced_to_array(useState(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array(useState(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
     var _useState2 = _sliced_to_array(useState(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
     var _useState3 = _sliced_to_array(useState(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
+    var touchStartRef = useRef(0);
+    var touchMoveDistanceRef = useRef(0);
+    var heightRef = useRef(0);
+    // 首次可调整时记录的默认高度
+    var defaultHeightRef = useRef(0);
+    var isTouching = useRef(false);
+    var locale = useConfig().locale;
     useLockScroll(nodeRef, innerVisible && lockScroll);
     var classPrefix = 'nut-popup';
     var overlayStyles = _object_spread({}, overlayStyle);
     var popStyles = _object_spread_props(_object_spread({}, style), {
-        zIndex: index
+        zIndex: index,
+        minHeight: minHeight
     });
     var _obj;
     var popClassName = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), _define_property(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
     var open = function() {
         if (!innerVisible) {
+            // 当高度改变后，再次打开时，将高度置为初始高度
+            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
+                nodeRef.current.style.height = "".concat(defaultHeightRef.current, "px");
+            }
             setInnerVisible(true);
             setIndex(++innerIndex);
         }
@@ -59,6 +78,14 @@ export var Popup = function(props) {
         }
         onOpen && onOpen();
     };
+    useEffect(function() {
+        if (topNodeRef.current && nodeRef.current) {
+            var _nodeRef_current;
+            topNodeRef.current.style.bottom = "".concat((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.clientHeight, "px");
+        }
+    }, [
+        innerVisible
+    ]);
     var close = function() {
         if (innerVisible) {
             setInnerVisible(false);
@@ -83,9 +110,19 @@ export var Popup = function(props) {
         var closeClasses = classNames("".concat(classPrefix, "-title-right"), "".concat(classPrefix, "-title-right-").concat(closeIconPosition));
         return /*#__PURE__*/ React.createElement(React.Fragment, null, closeable && /*#__PURE__*/ React.createElement("div", {
             className: closeClasses,
-            onClick: handleCloseIconClick
+            onClick: handleCloseIconClick,
+            role: "button",
+            "aria-label": closeAriaLabel || locale.close,
+            tabIndex: -1
         }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ React.createElement(Close, null)));
     };
+    var renderTop = function() {
+        if (!top) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-bottom-top"),
+            ref: topNodeRef
+        }, top);
+    };
     var renderTitle = function() {
         if (left || title || description) {
             return /*#__PURE__*/ React.createElement("div", {
@@ -104,6 +141,41 @@ export var Popup = function(props) {
             return renderCloseIcon();
         }
     };
+    var handleTouchStart = function(event) {
+        var _nodeRef_current;
+        if (position !== 'bottom' || !resizable || !nodeRef.current) return;
+        // 开始touch，记录下touch的pageY，用以判断是向上滑动还是向下滑动
+        touchStartRef.current = event.touches[0].pageY;
+        // 标记开始滑动
+        isTouching.current = true;
+        // 标记当前popup的高度
+        heightRef.current = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || 0;
+        if (!defaultHeightRef.current) defaultHeightRef.current = heightRef.current;
+        onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(heightRef.current, event);
+    };
+    var handleTouchMove = function(event) {
+        if (position !== 'bottom' || !resizable || !nodeRef.current) return;
+        event.stopPropagation();
+        // move过程中，当前的pageY 与 start值比较
+        touchMoveDistanceRef.current = event.touches[0].pageY - touchStartRef.current;
+        var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+        var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+        nodeRef.current.style.height = "".concat(currentHeight, "px");
+        // 向下滑动
+        if (touchMoveDistanceRef.current > 0) {
+            onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, event, 'down');
+        } else {
+            // 向上滑动
+            onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, event, 'up');
+        }
+    };
+    var handleTouchEnd = function(event) {
+        if (position !== 'bottom' || !resizable || !nodeRef.current) return;
+        isTouching.current = false;
+        var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+        var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+        onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(currentHeight, event);
+    };
     var renderPop = function() {
         return /*#__PURE__*/ React.createElement(CSSTransition, {
             nodeRef: nodeRef,
@@ -118,8 +190,12 @@ export var Popup = function(props) {
             ref: nodeRef,
             style: popStyles,
             className: popClassName,
-            onClick: onClick
-        }, renderTitle(), showChildren && children));
+            onClick: onClick,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchEnd
+        }, renderTop(), renderTitle(), showChildren && children));
     };
     var renderNode = function() {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, overlay && /*#__PURE__*/ React.createElement(Overlay, {

package/dist/es/packages/popup/style/popup.scss

@@ -88,11 +88,6 @@
     }
   }
 
-  &-bottom,
-  &-top {
-    max-height: 87%;
-  }
-
   &-bottom {
     bottom: 0;
     left: 0;
@@ -101,6 +96,10 @@
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;
     }
+
+    &-top {
+      position: absolute;
+    }
   }
 
   &-right {

package/dist/es/packages/popup/style/style.css

@@ -29,8 +29,8 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -80,9 +80,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -91,6 +88,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;

package/dist/es/packages/popup/style-jmapp/popup.scss

@@ -88,11 +88,6 @@
     }
   }
 
-  &-bottom,
-  &-top {
-    max-height: 87%;
-  }
-
   &-bottom {
     bottom: 0;
     left: 0;
@@ -101,6 +96,10 @@
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;
     }
+
+    &-top {
+      position: absolute;
+    }
   }
 
   &-right {

package/dist/es/packages/popup/style-jmapp/style.css

@@ -80,9 +80,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 12px);
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -91,6 +88,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;

package/dist/es/packages/popup/style-jrkf/popup.scss

@@ -88,11 +88,6 @@
     }
   }
 
-  &-bottom,
-  &-top {
-    max-height: 87%;
-  }
-
   &-bottom {
     bottom: 0;
     left: 0;
@@ -101,6 +96,10 @@
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;
     }
+
+    &-top {
+      position: absolute;
+    }
   }
 
   &-right {

package/dist/es/packages/popup/style-jrkf/style.css

@@ -80,9 +80,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 12px);
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -91,6 +88,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;

package/dist/es/packages/price/style/price.scss

@@ -9,7 +9,7 @@
   &-integer,
   &-decimal {
     color: $price-color;
-    font-family: 'JD';
+    font-family: 'JDZH-Bold';
     line-height: 1;
   }
 
@@ -18,7 +18,7 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JD-Bold';
+        font-family: 'JDZH-Bold';
         color: $price-darkgray-color;
       }
     }
@@ -29,7 +29,7 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JD-Bold';
+        font-family: 'JDZH-Bold';
         color: $price-primary-color;
       }
     }

package/dist/es/packages/price/style/style.css

@@ -4,22 +4,22 @@
 /* #endif */
 .nut-price {
   direction: ltr;
-  font-size: var(--nutui-font-size-l, 16px);
+  font-size: var(--nutui-font-size-l, 15px);
   display: flex;
   flex-direction: row;
   align-items: baseline;
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
   color: var(--nutui-price-color, var(--nutui-color-text-help));
-  font-family: "JD";
+  font-family: "JDZH-Bold";
   line-height: 1;
 }
 .nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
-  font-family: "JD-Bold";
+  font-family: "JDZH-Bold";
   color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
 }
 .nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
-  font-family: "JD-Bold";
+  font-family: "JDZH-Bold";
   color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-price-symbol {

package/dist/es/packages/price/style-jmapp/price.scss

@@ -9,7 +9,7 @@
   &-integer,
   &-decimal {
     color: $price-color;
-    font-family: 'JD';
+    font-family: 'JDZH-Bold';
     line-height: 1;
   }
 
@@ -18,7 +18,7 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JD-Bold';
+        font-family: 'JDZH-Bold';
         color: $price-darkgray-color;
       }
     }
@@ -29,7 +29,7 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JD-Bold';
+        font-family: 'JDZH-Bold';
         color: $price-primary-color;
       }
     }

package/dist/es/packages/price/style-jmapp/style.css

@@ -11,15 +11,15 @@
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
   color: var(--nutui-price-color, var(--nutui-color-text-help));
-  font-family: "JD";
+  font-family: "JDZH-Bold";
   line-height: 1;
 }
 .nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
-  font-family: "JD-Bold";
+  font-family: "JDZH-Bold";
   color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
 }
 .nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
-  font-family: "JD-Bold";
+  font-family: "JDZH-Bold";
   color: var(--nutui-price-color, var(--nutui-color-primary));
 }
 .nut-price-symbol {

package/dist/es/packages/price/style-jrkf/price.scss

@@ -9,7 +9,7 @@
   &-integer,
   &-decimal {
     color: $price-color;
-    font-family: 'JD';
+    font-family: 'JDZH-Bold';
     line-height: 1;
   }
 
@@ -18,7 +18,7 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JD-Bold';
+        font-family: 'JDZH-Bold';
         color: $price-darkgray-color;
       }
     }
@@ -29,7 +29,7 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JD-Bold';
+        font-family: 'JDZH-Bold';
         color: $price-primary-color;
       }
     }

package/dist/es/packages/price/style-jrkf/style.css

@@ -11,15 +11,15 @@
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
   color: var(--nutui-price-color, var(--nutui-color-text-help));
-  font-family: "JD";
+  font-family: "JDZH-Bold";
   line-height: 1;
 }
 .nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
-  font-family: "JD-Bold";
+  font-family: "JDZH-Bold";
   color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
 }
 .nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
-  font-family: "JD-Bold";
+  font-family: "JDZH-Bold";
   color: var(--nutui-price-color, var(--nutui-color-primary, #ff6666));
 }
 .nut-price-symbol {

package/dist/es/packages/radio/style/radio.scss

@@ -24,20 +24,25 @@
 
   &-icon {
     color: $color-text-disabled;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
+    border-radius: 50%;
   }
 
   &-icon {
     &-checked {
       color: $color-primary;
+      background-color: $white;
       box-shadow: 0px 2px 4px 0px #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        background-color: $white;
         box-shadow: none;
+        border-radius: 50%;
       }
     }
 
@@ -47,7 +52,12 @@
   }
 
   &-button {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;

package/dist/es/packages/radio/style/style.css

@@ -24,24 +24,34 @@
 }
 .nut-radio-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
+  background-color: #ffffff;
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
-  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16px));
+  border-radius: 50%;
 }
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
   color: var(--nutui-color-primary-disabled-special, #ffadbe);
+  background-color: #ffffff;
   box-shadow: none;
+  border-radius: 50%;
 }
 .nut-radio-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-radio-button {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);

package/dist/es/packages/radio/style-jmapp/radio.scss

@@ -24,20 +24,25 @@
 
   &-icon {
     color: $color-text-disabled;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
+    border-radius: 50%;
   }
 
   &-icon {
     &-checked {
       color: $color-primary;
+      background-color: $white;
       box-shadow: 0px 2px 4px 0px #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        background-color: $white;
         box-shadow: none;
+        border-radius: 50%;
       }
     }
 
@@ -47,7 +52,12 @@
   }
 
   &-button {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;

package/dist/es/packages/radio/style-jmapp/style.css

@@ -24,24 +24,34 @@
 }
 .nut-radio-icon {
   color: var(--nutui-color-text-disabled);
+  background-color: #ffffff;
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-text-large));
+  border-radius: 50%;
 }
 .nut-radio-icon-checked {
   color: var(--nutui-color-primary);
+  background-color: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
   color: var(--nutui-color-primary-disabled);
+  background-color: #ffffff;
   box-shadow: none;
+  border-radius: 50%;
 }
 .nut-radio-icon-disabled {
   color: var(--nutui-color-text-disabled);
 }
 .nut-radio-button {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);

package/dist/es/packages/radio/style-jrkf/radio.scss

@@ -24,20 +24,25 @@
 
   &-icon {
     color: $color-text-disabled;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
+    border-radius: 50%;
   }
 
   &-icon {
     &-checked {
       color: $color-primary;
+      background-color: $white;
       box-shadow: 0px 2px 4px 0px #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        background-color: $white;
         box-shadow: none;
+        border-radius: 50%;
       }
     }
 
@@ -47,7 +52,12 @@
   }
 
   &-button {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     min-height: 30px;
     padding: $radio-button-padding;