fix(tab-bar): fallback safe-area inset for HarmonyOS

packages/components/tab-bar/tab-bar.less

@@ -29,7 +29,7 @@
 
   &--normal&--safe {
     padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   }
 
   &--round {
@@ -41,6 +41,6 @@
 
   &--fixed&--round&--safe {
     bottom: constant(safe-area-inset-bottom);
-    bottom: env(safe-area-inset-bottom);
+    bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   }
 }

packages/components/tab-bar/tab-bar.ts

@@ -36,6 +36,8 @@ export default class Tabbar extends SuperComponent {
     prefix,
     classPrefix,
     placeholderHeight: 56,
+    safeAreaBottomHeight: 0,
+    safeAreaBottomReady: false,
   };
 
   properties = props;
@@ -54,15 +56,37 @@ export default class Tabbar extends SuperComponent {
     'fixed, placeholder, shape, safeAreaInsetBottom'() {
       this.setPlaceholderHeight();
     },
+    safeAreaInsetBottom() {
+      this.setSafeAreaBottomHeight();
+    },
   };
 
   lifetimes = {
     ready() {
       this.showChildren();
+      this.setSafeAreaBottomHeight();
     },
   };
 
   methods = {
+    setSafeAreaBottomHeight() {
+      if (!this.properties.safeAreaInsetBottom) {
+        // 关闭时清空，避免残留值影响样式
+        if (this.data.safeAreaBottomReady || this.data.safeAreaBottomHeight !== 0) {
+          this.setData({ safeAreaBottomHeight: 0, safeAreaBottomReady: false });
+        }
+        return;
+      }
+
+      wx.nextTick(() => {
+        const safeAreaBottomHeight = getSafeAreaBottom();
+        this.setData({ safeAreaBottomHeight, safeAreaBottomReady: true }, () => {
+          // safeArea 注入后，placeholder 占位高度可能依赖它，再触发一次重算
+          this.setPlaceholderHeight();
+        });
+      });
+    },
+
     setPlaceholderHeight() {
       if (!this.properties.fixed || !this.properties.placeholder) return;
 

packages/components/tab-bar/tab-bar.wxml

@@ -6,7 +6,7 @@
   style="height: {{ placeholderHeight }}px;"
 />
 <view
-  style="{{_._style(['z-index: ' + zIndex, style, customStyle])}}"
+  style="{{_._style(['z-index: ' + zIndex, safeAreaBottomReady ? '--safe-area-inset-bottom: ' + safeAreaBottomHeight + 'px' : '', style, customStyle])}}"
   class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class"
   aria-role="tablist"
 >

packages/tdesign-miniprogram/.changelog/pr-4304.md

@@ -0,0 +1,6 @@
+---
+pr_number: 4304
+contributor: Darley-Wey
+---
+
+- fix(tab-bar):  HarmonyOS 的安全区域内边距 @Darley-Wey ([#4304](https://github.com/Tencent/tdesign-miniprogram/pull/4304))

packages/uniapp-components/tab-bar/tab-bar.less

@@ -29,7 +29,7 @@
 
   &--normal&--safe {
     padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   }
 
   &--round {
@@ -41,6 +41,6 @@
 
   &--fixed&--round&--safe {
     bottom: constant(safe-area-inset-bottom);
-    bottom: env(safe-area-inset-bottom);
+    bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   }
 }

packages/uniapp-components/tab-bar/tab-bar.vue

@@ -8,7 +8,14 @@
       :style="'height: ' + placeholderHeight + 'px;'"
     />
     <view
-      :style="'' + tools._style(['z-index: ' + zIndex, customStyle])"
+      :style="
+        '' +
+        tools._style([
+          'z-index: ' + zIndex,
+          safeAreaBottomReady ? '--safe-area-inset-bottom: ' + safeAreaBottomHeight + 'px' : '',
+          customStyle,
+        ])
+      "
       :class="
         '' +
         tools.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape]) +
@@ -74,6 +81,8 @@ export default {
 
         dataValue: coalesce(this.value, this.defaultValue),
         placeholderHeight: 56,
+        safeAreaBottomHeight: 0,
+        safeAreaBottomReady: false,
       };
     },
     watch: {
@@ -99,14 +108,31 @@ export default {
         this.setPlaceholderHeight();
       },
       safeAreaInsetBottom() {
+        this.setSafeAreaBottomHeight();
         this.setPlaceholderHeight();
       },
     },
     mounted() {
+      this.setSafeAreaBottomHeight();
       this.setPlaceholderHeight();
       this.showChildren();
     },
     methods: {
+      setSafeAreaBottomHeight() {
+        if (!this.safeAreaInsetBottom) {
+          if (this.safeAreaBottomReady || this.safeAreaBottomHeight !== 0) {
+            this.safeAreaBottomHeight = 0;
+            this.safeAreaBottomReady = false;
+          }
+          return;
+        }
+        nextTick().then(() => {
+          this.safeAreaBottomHeight = getSafeAreaBottom();
+          this.safeAreaBottomReady = true;
+          // safeArea 注入后 placeholder 高度可能需要重算
+          this.setPlaceholderHeight();
+        });
+      },
       setPlaceholderHeight() {
         if (!this.fixed || !this.placeholder) {
           return;