@nutui/nutui-react-taro 3.0.19-cpp.22 → 3.0.19-cpp.24

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

@@ -24,18 +24,23 @@
 }
 .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-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);

package/dist/cjs/packages/radio/style/style.harmony.css

@@ -72,18 +72,23 @@
 }
 .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-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);

package/dist/cjs/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%;
       }
     }
 

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

@@ -24,18 +24,23 @@
 }
 .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);

package/dist/cjs/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%;
       }
     }
 

package/dist/cjs/packages/radio/style-jrkf/style.css

@@ -24,18 +24,23 @@
 }
 .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, #ff6666);
+  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);

package/dist/cjs/packages/searchbar/searchbar.js

@@ -41,7 +41,7 @@ var SearchBar = function SearchBar(props) {
     var classPrefix = 'nut-searchbar';
     var locale = (0, _index.useConfig)().locale;
     var searchInputRef = (0, _react.useRef)(null);
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, inputProps = _$_object_spread.inputProps, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
         value: outerValue,
         defaultValue: defaultValue,
@@ -136,7 +136,7 @@ var SearchBar = function SearchBar(props) {
     ]);
     var renderField = function renderField() {
         var inputCls = (0, _classnames.default)("".concat(classPrefix, "-input"));
-        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, _taro.default.getEnv() === 'WEB' ? /*#__PURE__*/ _react.default.createElement(_components.Input, {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, _taro.default.getEnv() === 'WEB' ? /*#__PURE__*/ _react.default.createElement(_components.Input, (0, _object_spread._)({
             className: inputCls,
             ref: searchInputRef,
             style: (0, _object_spread._)({}, style, {
@@ -152,7 +152,7 @@ var SearchBar = function SearchBar(props) {
             onBlur: handleBlur,
             onClick: onInputClick,
             onConfirm: onConfirm
-        }) : /*#__PURE__*/ _react.default.createElement(_components.Input, {
+        }, inputProps)) : /*#__PURE__*/ _react.default.createElement(_components.Input, (0, _object_spread._)({
             className: inputCls,
             ref: searchInputRef,
             style: (0, _object_spread._)({}, style, {
@@ -168,7 +168,7 @@ var SearchBar = function SearchBar(props) {
             onBlur: handleBlur,
             onClick: onInputClick,
             onConfirm: onConfirm
-        }));
+        }, inputProps)));
     };
     var renderValueByTags = (0, _react.useCallback)(function() {
         if (!innerTag) return null;

package/dist/cjs/packages/toast/toast.js

@@ -136,7 +136,7 @@ var Toast = function Toast(props) {
         'nut-toast-has-icon': icon,
         'nut-toast-rtl': rtl
     });
-    var styles = (0, _platform.harmony)() ? {
+    var styles = (0, _platform.harmony)() || (0, _platform.td)() ? {
         left: '50%',
         transform: 'translate(-50%, -50%)'
     } : null;
@@ -156,7 +156,8 @@ var Toast = function Toast(props) {
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), (0, _define_property._)({}, "".concat(classPrefix, "-inner-descrption"), content)),
         style: (0, _object_spread._)({}, styles, contentStyle),
-        ariaRole: "alert"
+        ariaRole: "alert",
+        ariaLabel: title + content
     }, renderIcon(), title && /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, "-title")
     }, title), content && ((0, _platform.td)() ? /*#__PURE__*/ _react.default.createElement(_components.Text, {

package/dist/cjs/types/spec/avatar/taro.d.ts

@@ -1,7 +1,13 @@
-import { ITouchEvent } from '@tarojs/components';
+import { ITouchEvent, ImageProps } from '@tarojs/components';
 import { BaseAvatar, BaseAvatarGroup } from './base';
 export interface TaroAvatarProps extends Omit<BaseAvatar, 'onClick'> {
     avatarIndex: number;
+    /** 图片裁剪、缩放的模式，同 Taro Image 的 mode 属性 */
+    mode: keyof ImageProps.Mode;
+    /**
+     * @deprecated 请使用 mode 属性代替
+     */
+    fit: BaseAvatar['fit'];
     onClick: (e: ITouchEvent) => void;
 }
 export interface TaroAvatarGroupProps extends BaseAvatarGroup {

package/dist/cjs/types/spec/input/base.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Align } from '../../base/atoms';
 import { BaseProps } from '../../base/props';
 export type InputFormatTrigger = 'onChange' | 'onBlur';
@@ -19,6 +19,7 @@ export interface BaseInput<INPUT_TYPE, CONFIRM_TYPE = InputConfirmType> extends
     autoFocus: boolean;
     confirmType: CONFIRM_TYPE;
     plain: boolean;
+    inputStyle?: CSSProperties;
     formatter?: (value: string) => string;
     onChange?: (value: string) => void;
     onBlur?: (value: string) => void;

package/dist/cjs/types/spec/searchbar/h5.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import type { ChangeEvent, FocusEvent, MouseEvent, InputHTMLAttributes } from 'react';
 import { BaseSearchBar } from './base';
 export interface WebSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onInputClick'> {
     onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
@@ -6,4 +6,5 @@ export interface WebSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onF
     onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
     onClear?: (event: MouseEvent<HTMLDivElement>) => void;
     onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
 }

package/dist/cjs/types/spec/searchbar/taro.d.ts

@@ -9,5 +9,6 @@ export interface TaroSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'on
     onBlur?: (value: string, event: BaseEventOrig<inputValueEventDetail>) => void;
     onClear?: (event: ITouchEvent) => void;
     onInputClick?: (event: ITouchEvent) => void;
+    inputProps?: Partial<InputProps>;
 }
 export {};

package/dist/cjs/utils/taro/get-system-info.d.ts

@@ -11,9 +11,4 @@ export declare const getDeviceInfo: () => IDeviceInfo;
  * @returns {Taro.getWindowInfo.Result} 窗口信息
  */
 export declare const getWindowInfo: () => Taro.getWindowInfo.Result;
-/**
- * 获取应用基础信息，兼容新旧 API
- * @returns {Taro.getAppBaseInfo.Result} 应用基础信息
- */
-export declare const getAppBaseInfo: () => Taro.getAppBaseInfo.Result;
 export {};

package/dist/cjs/utils/taro/get-system-info.js

@@ -9,9 +9,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get getAppBaseInfo () {
-        return getAppBaseInfo;
-    },
     get getDeviceInfo () {
         return getDeviceInfo;
     },
@@ -25,7 +22,5 @@ var getDeviceInfo = function getDeviceInfo() {
 };
 var getWindowInfo = function getWindowInfo() {
     return (0, _taro.canIUse)('getWindowInfo') ? (0, _taro.getWindowInfo)() : (0, _taro.getSystemInfoSync)();
-};
-var getAppBaseInfo = function getAppBaseInfo() {
-    return (0, _taro.canIUse)('getAppBaseInfo') ? (0, _taro.getAppBaseInfo)() : (0, _taro.getSystemInfoSync)();
-};
+} // /**
+;

package/dist/es/locales/ja-JP.d.ts

@@ -0,0 +1,3 @@
+import { BaseLang } from './base';
+declare const jaJP: BaseLang;
+export default jaJP;

package/dist/es/locales/ja-JP.js

@@ -0,0 +1,160 @@
+var jaJP = {
+    save: '保存',
+    confirm: '確認',
+    cancel: 'キャンセル',
+    done: '完了',
+    noData: 'データなし',
+    placeholder: '内容を入力してください',
+    select: '選択してください',
+    edit: '編集',
+    reset: 'リセット',
+    video: {
+        errorTip: '動画の読み込みに失敗しました',
+        clickRetry: 'クリックして再試行'
+    },
+    fixednav: {
+        activeText: 'ナビを折りたたむ',
+        inactiveText: 'クイックナビゲーション'
+    },
+    infiniteloading: {
+        pullRefreshText: '指を離して更新',
+        loadText: '読み込み中',
+        loadMoreText: 'これ以上データはありません'
+    },
+    pagination: {
+        prev: '前へ',
+        next: '次へ'
+    },
+    range: {
+        rangeText: 'この範囲外です'
+    },
+    calendaritem: {
+        weekdays: [
+            '日',
+            '月',
+            '火',
+            '水',
+            '木',
+            '金',
+            '土'
+        ],
+        end: '終了',
+        start: '開始',
+        confirm: '確認',
+        title: 'カレンダー選択',
+        monthTitle: function(year, month) {
+            return "".concat(year, "年").concat(Number(month) < 10 ? "0".concat(Number(month)) : month, "月");
+        },
+        today: '今日',
+        loadPreviousMonth: '前の月を読み込む',
+        noEarlierMonth: 'これより前の月はありません'
+    },
+    shortpassword: {
+        title: 'パスワードを入力してください',
+        description: '仮想資産を使用しました。認証を行ってください',
+        tips: 'パスワードを忘れた場合'
+    },
+    uploader: {
+        list: 'ファイルをアップロード',
+        ready: '準備完了',
+        readyUpload: 'アップロード準備完了',
+        waitingUpload: 'アップロード待ち',
+        uploading: 'アップロード中...',
+        success: 'アップロード成功',
+        error: 'アップロード失敗',
+        deleteWord: 'ユーザーによって削除がブロックされました！'
+    },
+    countdown: {
+        day: '日',
+        hour: '時間',
+        minute: '分',
+        second: '秒'
+    },
+    address: {
+        selectRegion: '住所を選択してください',
+        deliveryTo: '配送先',
+        chooseAnotherAddress: '別の住所を選択',
+        hotCity: '人気都市',
+        selectProvince: '都道府県/地域を選択'
+    },
+    signature: {
+        reSign: '再署名',
+        unsupported: '申し訳ありませんが、現在のブラウザはCanvasをサポートしていません。このコントロールは使用できません！'
+    },
+    ecard: {
+        chooseText: '電子カードの額面を選択してください',
+        otherValueText: 'その他の額面',
+        placeholder: '1から5000までの整数を入力してください'
+    },
+    timeselect: {
+        pickupTime: '受け取り時間'
+    },
+    sku: {
+        buyNow: '今すぐ購入',
+        buyNumber: '購入数量',
+        addToCard: 'カートに入れる'
+    },
+    skuheader: {
+        skuId: '商品コード'
+    },
+    addresslist: {
+        addAddress: '新しい住所を追加'
+    },
+    comment: {
+        complaintsText: 'クレームを報告する',
+        additionalReview: function(day) {
+            return "購入".concat(day, "日後の追加レビュー");
+        },
+        additionalImages: function(length) {
+            return "".concat(length, "枚の追加レビュー画像");
+        }
+    },
+    searchbar: {
+        basePlaceholder: 'JD（京東）で良い商品を購入',
+        text: 'テキスト',
+        test: 'テスト',
+        title1: '基本使用',
+        title2: '検索ボックスの形状と最大長',
+        title3: '検索ボックスの内外背景設定',
+        title4: '検索ボックスのテキスト設定',
+        title5: 'カスタムアイコン設定',
+        title6: 'データ変更の監視'
+    },
+    audio: {
+        back: '早戻し',
+        forward: '早送り',
+        pause: '一時停止',
+        start: '開始',
+        mute: 'ミュート',
+        tips: 'onPlayEndイベントはloop=falseの場合にのみトリガーされます'
+    },
+    avatarCropper: {
+        rotate: '回転',
+        selectImage: '画像を選択'
+    },
+    datepicker: {
+        year: '年',
+        month: '月',
+        day: '日',
+        hour: '時',
+        min: '分',
+        seconds: '秒'
+    },
+    pullToRefresh: {
+        pullingText: '下に引いて更新',
+        canReleaseText: '指を離して更新',
+        refreshingText: '更新中',
+        completeText: '更新成功'
+    },
+    tour: {
+        prevStepText: '前へ',
+        completeText: '完了',
+        nextStepText: '次へ'
+    },
+    watermark: {
+        errorCanvasTips: '現在の環境はCanvasをサポートしていません'
+    },
+    mask: 'マスク',
+    close: '閉じる'
+};
+export default jaJP;

package/dist/es/packages/animatingnumbers/countup.js

@@ -61,6 +61,8 @@ export var CountUp = function(props) {
                             transitionDuration: "".concat(duration, "s"),
                             transform: transform
                         });
