@tuya-miniapp/smart-ui 2.13.2-beta-2 → 2.13.2-beta-3

package/dist/common/utils.js

@@ -96,6 +96,8 @@ export function replacePlaceholders(template, values) {
 // 默认安全底部最小值为16px
 export const getSafeAreaInsetMin = () => 16;
 // 获取安全底部高度，适用于 iOS 和 Android
+// @deprecated 组件底部安全距离已改用 CSS `max(env(safe-area-inset-bottom), 16px)` 实现，
+// 无需再通过逻辑层计算；此方法仅为兼容历史外部调用保留。
 export function getSafeBottomOffset() {
     const safeAreaInsetBottomMin = getSafeAreaInsetMin();
     const { safeArea, screenHeight, statusBarHeight } = getSystemInfoSync() || {};

package/dist/popup/index.js

@@ -1,7 +1,6 @@
 import closeIcon from '@tuya-miniapp/icons/dist/svg/Xmark';
 import { SmartComponent } from '../common/component';
 import { transition } from '../mixins/transition';
-import { getSafeBottomOffset } from '../common/utils';
 SmartComponent({
     classes: [
         'enter-class',
@@ -82,15 +81,6 @@ SmartComponent({
     },
     data: {
         closeIcon,
-        bottomSafeHeight: 0,
-    },
-    mounted() {
-        if (!this.data.safeAreaInsetBottom)
-            return;
-        const bottomSafeHeight = getSafeBottomOffset();
-        this.setData({
-            bottomSafeHeight: Math.max(bottomSafeHeight, this.data.safeAreaInsetBottomMin),
-        });
     },
     created() {
         this.observeClass();

package/dist/popup/index.wxs

@@ -2,12 +2,26 @@
 var style = require('../wxs/style.wxs');
 
 function popupStyle(data) {
-  var transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
+  // 底部安全距离：整体逻辑与原 getSafeBottomOffset 一致——
+  // 「底部安全距离 + 16px 基础安全值」再与 safeAreaInsetBottomMin 取较大值；
+  // 区别仅在于安全距离改用全局注入的 CSS 变量 env(safe-area-inset-bottom) 获取，
+  // 不再从 systemInfo（screenHeight - safeArea.height - statusBarHeight）计算。
+  // 其中 16px 对应 utils.getSafeAreaInsetMin()。
+  var safeBottom = data.safeAreaInsetBottom
+    ? 'max(calc(env(safe-area-inset-bottom) + 16px), ' + (data.safeAreaInsetBottomMin || 0) + 'px)'
+    : null;
+
+  var transformStyle = null;
+  if (data.position === 'bottom') {
+    // 隐藏态需在自身高度基础上再位移底部安全距离，保证弹层完全移出屏幕
+    transformStyle = safeBottom
+      ? 'transform: translate3d(0, calc(100% + ' + safeBottom + '), 0)'
+      : 'transform: translate3d(0, 100%, 0)';
+  }
 
-  
   return style([
     {
-      'margin-bottom': data.bottomSafeHeight + 'px',
+      'margin-bottom': safeBottom,
       'z-index': data.zIndex,
       '-webkit-transition-duration': data.currentDuration + 'ms',
       'transition-duration': data.currentDuration + 'ms',

package/dist/popup/popup.wxml

@@ -3,7 +3,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
-  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, safeAreaInsetBottom, safeAreaInsetBottomMin }) }}"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/lib/common/utils.js

@@ -121,6 +121,8 @@ exports.replacePlaceholders = replacePlaceholders;
 var getSafeAreaInsetMin = function () { return 16; };
 exports.getSafeAreaInsetMin = getSafeAreaInsetMin;
 // 获取安全底部高度，适用于 iOS 和 Android
+// @deprecated 组件底部安全距离已改用 CSS `max(env(safe-area-inset-bottom), 16px)` 实现，
+// 无需再通过逻辑层计算；此方法仅为兼容历史外部调用保留。
 function getSafeBottomOffset() {
     var safeAreaInsetBottomMin = (0, exports.getSafeAreaInsetMin)();
     var _a = (0, version_1.getSystemInfoSync)() || {}, safeArea = _a.safeArea, screenHeight = _a.screenHeight, statusBarHeight = _a.statusBarHeight;

package/lib/popup/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
 var component_1 = require("../common/component");
 var transition_1 = require("../mixins/transition");
-var utils_1 = require("../common/utils");
 (0, component_1.SmartComponent)({
     classes: [
         'enter-class',
@@ -87,15 +86,6 @@ var utils_1 = require("../common/utils");
     },
     data: {
         closeIcon: Xmark_1.default,
-        bottomSafeHeight: 0,
-    },
-    mounted: function () {
-        if (!this.data.safeAreaInsetBottom)
-            return;
-        var bottomSafeHeight = (0, utils_1.getSafeBottomOffset)();
-        this.setData({
-            bottomSafeHeight: Math.max(bottomSafeHeight, this.data.safeAreaInsetBottomMin),
-        });
     },
     created: function () {
         this.observeClass();

package/lib/popup/index.wxs

@@ -2,12 +2,26 @@
 var style = require('../wxs/style.wxs');
 
 function popupStyle(data) {
-  var transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
+  // 底部安全距离：整体逻辑与原 getSafeBottomOffset 一致——
+  // 「底部安全距离 + 16px 基础安全值」再与 safeAreaInsetBottomMin 取较大值；
+  // 区别仅在于安全距离改用全局注入的 CSS 变量 env(safe-area-inset-bottom) 获取，
+  // 不再从 systemInfo（screenHeight - safeArea.height - statusBarHeight）计算。
+  // 其中 16px 对应 utils.getSafeAreaInsetMin()。
+  var safeBottom = data.safeAreaInsetBottom
+    ? 'max(calc(env(safe-area-inset-bottom) + 16px), ' + (data.safeAreaInsetBottomMin || 0) + 'px)'
+    : null;
+
+  var transformStyle = null;
+  if (data.position === 'bottom') {
+    // 隐藏态需在自身高度基础上再位移底部安全距离，保证弹层完全移出屏幕
+    transformStyle = safeBottom
+      ? 'transform: translate3d(0, calc(100% + ' + safeBottom + '), 0)'
+      : 'transform: translate3d(0, 100%, 0)';
+  }
 
-  
   return style([
     {
-      'margin-bottom': data.bottomSafeHeight + 'px',
+      'margin-bottom': safeBottom,
       'z-index': data.zIndex,
       '-webkit-transition-duration': data.currentDuration + 'ms',
       'transition-duration': data.currentDuration + 'ms',

package/lib/popup/popup.wxml

@@ -3,7 +3,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
-  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, safeAreaInsetBottom, safeAreaInsetBottomMin }) }}"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.13.2-beta-2",
+  "version": "2.13.2-beta-3",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",