@nutui/nutui-react-taro 3.0.21-cpp → 3.1.0-beta.2

package/CHANGELOG.md

@@ -1,40 +1,90 @@
-# v3.0.21-cpp
-`2026-05-20`
+# v3.1.0-beta.2
+`2026-06-08`
+
 
-* 📦 build: 添加postinstall脚本以收集使用统计信息 (#3436)
+* 🏡 chore: 增加4x官网入口
+* :bug: fix: 移除jmfe桥接方式 (#3478)
 
 
-# v3.0.20-cpp
+# v3.1.0-beta.1
 
-`2026-05-15`
+`2026-05-26`
 
-- 🚀 feat(price): 增加 `raw` 属性，开启后 price 包含非法字符时原样展示 (#3453)
-- ♿️ feat(price): 支持无障碍 (#3441)
-- 🚀 feat(calendar): 处理日历在多端表现异常问题，解决 weekend 样式优先级问题 (#3452)
-- 🚀 feat(popup): 增加属性用于表达是否展示动效，并透传 overlay 属性
-- 🐛 fix(calendar): 修复文本 color 继承问题，calendarCard 顶部箭头 icon 替换为 Image 标签 (#3444)
-- 🏡 chore(steps): 调整样式 (#3458)
+- :sparkles: feat: 等比适配 (#3463)
 
-# v3.0.19-cpp.28
+# v3.0.20
 
-`2026-04-27`
+`2026-05-20`
 
-- 🚀 feat(price): 组件增加原样渲染的兜底逻辑，支持输入内容包含无价格或多个价格时直接原样返回 (#3440)
-- ♿️ feat(calendarcard): 补充无障碍支持 (A11y)，增加 `dayAriaLabel` 多语言配置，开放 `renderDayAriaLabel` 以及在 Web 端支持了 `weekdays` 属性自定义星期的表头
+- :sparkles: feat: enhance SafeArea with className/style props and constant() iOS fallback (#3388)
+- :sparkles: feat(language): 添加越南语语言包 (#3378)
+- :bug: fix: 修改多语言
+- :bug: fix: 修订demo
+- 🏡 chore(deps): update dependency jest to v30 (#3288)
+- 🏡 chore(deps): update commitlint monorepo to v20 (#3428)
+- 🏡 chore(deps): update actions/github-script action to v9 (#3432)
+- 🔨 build: 添加postinstall脚本以收集使用统计信息 (#3436)
+
+# v3.0.19
+
+`2026-03-06`
+
+- :sparkles: feat: 合并近期跨原生改动点，增加了无障碍，部分组件增加了新功能。 (#3420)
+- :sparkles: feat: 给 searchbar 暴露 input 更多属性 (#3416)
+- :sparkles: feat(toast): add functionality to make toast persistent until manually cleared (#3410)
+- :sparkles: feat(avatar): support image fill mode in taro avatar component (#3405)
+- :sparkles: feat(language): 添加日语语言包 (#3384)
+- :sparkles: feat(ascf): 支持ASCF鸿蒙元服务 (#3402)
+- :sparkles: feat(theme): 升级8月份主题的微调，修订dialog 样式的鸿蒙适配等 (#3351)
+- :sparkles: feat(Popup): 新增弹层可上下滑动 (#3340)
+- :bug: fix(tag): 修订样式 (#3425)
+- :bug: fix: 修订导入方式,兼容五端处理 (#3419)
+- :bug: fix(countup): 修改千分位展示异常问题 (#3417)
+- :bug: fix(datepicker): 修复在使用 DatePicker 时页面会短暂出现 0 的问题 (#3399)
+- :bug: fix: fix showCount props is invalid in alipay (#3366)
+- :bug: fix: 更正正黑字体 (#3363)
+- :bug: fix: 兼容nextjs ssr，初始状态class=""元素会闪一下 (#3358)
+- :bug: fix: dialog.taro中defaultProps使用ts断言确认类型 (#3347)
+- :bug: fix(uploader): 处理非图片文件类型问题 (#3343)
+- :bug: fix(input): 兼容h5和小程序获取原生input标签 (#3341)
+- :bug: fix(range): taro环境异步渲染useReady不会触发 (#3297)
+- :bug: fix(swiper): duration属性透传 (#3337)
+- zap: perf(col): 使用hooks优化 (#3361)
 
-# v3.0.19-cpp.27
+# v3.0.18
 
-`2026-04-24`
+`2026-03-06`
 
-- 🏡 chore: 升级京东正黑字体到 2.3 (#3435)
-- 🏡 chore: 升级 icon 库版本
-- 🚀 feat: 针对小程序环境进行性能优化与 SelectorQuery 作用域适配 (Tabs, CountUp, getRect)
-- ♿️ feat: 全面适配无障碍 (A11y)，涉及组件：Image, Dialog, Button, SearchBar, Popup, Tabs, Progress, Avatar, NavBar, ResultPage
-- 📖 docs: 新增组件标准白皮书与 AI 助手相关文档
-- 🐛 fix(avatar): 修复 onClick 条件判断逻辑并支持 Taro 端 alt 属性
-- 🐛 fix(tabs): 修复 useRtl 引用路径并优化无障碍属性
-- 🐛 fix(quickenter): 修复顶部安全区域适配问题
-- 🐛 fix(type): 修复类型导出与 lint 问题
+- 🏡 chore(release): v3.0.18
+- 🏡 chore: 升级icon库 (#3330)
+- 🏡 chore: 发布taro下的样式按需插件
+- 📖 docs: 更新介绍部分内容 (#3324)
+- :sparkles: feat: 合并近期跨原生改动点，增加了无障碍，部分组件增加了新功能。 (#3420)
+- :sparkles: feat: 给 searchbar 暴露 input 更多属性 (#3416)
+- :sparkles: feat(toast): add functionality to make toast persistent until manually cleared (#3410)
+- :sparkles: feat(avatar): support image fill mode in taro avatar component (#3405)
+- :sparkles: feat(language): 添加日语语言包 (#3384)
+- :sparkles: feat(ascf): 支持ASCF鸿蒙元服务 (#3402)
+- :sparkles: feat(theme): 升级8月份主题的微调，修订dialog 样式的鸿蒙适配等 (#3351)
+- :sparkles: feat(Popup): 新增弹层可上下滑动 (#3340)
+- :sparkles: feat: Ellipsis校验越界不走缓存配置 (#3329)
+- :sparkles: feat(price): 支持自定义颜色&数据原样输出 (#3328)
+- :sparkles: feat(notify): 支持promise调用notice (#3319)
+- :bug: fix(tag): 修订样式 (#3425)
+- :bug: fix: 修订导入方式,兼容五端处理 (#3419)
+- :bug: fix(countup): 修改千分位展示异常问题 (#3417)
+- :bug: fix(datepicker): 修复在使用 DatePicker 时页面会短暂出现 0 的问题 (#3399)
+- :bug: fix: fix showCount props is invalid in alipay (#3366)
+- :bug: fix: 更正正黑字体 (#3363)
+- :bug: fix: 兼容nextjs ssr，初始状态class=""元素会闪一下 (#3358)
+- :bug: fix: dialog.taro中defaultProps使用ts断言确认类型 (#3347)
+- :bug: fix(uploader): 处理非图片文件类型问题 (#3343)
+- :bug: fix(input): 兼容h5和小程序获取原生input标签 (#3341)
+- :bug: fix(range): taro环境异步渲染useReady不会触发 (#3297)
+- :bug: fix(swiper): duration属性透传 (#3337)
+- :bug: fix(noticebar): 适配鸿蒙样式修复 (#3332)
+- :bug: Fix icons svg (#3331)
+- zap: perf(col): 使用hooks优化 (#3361)
 
 # v3.0.18
 

package/dist/cjs/locales/vi-VN.d.ts

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

package/dist/cjs/locales/vi-VN.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var viVN = {
+    save: 'Lưu',
+    confirm: 'Xác nhận',
+    cancel: 'Hủy',
+    done: 'Hoàn thành',
+    noData: 'Tạm thời không có dữ liệu',
+    placeholder: 'Vui lòng nhập nội dung',
+    select: 'Vui lòng chọn',
+    edit: 'Chỉnh sửa',
+    reset: 'Đặt lại',
+    close: 'Đóng',
+    back: 'Quay lại',
+    clear: 'Xóa',
+    image: {
+        errorTip: 'Tải ảnh không thành công'
+    },
+    video: {
+        errorTip: 'Tải video không thành công',
+        clickRetry: 'Nhấn để thử lại'
+    },
+    fixednav: {
+        activeText: 'Thu gọn thanh điều hướng',
+        inactiveText: 'Điều hướng nhanh'
+    },
+    infiniteloading: {
+        pullRefreshText: 'Thả để làm mới',
+        loadText: 'Đang tải……',
+        loadMoreText: 'Ôi, đã đến cuối rồi!'
+    },
+    pagination: {
+        prev: 'Trang trước',
+        next: 'Trang sau'
+    },
+    range: {
+        rangeText: 'Không nằm trong phạm vi này'
+    },
+    calendaritem: {
+        weekdays: [
+            'CN',
+            'T2',
+            'T3',
+            'T4',
+            'T5',
+            'T6',
+            'T7'
+        ],
+        end: 'Kết thúc',
+        start: 'Bắt đầu',
+        confirm: 'Xác nhận',
+        title: 'Chọn lịch',
+        monthTitle: function monthTitle(year, month) {
+            return "Th\xe1ng ".concat(month, " Năm ").concat(year);
+        },
+        today: 'Hôm nay',
+        loadPreviousMonth: 'Tải dữ liệu của tháng trước',
+        noEarlierMonth: 'Không có tháng nào sớm hơn',
+        dayAriaLabel: function dayAriaLabel(year, month, day, today, isActive, isDisable) {
+            var dateStr = "".concat(year, "-").concat(month, "-").concat(day);
+            var label = today ? "H\xf4m nay, ".concat(dateStr) : dateStr;
+            if (isActive) {
+                label = "Đ\xe3 chọn ".concat(label);
+            }
+            if (isDisable) {
+                label = "".concat(label, " bị v\xf4 hiệu");
+            }
+            return label;
+        }
+    },
+    shortpassword: {
+        title: 'Vui lòng nhập mật khẩu',
+        description: 'Bạn đã sử dụng tài sản ảo, vui lòng xác minh',
+        tips: 'Quên mật khẩu'
+    },
+    uploader: {
+        list: 'Tải lên tập tin',
+        ready: 'Chuẩn bị hoàn thành',
+        readyUpload: 'Chuẩn bị tải lên',
+        waitingUpload: 'Đang đợi tải lên',
+        uploading: 'Đang tải lên...',
+        success: 'Tải lên thành công',
+        error: 'Tải lên thất bại',
+        deleteWord: 'Người dùng đã chặn xóa!'
+    },
+    countdown: {
+        day: 'Ngày',
+        hour: 'Giờ',
+        minute: 'Phút',
+        second: 'Giây'
+    },
+    address: {
+        selectRegion: 'Vui lòng chọn khu vực',
+        deliveryTo: 'Giao đến',
+        hotCity: 'Thành phố nóng',
+        chooseAnotherAddress: 'Chọn địa chỉ khác',
+        selectProvince: 'Chọn Tỉnh/Thành phố'
+    },
+    signature: {
+        reSign: 'Ký lại',
+        unsupported: 'Xin lỗi, trình duyệt hiện tại không hỗ trợ Canvas, không thể dùng tính năng này!'
+    },
+    ecard: {
+        chooseText: 'Chọn mệnh giá thẻ',
+        otherValueText: 'Mệnh giá khác',
+        placeholder: 'Nhập số nguyên 1-5000'
+    },
+    timeselect: {
+        pickupTime: 'Thời gian lấy hàng'
+    },
+    sku: {
+        buyNow: 'Mua ngay',
+        buyNumber: 'Số lượng mua',
+        addToCard: 'Thêm vào giỏ hàng'
+    },
+    skuheader: {
+        skuId: 'Mã sản phẩm'
+    },
+    addresslist: {
+        addAddress: 'Tạo địa chỉ '
+    },
+    comment: {
+        complaintsText: 'Tôi muốn khiếu nại',
+        additionalReview: function additionalReview(day) {
+            return "Đ\xe1nh gi\xe1 th\xeam sau ".concat(day, " ng\xe0y");
+        },
+        additionalImages: function additionalImages(length) {
+            return "".concat(length, " ảnh đ\xe1nh gi\xe1 th\xeam");
+        }
+    },
+    searchbar: {
+        basePlaceholder: 'Lên JD tìm sản phẩm tốt',
+        text: 'Văn bản',
+        test: 'Kiểm tra',
+        title1: 'Cách dùng cơ bản',
+        title2: 'Hình dạng và độ dài tối đa ô tìm kiếm',
+        title3: 'Cài đặt nền trong và ngoài ô tìm kiếm',
+        title4: 'Cài đặt văn bản ô tìm kiếm',
+        title5: 'Tùy chỉnh biểu tượng',
+        title6: 'Lắng nghe thay đổi dữ liệu'
+    },
+    audio: {
+        back: 'Quay lại',
+        forward: 'Chuyển nhanh',
+        pause: 'Tạm dừng',
+        start: 'Bắt đầu',
+        mute: 'Tắt âm',
+        tips: 'Sự kiện onPlayEnd chỉ xảy ra khi loop=false'
+    },
+    avatarCropper: {
+        rotate: 'Xoay',
+        selectImage: 'Chọn ảnh'
+    },
+    datepicker: {
+        year: 'Năm',
+        month: 'Tháng',
+        day: 'Ngày',
+        hour: 'Giờ',
+        min: 'Phút',
+        seconds: 'Giây'
+    },
+    pullToRefresh: {
+        pullingText: 'Kéo xuống để làm mới',
+        canReleaseText: 'Thả để làm mới',
+        refreshingText: 'Đang tải...',
+        completeText: 'Làm mới thành công'
+    },
+    tour: {
+        prevStepText: 'Bước trước',
+        completeText: 'Hoàn thành',
+        nextStepText: 'Bước tiếp theo'
+    },
+    watermark: {
+        errorCanvasTips: 'Môi trường hiện tại không hỗ trợ Canvas'
+    },
+    mask: 'Lớp phủ',
+    quickenter: {
+        title: 'Truy cập nhanh'
+    }
+};
+var _default = viVN;

package/dist/cjs/locales/zh-UG.js

@@ -181,7 +181,7 @@ var zhUG = {
     watermark: {
         errorCanvasTips: 'Canvas نى قوللىمايدۇ'
     },
-    mask: 'mask',
+    mask: 'قاپلىما قەۋەت',
     quickenter: {
         title: 'تېز كىرگۈزۈش'
     }

package/dist/cjs/packages/actionsheet/style/actionsheet.scss

@@ -7,7 +7,7 @@
   }
 
   .nut-popup-title {
-    border-bottom: 1px solid $actionsheet-border-color;
+    border-bottom: scale-px(1px) solid $actionsheet-border-color;
   }
 
   &-list {
@@ -21,7 +21,7 @@
   &-cancel,
   &-item {
     display: block;
-    padding: 10px;
+    padding: scale-px(10px);
     text-align: $actionsheet-item-text-align;
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
@@ -52,8 +52,8 @@
   }
 
   &-cancel {
-    margin-top: 5px;
-    border-top: 1px solid $actionsheet-border-color;
+    margin-top: scale-px(5px);
+    border-top: scale-px(1px) solid $actionsheet-border-color;
     border-radius: $actionsheet-border-radius;
   }
 

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -10,7 +20,7 @@
   background-color: var(--nutui-actionsheet-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-actionsheet .nut-popup-title {
-  border-bottom: 1px solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-actionsheet-list {
   display: block;
@@ -21,25 +31,25 @@
 }
 .nut-actionsheet-cancel, .nut-actionsheet-item {
   display: block;
-  padding: 10px;
+  padding: calc(10px * var(--nut-scale-f, 1));
   text-align: var(--nutui-actionsheet-item-text-align, center);
-  line-height: var(--nutui-actionsheet-item-line-height, 24px);
-  font-size: var(--nutui-font-size-base, 14px);
+  line-height: var(--nutui-actionsheet-item-line-height, calc(24px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a));
   cursor: pointer;
 }
 .nut-actionsheet-cancel-name, .nut-actionsheet-item-name {
   text-align: var(--nutui-actionsheet-item-text-align, center);
-  line-height: var(--nutui-actionsheet-item-line-height, 24px);
-  font-size: var(--nutui-font-size-base, 14px);
+  line-height: var(--nutui-actionsheet-item-line-height, calc(24px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-actionsheet-cancel-description, .nut-actionsheet-item-description {
   display: block;
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-color-text, #505259);
   text-align: var(--nutui-actionsheet-item-text-align, center);
-  line-height: var(--nutui-actionsheet-item-line-height, 24px);
+  line-height: var(--nutui-actionsheet-item-line-height, calc(24px * var(--nut-scale-f, 1)));
 }
 .nut-actionsheet-cancel-danger, .nut-actionsheet-item-danger {
   color: var(--nutui-actionsheet-item-danger, var(--nutui-color-danger, #ff0f23));
@@ -49,8 +59,8 @@
   cursor: not-allowed;
 }
 .nut-actionsheet-cancel {
-  margin-top: 5px;
-  border-top: 1px solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  margin-top: calc(5px * var(--nut-scale-f, 1));
+  border-top: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   border-radius: var(--nutui-actionsheet-border-radius, 0);
 }
 .nut-actionsheet-safe-area {

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

@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -63,7 +73,7 @@
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
-  font-size: var(--nutui-font-size-base, 14px);
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-popup-title {
   display: flex;
@@ -71,7 +81,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 11px);
+  padding: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -83,28 +93,31 @@
 .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-xl, 18px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-font-weight, 400);
 }
 .nut-popup-title-description-gap {
-  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
+  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 11px);
-  left: var(--nutui-popup-title-padding, 11px);
+  top: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 11px);
-  right: var(--nutui-popup-title-padding, 11px);
+  top: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1;
-  width: var(--nutui-popup-icon-size, 20px);
-  height: var(--nutui-popup-icon-size, 20px);
+  width: var(--nutui-popup-icon-size, calc(20px * var(--nut-scale-f, 1)));
+  height: var(--nutui-popup-icon-size, calc(20px * var(--nut-scale-f, 1)));
   color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
@@ -112,16 +125,16 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 11px);
-  left: var(--nutui-popup-title-padding, 11px);
+  top: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 11px);
-  left: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 11px);
-  bottom: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
+  bottom: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-popup-center {
   top: 50%;
@@ -133,7 +146,7 @@
   transform: translate(-50%, -50%);
 }
 .nut-popup-center.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
 .nut-popup-bottom {
   bottom: 0;
@@ -143,7 +156,7 @@
   width: 100%;
 }
 .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;
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) 0 0;
 }
 .nut-popup-bottom-top {
   position: absolute;
@@ -157,7 +170,7 @@
   height: 100%;
 }
 .nut-popup-right.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
+  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
 .nut-popup-left {
   top: 0;
@@ -168,7 +181,7 @@
   height: 100%;
 }
 .nut-popup-left.nut-popup-round {
-  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
+  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) 0;
 }
 .nut-popup-top {
   top: 0;
@@ -178,7 +191,7 @@
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
-  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
+  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
 .nut-popup-slide {
   /* 从顶部滑出 */
@@ -360,27 +373,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, calc(16px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
@@ -411,7 +424,7 @@
   background-color: var(--nutui-actionsheet-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-actionsheet .nut-popup-title {
-  border-bottom: 1px solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-actionsheet-list {
   display: block;
@@ -422,25 +435,25 @@
 }
 .nut-actionsheet-cancel, .nut-actionsheet-item {
   display: block;
-  padding: 10px;
+  padding: calc(10px * var(--nut-scale-f, 1));
   text-align: var(--nutui-actionsheet-item-text-align, center);
-  line-height: var(--nutui-actionsheet-item-line-height, 24px);
-  font-size: var(--nutui-font-size-base, 14px);
+  line-height: var(--nutui-actionsheet-item-line-height, calc(24px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a));
   cursor: pointer;
 }
 .nut-actionsheet-cancel-name, .nut-actionsheet-item-name {
   text-align: var(--nutui-actionsheet-item-text-align, center);
-  line-height: var(--nutui-actionsheet-item-line-height, 24px);
-  font-size: var(--nutui-font-size-base, 14px);
+  line-height: var(--nutui-actionsheet-item-line-height, calc(24px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-actionsheet-cancel-description, .nut-actionsheet-item-description {
   display: block;
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-color-text, #505259);
   text-align: var(--nutui-actionsheet-item-text-align, center);
-  line-height: var(--nutui-actionsheet-item-line-height, 24px);
+  line-height: var(--nutui-actionsheet-item-line-height, calc(24px * var(--nut-scale-f, 1)));
 }
 .nut-actionsheet-cancel-danger, .nut-actionsheet-item-danger {
   color: var(--nutui-actionsheet-item-danger, var(--nutui-color-danger, #ff0f23));
@@ -450,8 +463,8 @@
   cursor: not-allowed;
 }
 .nut-actionsheet-cancel {
-  margin-top: 5px;
-  border-top: 1px solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  margin-top: calc(5px * var(--nut-scale-f, 1));
+  border-top: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   border-radius: var(--nutui-actionsheet-border-radius, 0);
 }
 .nut-actionsheet-safe-area {

package/dist/cjs/packages/actionsheet/style-jmapp/actionsheet.scss

@@ -7,7 +7,7 @@
   }
 
   .nut-popup-title {
-    border-bottom: 1px solid $actionsheet-border-color;
+    border-bottom: scale-px(1px) solid $actionsheet-border-color;
   }
 
   &-list {
@@ -21,7 +21,7 @@
   &-cancel,
   &-item {
     display: block;
-    padding: 10px;
+    padding: scale-px(10px);
     text-align: $actionsheet-item-text-align;
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
@@ -52,8 +52,8 @@
   }
 
   &-cancel {
-    margin-top: 5px;
-    border-top: 1px solid $actionsheet-border-color;
+    margin-top: scale-px(5px);
+    border-top: scale-px(1px) solid $actionsheet-border-color;
     border-radius: $actionsheet-border-radius;
   }