+                    } else {
+                        transformArrCache.push({});
                     }
                 });
                 setTransformArr(_to_consumable_array(transformArrCache));

package/dist/es/packages/avatar/avatar.js

@@ -18,13 +18,14 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     background: '#eee',
     color: '#666',
     fit: 'cover',
+    mode: 'scaleToFill',
     src: '',
     alt: '',
     avatarIndex: 0
 });
 var classPrefix = "nut-avatar";
 export var Avatar = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, size = _$_object_spread.size, shape = _$_object_spread.shape, background = _$_object_spread.background, color = _$_object_spread.color, src = _$_object_spread.src, icon = _$_object_spread.icon, mode = _$_object_spread.mode, fit = _$_object_spread.fit, avatarIndex = _$_object_spread.avatarIndex, className = _$_object_spread.className, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onError = _$_object_spread.onError;
     var _useState // 是否显示的最大头像个数
      = _sliced_to_array(useState(false), 2), showMax = _useState[0], setShowMax = _useState[1];
     var avatarRef = useRef(null);
@@ -80,6 +81,7 @@ export var Avatar = function(props) {
         style: {
             objectFit: fit
         },
+        mode: mode,
         onError: errorEvent
     }), /*#__PURE__*/ React.isValidElement(icon) ? /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-text"

