2026-07-13 01:11:07 +08:00
12 changed files with 9 additions and 59 deletions
--- a/packages/vant/src/calendar/Calendar.tsx
+++ b/packages/vant/src/calendar/Calendar.tsx
@ -79,7 +79,6 @@ const calendarProps = {
  showRangePrompt: truthProp,
  confirmDisabledText: String,
  closeOnClickOverlay: truthProp,
-  safeAreaInsetTop: Boolean,
  safeAreaInsetBottom: truthProp,
  minDate: {
    type: Date,
@ -566,7 +565,6 @@ export default defineComponent({
            closeable={props.showTitle || props.showSubtitle}
            teleport={props.teleport}
            closeOnPopstate={props.closeOnPopstate}
-            safeAreaInsetTop={props.safeAreaInsetTop}
            closeOnClickOverlay={props.closeOnClickOverlay}
            onUpdate:show={updateShow}
          />
--- a/packages/vant/src/calendar/README.md
+++ b/packages/vant/src/calendar/README.md
@ -279,7 +279,6 @@ Following props are supported when the poppable is true
 | round | Whether to show round corner | _boolean_ | `true` |
 | close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
 | close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` |
-| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 | teleport | Specifies a target element where Calendar will be mounted | _string \| Element_ | - |

--- a/packages/vant/src/calendar/README.zh-CN.md
+++ b/packages/vant/src/calendar/README.zh-CN.md
@ -283,7 +283,6 @@ export default {
 | round | 是否显示圆角弹窗 | _boolean_ | `true` |
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
-| safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |

--- a/packages/vant/src/nav-bar/NavBar.tsx
+++ b/packages/vant/src/nav-bar/NavBar.tsx
@ -82,11 +82,8 @@ export default defineComponent({
          ref={navBarRef}
          style={style}
          class={[
-            bem({ fixed }),
-            {
-              [BORDER_BOTTOM]: border,
-              'van-safe-area-top': props.safeAreaInsetTop,
-            },
+            bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }),
+            { [BORDER_BOTTOM]: border },
          ]}
        >
          <div class={bem('content')}>
--- a/packages/vant/src/nav-bar/test/index.spec.ts
+++ b/packages/vant/src/nav-bar/test/index.spec.ts
@ -74,7 +74,7 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop'
    },
  });

-  expect(wrapper.classes()).toContain('van-safe-area-top');
+  expect(wrapper.classes()).toContain('van-nav-bar--safe-area-inset-top');
 });

 test('should change z-index when using z-index prop', () => {
--- a/packages/vant/src/popup/Popup.tsx
+++ b/packages/vant/src/popup/Popup.tsx
@ -48,7 +48,6 @@ const popupProps = extend({}, popupSharedProps, {
  iconPrefix: String,
  closeOnPopstate: Boolean,
  closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
-  safeAreaInsetTop: Boolean,
  safeAreaInsetBottom: Boolean,
 });

@ -178,7 +177,7 @@ export default defineComponent({
    const onKeydown = (event: KeyboardEvent) => emit('keydown', event);

    const renderPopup = lazyRender(() => {
-      const { round, position, safeAreaInsetTop, safeAreaInsetBottom } = props;
+      const { round, position, safeAreaInsetBottom } = props;

      return (
        <div
@ -190,10 +189,7 @@ export default defineComponent({
              round,
              [position]: position,
            }),
-            {
-              'van-safe-area-top': safeAreaInsetTop,
-              'van-safe-area-bottom': safeAreaInsetBottom,
-            },
+            { 'van-safe-area-bottom': safeAreaInsetBottom },
          ]}
          onKeydown={onKeydown}
          {...attrs}
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@ -125,7 +125,6 @@ Use `teleport` prop to specify mount location.
 | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
 | teleport | Specifies a target element where Popup will be mounted | _string \| Element_ | - |
-| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |

 ### Events
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@ -131,7 +131,6 @@ export default {
 | transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
-| safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |

 ### Events
--- a/packages/vant/src/popup/test/index.spec.jsx
+++ b/packages/vant/src/popup/test/index.spec.jsx
@ -259,27 +259,3 @@ test('should not call before-close when show prop becomes false', async () => {
  await wrapper.setProps({ show: false });
  expect(beforeClose).toHaveBeenCalledTimes(0);
 });
-
-test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => {
-  const wrapper = mount(Popup, {
-    props: {
-      show: true,
-      safeAreaInsetTop: true,
-    },
-  });
-
-  expect(wrapper.find('.van-popup').classes()).toContain('van-safe-area-top');
-});
-
-test('should have safe-area-inset-bottom class when using safe-area-inset-bottom prop', () => {
-  const wrapper = mount(Popup, {
-    props: {
-      show: true,
-      safeAreaInsetBottom: true,
-    },
-  });
-
-  expect(wrapper.find('.van-popup').classes()).toContain(
-    'van-safe-area-bottom'
-  );
-});
--- a/packages/vant/src/style/README.md
+++ b/packages/vant/src/style/README.md
@ -49,15 +49,11 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <div class="van-hairline--surround"></div>
 ```

-### Safe Area
+### Safe Area Bottom

-Enable safe area.
+Enable safe area inset bottom.

 ```html
-<!-- top -->
-<div class="van-safe-area-top"></div>
-
-<!-- bottom -->
 <div class="van-safe-area-bottom"></div>
 ```

--- a/packages/vant/src/style/README.zh-CN.md
+++ b/packages/vant/src/style/README.zh-CN.md
@ -47,15 +47,11 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```

-### 安全区
+### 底部安全区

-为元素添加安全区适配。
+为元素添加底部安全区适配。

 ```html
-<!-- 顶部安全区 -->
-<div class="van-safe-area-top"></div>
-
-<!-- 底部安全区 -->
 <div class="van-safe-area-bottom"></div>
 ```

--- a/packages/vant/src/style/base.less
+++ b/packages/vant/src/style/base.less
@ -26,11 +26,6 @@
  .multi-ellipsis(3);
 }

-.van-safe-area-top {
-  padding-top: constant(safe-area-inset-top);
-  padding-top: env(safe-area-inset-top);
-}
-
 .van-safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);