fix(tab-bar): 修复placeholder高度问题

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

@@ -2,10 +2,24 @@ import { wxComponent, SuperComponent, RelationsOptions } from '../common/src/ind
 import config from '../common/config';
 import props from './props';
 import { getRect } from '../common/utils';
+import { getWindowInfo } from '../common/wechat';
 
 const { prefix } = config;
 const classPrefix = `${prefix}-tab-bar`;
 
+/** 获取底部安全区高度（home indicator 区） */
+function getSafeAreaBottom() {
+  try {
+    const info = getWindowInfo();
+    if (info && info.safeArea && typeof info.screenHeight === 'number') {
+      return Math.max(0, info.screenHeight - info.safeArea.bottom);
+    }
+  } catch (e) {
+    // ignore
+  }
+  return 0;
+}
+
 @wxComponent()
 export default class Tabbar extends SuperComponent {
   relations: RelationsOptions = {
@@ -37,7 +51,7 @@ export default class Tabbar extends SuperComponent {
     value() {
       this.updateChildren();
     },
-    'fixed, placeholder'() {
+    'fixed, placeholder, shape, safeAreaInsetBottom'() {
       this.setPlaceholderHeight();
     },
   };
@@ -54,7 +68,11 @@ export default class Tabbar extends SuperComponent {
 
       wx.nextTick(() => {
         getRect(this, `.${classPrefix}`).then((res) => {
-          this.setData({ placeholderHeight: res.height });
+          let { height } = res;
+          if (this.properties.shape === 'round' && this.properties.safeAreaInsetBottom) {
+            height += getSafeAreaBottom();
+          }
+          this.setData({ placeholderHeight: height });
         });
       });
     },

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

@@ -0,0 +1,6 @@
+---
+pr_number: 4521
+contributor: novlan1
+---
+
+- fix(TabBar): 修复 `shape` 为 `round` 时占位高度未包含底部安全区的问题 @novlan1 ([#4521](https://github.com/Tencent/tdesign-miniprogram/pull/4521))

packages/tdesign-uniapp/.changelog/pr-4521.md

@@ -0,0 +1,7 @@
+---
+pr_number: 4521
+contributor: novlan1
+---
+
+- fix(TabBar): 修复 `shape` 为 `round` 时占位高度未包含底部安全区的问题 @novlan1 ([#4521](https://github.com/Tencent/tdesign-miniprogram/pull/4521))
+- fix(ColorPicker): 修复 H5 下预设色彩排列问题 @novlan1 ([#4521](https://github.com/Tencent/tdesign-miniprogram/pull/4521))

packages/uniapp-components/color-picker/color-picker.less

@@ -289,18 +289,39 @@
   &__swatches-items {
     margin-top: 24rpx;
     width: 100%;
-    list-style: none;
+    height: 48rpx;
     display: flex;
-
-    overflow-x: auto;
-    overflow-y: auto;
+    flex-direction: row;
 
     &::-webkit-scrollbar {
       display: none;
       width: 0;
       height: 0;
       color: transparent;
     }
+
+    // 关键：穿透 uni-scroll-view 内部 wrapper，让色块横向排列（H5 only）
+    :deep(.uni-scroll-view),
+    :deep(.uni-scroll-view-content) {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+    }
+
+    // 关键：隐藏 H5 端 uni-scroll-view 内部真正滚动节点的滚动条
+    :deep(.uni-scroll-view) {
+      &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+        background: transparent;
+        color: transparent;
+      }
+
+      // Firefox / 非 webkit 内核
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
   }
 
   &__swatches-item {
@@ -351,7 +372,6 @@
 }
 
 .transparentBgImage () {
-  /* stylelint-disable-next-line color-no-hex */
   background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5),
     linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
   background-size: 6px 6px;

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

@@ -26,13 +26,26 @@ import { prefix } from '../common/config';
 
 import { ParentMixin, RELATION_MAP } from '../common/relation';
 import { uniComponent } from '../common/src/index';
-import { coalesce, getRect, nextTick } from '../common/utils';
+import { coalesce, getRect, nextTick, getWindowInfo } from '../common/utils';
 import tools from '../common/utils.wxs';
 
 import props from './props';
 
 const classPrefix = `${prefix}-tab-bar`;
 
+/** 获取底部安全区高度（home indicator 区） */
+function getSafeAreaBottom() {
+  try {
+    const info = getWindowInfo();
+    if (info && info.safeArea && typeof info.screenHeight === 'number') {
+      return Math.max(0, info.screenHeight - info.safeArea.bottom);
+    }
+  } catch (e) {
+    // ignore
+  }
+  return 0;
+}
+
 
 export default {
   ...uniComponent({
@@ -81,6 +94,12 @@ export default {
       placeholder() {
         this.setPlaceholderHeight();
       },
+      shape() {
+        this.setPlaceholderHeight();
+      },
+      safeAreaInsetBottom() {
+        this.setPlaceholderHeight();
+      },
     },
     mounted() {
       this.setPlaceholderHeight();
@@ -93,7 +112,16 @@ export default {
         }
         nextTick().then(() => {
           getRect(this, `.${classPrefix}`).then((res) => {
-            this.placeholderHeight = res.height;
+            let { height } = res;
+            // round 形态使用 `bottom: env(safe-area-inset-bottom)` 上抬整个 bar，
+            // getBoundingClientRect 拿到的高度不包含这部分上抬量，需要手动补上，
+            // 否则 placeholder 占位高度会少一个底部安全区，导致页面内容被遮挡。
+            // normal 形态使用 `padding-bottom: env(safe-area-inset-bottom)`，
+            // 安全区已包含在元素自身高度中，无需重复补。
+            if (this.shape === 'round' && this.safeAreaInsetBottom) {
+              height += getSafeAreaBottom();
+            }
+            this.placeholderHeight = height;
           });
         });
       },