@nutui/nutui-react-taro 3.0.20-beta.0 → 3.0.20-cpp

package/dist/es/packages/price/price.js

@@ -7,7 +7,8 @@ import classNames from "classnames";
 import { ComponentDefaults } from "../../utils/typings";
 import { useRtl } from "../configprovider/index";
 import { PriceColorEnum } from "../../types";
-import { harmony, td } from "../../utils/taro/platform";
+import { harmony } from "../../utils/taro/platform";
+import { shouldRenderPriceAsRaw, hasNonPriceChars } from "../../utils/should-render-price-raw";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     color: 'primary',
     price: 0,
@@ -16,16 +17,25 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     thousands: false,
     position: 'before',
     size: 'normal',
-    line: false
+    line: false,
+    raw: false
 });
 export var Price = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), color = _$_object_spread.color, originalPrice = _$_object_spread.price, symbol = _$_object_spread.symbol, digits = _$_object_spread.digits, thousands = _$_object_spread.thousands, position = _$_object_spread.position, size = _$_object_spread.size, line = _$_object_spread.line, className = _$_object_spread.className, style = _$_object_spread.style;
+    var _$_object_spread = _object_spread({}, defaultProps, props), color = _$_object_spread.color, originalPrice = _$_object_spread.price, symbol = _$_object_spread.symbol, digits = _$_object_spread.digits, thousands = _$_object_spread.thousands, position = _$_object_spread.position, size = _$_object_spread.size, line = _$_object_spread.line, raw = _$_object_spread.raw, className = _$_object_spread.className, style = _$_object_spread.style;
     var classPrefix = 'nut-price';
     var rtl = useRtl();
+    var isRenderPriceRaw = useMemo(function() {
+        return typeof originalPrice === 'string' && shouldRenderPriceAsRaw(originalPrice) || raw && typeof originalPrice === 'string' && hasNonPriceChars(originalPrice);
+    }, [
+        originalPrice,
+        raw
+    ]);
     var price = useMemo(function() {
+        if (isRenderPriceRaw) return '';
         return originalPrice.toString().replace(/[^\d.]/g, '');
     }, [
-        originalPrice
+        originalPrice,
+        isRenderPriceRaw
     ]);
     var isCustomPriceColor = useMemo(function() {
         var specificPriceColor = Object.values(PriceColorEnum);
@@ -67,7 +77,7 @@ export var Price = function(props) {
         return num;
     };
     var formatDecimal = function(decimalNum) {
-        if (Number(decimalNum) === 0) {
+        if (Number(decimalNum) === 0 && !checkPoint(decimalNum)) {
             decimalNum = 0;
         }
         if (checkPoint(decimalNum)) {
@@ -91,27 +101,56 @@ export var Price = function(props) {
                 "".concat(classPrefix, "-symbol-").concat(size),
                 (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-line"), line), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj)
             ]),
-            style: priceColorStyle
+            style: priceColorStyle,
+            // @ts-ignore
+            ariaHidden: true
         }, symbol ? replaceSpecialChar(symbol) : '');
     };
     var renderInner = function() {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, symbol && position === 'before' ? renderSymbol() : null, /*#__PURE__*/ React.createElement(Text, {
             className: "".concat(classPrefix, "-integer ").concat(classPrefix, "-integer-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
-            style: priceColorStyle
+            style: priceColorStyle,
+            // @ts-ignore
+            ariaHidden: true
         }, formatThousands(price)), digits !== 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, checkPoint(price) || digits ? /*#__PURE__*/ React.createElement(Text, {
             className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
-            style: priceColorStyle
+            style: priceColorStyle,
+            // @ts-ignore
+            ariaHidden: true
         }, ".") : null, /*#__PURE__*/ React.createElement(Text, {
             className: "".concat(classPrefix, "-decimal ").concat(classPrefix, "-decimal-").concat(size, " ").concat(line ? "".concat(classPrefix, "-line") : ''),
-            style: priceColorStyle
+            style: priceColorStyle,
+            // @ts-ignore
+            ariaHidden: true
         }, formatDecimal(price))) : null, symbol && position === 'after' ? renderSymbol() : null);
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, harmony() || td() ? /*#__PURE__*/ React.createElement(Text, {
+    var renderRawContent = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, originalPrice);
+    };
+    var accessiblePriceText = useMemo(function() {
+        var safeSymbol = symbol ? replaceSpecialChar(symbol) : '';
+        var numberText = isRenderPriceRaw ? "".concat(originalPrice) : "".concat(price);
+        return position === 'after' ? "".concat(numberText).concat(safeSymbol) : "".concat(safeSymbol).concat(numberText);
+    }, [
+        symbol,
+        price,
+        position,
+        originalPrice,
+        isRenderPriceRaw
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, harmony() || process.env.TARO_ENV === 'dynamic' ? /*#__PURE__*/ React.createElement(Text, {
         className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
-        style: style
-    }, renderInner()) : /*#__PURE__*/ React.createElement(View, {
+        style: style,
+        // @ts-ignore
+        ariaLabel: accessiblePriceText,
+        // eslint-disable-next-line jsx-a11y/aria-role
+        role: "text"
+    }, isRenderPriceRaw ? renderRawContent() : renderInner()) : /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(color, " ").concat(className),
-        style: style
-    }, renderInner()));
+        style: style,
+        ariaLabel: accessiblePriceText,
+        // eslint-disable-next-line jsx-a11y/aria-role
+        role: "text"
+    }, isRenderPriceRaw ? renderRawContent() : renderInner()));
 };
 Price.displayName = 'NutPrice';