package/dist/es/packages/checkbox/checkbox.js

@@ -75,33 +75,44 @@ export var Checkbox = function(props) {
     var renderIcon = function() {
         if (innerDisabled) {
             if (innerIndeterminate) {
+                // @ts-ignore
                 return /*#__PURE__*/ React.createElement(CheckDisabled, {
-                    className: color()
+                    className: color(),
+                    ariaHidden: true
                 });
             }
             if (innerChecked) {
+                // @ts-ignore
                 return /*#__PURE__*/ React.createElement(Checked, {
-                    className: color()
+                    className: color(),
+                    ariaHidden: true
                 });
             }
+            // @ts-ignore
             return /*#__PURE__*/ React.createElement(CheckDisabled, {
-                className: color()
+                className: color(),
+                ariaHidden: true
             });
         }
         if (!innerChecked) {
-            return /*#__PURE__*/ React.isValidElement(icon) ? icon : /*#__PURE__*/ React.createElement(CheckNormal, {
-                className: color()
+            return /*#__PURE__*/ React.isValidElement(icon) ? icon : // @ts-ignore
+            /*#__PURE__*/ React.createElement(CheckNormal, {
+                className: color(),
+                ariaHidden: true
             });
         }
         if (innerIndeterminate) {
-            return /*#__PURE__*/ React.isValidElement(indeterminateIcon) ? indeterminateIcon : /*#__PURE__*/ React.createElement(CheckDisabled, {
-                className: color()
+            return /*#__PURE__*/ React.isValidElement(indeterminateIcon) ? indeterminateIcon : // @ts-ignore
+            /*#__PURE__*/ React.createElement(CheckDisabled, {
+                className: color(),
+                ariaHidden: true
             });
         }
         return /*#__PURE__*/ React.isValidElement(activeIcon) ? activeIcon : /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-icon-wrap")
         }, /*#__PURE__*/ React.createElement(Checked, {
-            className: color()
+            className: color(),
+            ariaHidden: true
         }));
     };
     var color = function() {

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

@@ -17,6 +17,7 @@
 
   &-icon-checked {
     color: $color-primary;
+    background-color: $white;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     border-radius: 50%;
@@ -39,6 +40,7 @@
 
   &-icon-indeterminate {
     color: $color-primary;
+    background-color: $white;
     box-shadow: 0px 2px 4px 0px #ff0f2333;
     border-radius: 50%;
 
@@ -49,6 +51,8 @@
 
   &-icon-disabled {
     color: $color-text-disabled;
+    background-color: $white;
+    border-radius: 50%;
     box-shadow: none;
   }
 
@@ -63,10 +67,10 @@
 
   &-button {
     position: relative;
-    /* #ifdef dynamic*/
+    /* #ifdef dynamic */
     display: flex;
     /* #endif */
-    /* #ifndef dynamic*/
+    /* #ifndef dynamic */
     display: inline-flex;
     /* #endif */
     align-items: center;

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

@@ -19,6 +19,7 @@
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   border-radius: 50%;
@@ -37,6 +38,7 @@
 }
 .nut-checkbox-icon-indeterminate {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
@@ -45,6 +47,8 @@
 }
 .nut-checkbox-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
+  background-color: #ffffff;
+  border-radius: 50%;
   box-shadow: none;
 }
 .nut-checkbox-reverse {
@@ -56,10 +60,10 @@
 }
 .nut-checkbox-button {
   position: relative;
-  /* #ifdef dynamic*/
+  /* #ifdef dynamic */
   display: flex;
   /* #endif */
-  /* #ifndef dynamic*/
+  /* #ifndef dynamic */
   display: inline-flex;
   /* #endif */
   align-items: center;

package/dist/es/packages/checkbox/style/style.harmony.css

@@ -90,6 +90,7 @@
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   border-radius: 50%;
@@ -108,6 +109,7 @@
 }
 .nut-checkbox-icon-indeterminate {
   color: var(--nutui-color-primary, #ff0f23);
+  background-color: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
@@ -116,6 +118,8 @@
 }
 .nut-checkbox-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
+  background-color: #ffffff;
+  border-radius: 50%;
   box-shadow: none;
 }
 .nut-checkbox-reverse {
@@ -127,10 +131,10 @@
 }
 .nut-checkbox-button {
   position: relative;
-  /* #ifdef dynamic*/
+  /* #ifdef dynamic */
   display: flex;
   /* #endif */
-  /* #ifndef dynamic*/
+  /* #ifndef dynamic */
   display: inline-flex;
   /* #endif */
   align-items: center;