package/dist/es/packages/progress/progress.js

@@ -22,7 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 export var Progress = function(props) {
     var rtl = useRtl();
     var _ref = _object_spread({}, defaultProps, props), className = _ref.className, style = _ref.style, percent = _ref.percent, background = _ref.background, color = _ref.color, strokeWidth = _ref.strokeWidth, showText = _ref.showText, animated = _ref.animated, children = _ref.children, lazy = _ref.lazy, delay = _ref.delay, // tc
-    showInfo = _ref.showInfo, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeColor = _ref.activeColor, backgroundColor = _ref.backgroundColor, active = _ref.active, activeMode = _ref.activeMode, duration = _ref.duration, ariaLabel = _ref.ariaLabel, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
+    showInfo = _ref.showInfo, borderRadius = _ref.borderRadius, fontSize = _ref.fontSize, activeColor = _ref.activeColor, backgroundColor = _ref.backgroundColor, active = _ref.active, activeMode = _ref.activeMode, duration = _ref.duration, onActiveEnd = _ref.onActiveEnd, rest = _object_without_properties(_ref, [
         "className",
         "style",
         "percent",
@@ -42,7 +42,6 @@ export var Progress = function(props) {
         "active",
         "activeMode",
         "duration",
-        "ariaLabel",
         "onActiveEnd"
     ]);
     var classPrefix = 'nut-progress';
@@ -209,8 +208,7 @@ export var Progress = function(props) {
         ref: progressRef,
         id: selector,
         className: classNames(classPrefix, className),
-        style: style,
-        "aria-label": ariaLabel
+        style: style
     }, rest), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-outer"),
         style: stylesOuter

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -31,7 +31,58 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var PullToRefresh = function(p) {
     var doRefresh = function doRefresh() {
-        return _doRefresh.apply(this, arguments);
+        return _async_to_generator(function() {
+            var e;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        setHeight(headHeight);
+                        setStatus('refreshing');
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            3,
+                            ,
+                            4
+                        ]);
+                        return [
+                            4,
+                            props.onRefresh()
+                        ];
+                    case 2:
+                        _state.sent();
+                        setStatus('complete');
+                        return [
+                            3,
+                            4
+                        ];
+                    case 3:
+                        e = _state.sent();
+                        setHeight(0);
+                        setStatus('pulling');
+                        throw e;
+                    case 4:
+                        if (!(props.completeDelay > 0)) return [
+                            3,
+                            6
+                        ];
+                        return [
+                            4,
+                            sleep(props.completeDelay)
+                        ];
+                    case 5:
+                        _state.sent();
+                        _state.label = 6;
+                    case 6:
+                        setHeight(0);
+                        setStatus('pulling');
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
     };
     var classPrefix = 'nut-pulltorefresh';
     var locale = useConfig().locale;
@@ -88,61 +139,6 @@ export var PullToRefresh = function(p) {
         }
         clearTimeout(timer.current);
     };
-    function _doRefresh() {
-        _doRefresh = _async_to_generator(function() {
-            var e;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        setHeight(headHeight);
-                        setStatus('refreshing');
-                        _state.label = 1;
-                    case 1:
-                        _state.trys.push([
-                            1,
-                            3,
-                            ,
-                            4
-                        ]);
-                        return [
-                            4,
-                            props.onRefresh()
-                        ];
-                    case 2:
-                        _state.sent();
-                        setStatus('complete');
-                        return [
-                            3,
-                            4
-                        ];
-                    case 3:
-                        e = _state.sent();
-                        setHeight(0);
-                        setStatus('pulling');
-                        throw e;
-                    case 4:
-                        if (!(props.completeDelay > 0)) return [
-                            3,
-                            6
-                        ];
-                        return [
-                            4,
-                            sleep(props.completeDelay)
-                        ];
-                    case 5:
-                        _state.sent();
-                        _state.label = 6;
-                    case 6:
-                        setHeight(0);
-                        setStatus('pulling');
-                        return [
-                            2
-                        ];
-                }
-            });
-        });
-        return _doRefresh.apply(this, arguments);
-    }
     var handleTouchEnd = function() {
         if (props.disabled) return;
         pullingRef.current = false;

package/dist/es/packages/quickenter/index.d.ts

@@ -0,0 +1,3 @@
+import QuickEnter from "./quickenter";
+export type { TaroQuickEnterProps as QuickEnterProps } from "../../types";
+export default QuickEnter;

package/dist/es/packages/quickenter/index.js

@@ -0,0 +1,2 @@
+import QuickEnter from "./quickenter";
+export default QuickEnter;

package/dist/es/packages/quickenter/quickenter.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { QuickEnterActions, TaroQuickEnterProps } from "../../types";
+declare const QuickEnter: React.ForwardRefExoticComponent<Partial<TaroQuickEnterProps> & React.RefAttributes<QuickEnterActions>>;
+export default QuickEnter;

package/dist/es/packages/quickenter/quickenter.js

@@ -0,0 +1,141 @@
+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 _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import React, { useImperativeHandle } from "react";
+import { View } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import classNames from "classnames";
+import { Close } from "@nutui/icons-react-taro";
+import Popup from "../popup/index";
+import { ComponentDefaults } from "../../utils/typings";
+import { usePropsValue } from "../../hooks/use-props-value";
+import Badge from "../badge/index";
+import { useConfig } from "../configprovider";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    options: [],
+    visible: false,
+    closeOnOverlayClick: true,
+    safeAreaInsetTop: true
+});
+var InternalQuickEnter = function(props, ref) {
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, visible = _ref.visible, title = _ref.title, _ref_options = _ref.options, options = _ref_options === void 0 ? [] : _ref_options, closeOnOverlayClick = _ref.closeOnOverlayClick, _ref_popupProps = _ref.popupProps, popupProps = _ref_popupProps === void 0 ? {} : _ref_popupProps, className = _ref.className, style = _ref.style, onClose = _ref.onClose, onChange = _ref.onChange, closeIcon = _ref.closeIcon, safeAreaInsetTop = _ref.safeAreaInsetTop, rest = _object_without_properties(_ref, [
+        "children",
+        "visible",
+        "title",
+        "options",
+        "closeOnOverlayClick",
+        "popupProps",
+        "className",
+        "style",
+        "onClose",
+        "onChange",
+        "closeIcon",
+        "safeAreaInsetTop"
+    ]);
+    var locale = useConfig().locale;
+    var mergedTitle = title || locale.quickenter.title;
+    var classPrefix = 'nut-quickenter';
+    var classes = classNames(classPrefix, className, {
+        'safe-area-top': safeAreaInsetTop
+    });
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: props.visible,
+        defaultValue: false,
+        finalValue: false,
+        onChange: function(v) {
+            if (!v) {
+                var _props_onClose;
+                (_props_onClose = props.onClose) === null || _props_onClose === void 0 ? void 0 : _props_onClose.call(props);
+            }
+        }
+    }), 2), innerVisible = _usePropsValue[0], setInnerVisible = _usePropsValue[1];
+    var actions = {
+        open: function() {
+            setInnerVisible(true);
+        },
+        close: function() {
+            setInnerVisible(false);
+        }
+    };
+    useImperativeHandle(ref, function() {
+        return actions;
+    });
+    var onCancelEvent = function() {
+        setInnerVisible(false);
+    };
+    var handleItemClick = function(item, index) {
+        if (item.url) {
+            Taro.navigateTo({
+                url: item.url
+            });
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(item, index);
+    };
+    var renderTitleBar = function() {
+        return /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-control")
+        }, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-title")
+        }, mergedTitle), /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-close-btn"),
+            onClick: function(e) {
+                e.stopPropagation();
+                onCancelEvent();
+            }
+        }, closeIcon || /*#__PURE__*/ React.createElement(Close, {
+            ariaLabel: locale.close
+        })));
+    };
+    var renderContent = function() {
+        return /*#__PURE__*/ React.createElement(View, {
+            className: classNames("".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-content-scrollable"), options.length > 8))
+        }, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-list")
+        }, options.map(function(item, index) {
+            var _item_badgeProps, _item_badgeProps1;
+            var _item_badge, _item_badge1;
+            return /*#__PURE__*/ React.createElement(View, {
+                key: index,
+                className: "".concat(classPrefix, "-item"),
+                ariaLabel: "".concat(item.title, " ").concat((_item_badge = item.badge) !== null && _item_badge !== void 0 ? _item_badge : (_item_badgeProps = item.badgeProps) === null || _item_badgeProps === void 0 ? void 0 : _item_badgeProps.value),
+                onClick: function() {
+                    return handleItemClick(item, index);
+                }
+            }, /*#__PURE__*/ React.createElement(View, {
+                className: "".concat(classPrefix, "-item-icon"),
+                ariaHidden: true
+            }, /*#__PURE__*/ React.createElement(Badge, _object_spread_props(_object_spread({}, item.badgeProps), {
+                value: (_item_badge1 = item.badge) !== null && _item_badge1 !== void 0 ? _item_badge1 : (_item_badgeProps1 = item.badgeProps) === null || _item_badgeProps1 === void 0 ? void 0 : _item_badgeProps1.value
+            }), item.icon)), /*#__PURE__*/ React.createElement(View, {
+                className: "".concat(classPrefix, "-item-title"),
+                ariaHidden: true
+            }, item.title));
+        })));
+    };
+    var renderQuickEnterElement = function() {
+        return /*#__PURE__*/ React.createElement(View, _object_spread({
+            className: classes,
+            style: style
+        }, rest), renderTitleBar(), children, renderContent());
+    };
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({
+        style: {
+            background: 'transparent'
+        }
+    }, popupProps), {
+        overlayStyle: {
+            background: 'transparent'
+        },
+        visible: innerVisible,
+        position: "top",
+        onOverlayClick: function() {
+            if (!closeOnOverlayClick) return;
+            onCancelEvent();
+        },
+        onClose: onCancelEvent
+    }), renderQuickEnterElement()));
+};
+var QuickEnter = /*#__PURE__*/ React.forwardRef(InternalQuickEnter);
+export default QuickEnter;

package/dist/es/packages/quickenter/style/css.js

@@ -0,0 +1,2 @@
+import '../../popup/style/css';
+import './style.css';

package/dist/es/packages/quickenter/style/index.js

@@ -0,0 +1,2 @@
+import '../../popup/style';
+import './quickenter.scss';

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

@@ -0,0 +1,120 @@
+.nut-quickenter {
+  width: 100%;
+  /* 限制弹层最大高度，包含安全区 */
+  max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0));
+  background: $quickenter-bg-color;
+  border-radius: 0 0 12px 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow: $quickenter-box-shadow;
+  // backdrop-filter: $quickenter-backdrop-filter;
+
+  &.safe-area-top {
+    /* 使用 env fallback，确保旧浏览器返回 0 */
+    padding-top: calc(
+      env(safe-area-inset-top, 0) * var(--nutui-safe-area-multiple, 1)
+    );
+  }
+
+  &-control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 16px 0;
+    box-sizing: border-box;
+  }
+
+  &-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    color: $quickenter-title-color;
+    font-size: $quickenter-title-font-size;
+  }
+
+  &-close-btn {
+    color: $quickenter-close-icon-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg,
+    .nut-icon {
+      width: $quickenter-close-icon-size;
+      height: $quickenter-close-icon-size;
+    }
+  }
+
+  &-content {
+    flex: 1;
+    padding: 10px 28px;
+    overflow-y: hidden; // 始终可滚动，防止内容被遮挡
+    box-sizing: border-box;
+
+    &-scrollable {
+      overflow-y: auto; // Only scroll when > 8 items
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 56px;
+    padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    box-sizing: border-box;
+    cursor: pointer;
+
+    // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
+    margin-right: calc((100% - 224px) / 3);
+
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+
+    &-icon {
+      width: 56px;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: $quickenter-item-icon-bg-color;
+      color: $quickenter-item-icon-color;
+      margin-bottom: 8px;
+      flex-shrink: 0;
+
+      svg,
+      .nut-icon {
+        width: 22px;
+        height: 22px;
+      }
+    }
+
+    &-title {
+      font-size: $quickenter-item-title-font-size;
+      color: $quickenter-item-title-color;
+      text-align: center;
+      line-height: 1.4;
+      // Allow multi-line if text is long, preventing truncation
+      white-space: normal;
+      word-wrap: break-word;
+      width: 72px; // Allow text to be slightly wider than icon
+      margin-left: -8px; // Center 72px title over 56px icon
+      margin-right: -8px;
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+@charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-quickenter {
+  width: 100%;
+  /* 限制弹层最大高度，包含安全区 */
+  max-height: calc(var(--nutui-quickenter-max-height, 256px) + env(safe-area-inset-top, 0));
+  background: var(--nutui-quickenter-bg-color, #f5f5f5);
+  border-radius: 0 0 12px 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--nutui-quickenter-box-shadow, 0px 8px 16px rgba(141, 153, 167, 0.2), 0px -0.5px 0px rgba(0, 0, 0, 0.05) inset);
+}
+.nut-quickenter.safe-area-top {
+  /* 使用 env fallback，确保旧浏览器返回 0 */
+  padding-top: calc(env(safe-area-inset-top, 0) * var(--nutui-safe-area-multiple, 1));
+}
+.nut-quickenter-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30px 16px 0;
+  box-sizing: border-box;
+}
+.nut-quickenter-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  color: var(--nutui-quickenter-title-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, 14px));
+}
+.nut-quickenter-close-btn {
+  color: var(--nutui-quickenter-close-icon-color, #808080);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nut-quickenter-close-btn svg,
+.nut-quickenter-close-btn .nut-icon {
+  width: var(--nutui-quickenter-close-icon-size, 12px);
+  height: var(--nutui-quickenter-close-icon-size, 12px);
+}
+.nut-quickenter-content {
+  flex: 1;
+  padding: 10px 28px;
+  overflow-y: hidden;
+  box-sizing: border-box;
+}
+.nut-quickenter-content-scrollable {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-quickenter-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+}
+.nut-quickenter-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 56px;
+  padding: 0 0 12px 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-right: calc((100% - 224px) / 3);
+}
+.nut-quickenter-item:nth-child(4n) {
+  margin-right: 0;
+}
+.nut-quickenter-item-icon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--nutui-quickenter-item-icon-bg-color, #ffffff);
+  color: var(--nutui-quickenter-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+.nut-quickenter-item-icon svg,
+.nut-quickenter-item-icon .nut-icon {
+  width: 22px;
+  height: 22px;
+}
+.nut-quickenter-item-title {
+  font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, 12px));
+  color: var(--nutui-quickenter-item-title-color, var(--nutui-color-title, #1a1a1a));
+  text-align: center;
+  line-height: 1.4;
+  white-space: normal;
+  word-wrap: break-word;
+  width: 72px;
+  margin-left: -8px;
+  margin-right: -8px;
+}