feat(safearea): 新增SafeArea组件

docs/.vitepress/items.ts

@@ -19,6 +19,7 @@ export const components = [
       { text: 'Divider 分割线', link: '/components/layout/divider' },
       { text: 'Grid 宫格', link: '/components/layout/grid' },
       { text: 'Layout 布局', link: '/components/layout/layout' },
+      { text: 'SafeArea 安全区', link: '/components/layout/safearea' },
       { text: 'Sticky 粘性布局', link: '/components/layout/sticky' },
     ],
   },

docs/components/layout/safearea.md

@@ -0,0 +1,56 @@
+# SafeArea 安全区 <Badge>v1.5.8</Badge>
+
+### 介绍
+
+在全面屏下提供自适应的边距调整。当网页被全屏展示时，可借助安全区实现自动适配。
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+function generateRandomTextArray(count: number) {
+  const characters = 'abcdefghijklmnopqrstuvwxyz'
+  const textArray = []
+  for (let j = 0; j < count; j++) {
+    const randomLength = Math.floor(Math.random() * 5) + 4 // 随机生成长度在4到8之间的数
+    let randomText = ''
+    for (let i = 0; i < randomLength; i++) {
+      const randomIndex = Math.floor(Math.random() * characters.length)
+      randomText += characters.charAt(randomIndex)
+    }
+    textArray.push(randomText)
+  }
+  return textArray
+}
+</script>
+
+<template>
+  <div class="demo full">
+    <h2 class="title">
+      基础用法
+    </h2>
+    <div>
+      {{ generateRandomTextArray(900).join(' ') }}
+    </div>
+    <nut-safe-area position="bottom" />
+  </div>
+</template>
+```
+
+## SafeArea
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- |-----|
+| position | 安全区的位置 | `'top' \| 'bottom'` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考  [ConfigProvider 组件](/components/basic/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-safe-area-multiple | 显示的倍数 | `1` |

example/config.ts

@@ -1,73 +1,6 @@
 import { isH5 } from './src/utils/env'
 
 export default {
-  docs: {
-    name: '指南',
-    packages: [
-      {
-        name: 'intro',
-        cName: '介绍',
-        eName: 'Introduction',
-        show: true,
-      },
-      {
-        name: 'start',
-        cName: '快速上手',
-        eName: 'Quickstart',
-        show: true,
-      },
-      {
-        name: 'official-theme',
-        cName: '官方主题',
-        eName: 'Official Theme',
-        show: true,
-      },
-      {
-        name: 'theme',
-        cName: '定制主题',
-        eName: 'Customize Theme',
-        show: true,
-      },
-      {
-        name: 'version',
-        cName: '4.0 更新介绍',
-        eName: 'Version',
-        show: true,
-      },
-      {
-        name: 'migrate-from-v3',
-        cName: '从 v3 升级到 v4',
-        eName: 'Migrate-from-v3',
-        show: true,
-      },
-      {
-        name: 'international',
-        cName: '国际化',
-        eName: 'Internationalization',
-        show: true,
-      },
-      {
-        name: 'ide',
-        cName: '开发工具支持',
-        eName: 'IDE tool support',
-        show: true,
-      },
-      {
-        name: 'contributing',
-        cName: '贡献指南',
-        eName: 'Contributing',
-        path: '#/contributing',
-        show: true,
-      },
-      {
-        name: 'https://github.com/jdf2e/nutui/releases',
-        cName: '更新日志',
-        eName: 'Changelog',
-        show: true,
-        isLink: true,
-      },
-    ],
-  },
   nav: [
     {
       name: '基础组件',
@@ -219,6 +152,18 @@ export default {
           desc: '布局组件Row',
           author: 'undo',
         },
+        {
+          version: '1.5.8',
+          name: 'SafeArea',
+          cType: '布局组件',
+          cName: '安全区',
+          type: 'component',
+          desc: '在全面屏下提供自适应的边距调整。当网页被全屏展示时，可借助安全区实现自动适配。',
+          show: true,
+          uni: true,
+          unidoc: true,
+          author: 'Yang1206',
+        },
         {
           version: '3.0.0',
           name: 'Sticky',
@@ -228,7 +173,7 @@ export default {
           desc: '当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在距离屏幕固定的距离处',
           show: true,
           uni: true,
-          unidoc: false,
+          unidoc: true,
           author: 'Yang1206',
         },
         {

example/src/pages/demo/layout/safearea/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+function generateRandomTextArray(count: number) {
+  const characters = 'abcdefghijklmnopqrstuvwxyz'
+  const textArray = []
+  for (let j = 0; j < count; j++) {
+    const randomLength = Math.floor(Math.random() * 5) + 4 // 随机生成长度在4到8之间的数
+    let randomText = ''
+    for (let i = 0; i < randomLength; i++) {
+      const randomIndex = Math.floor(Math.random() * characters.length)
+      randomText += characters.charAt(randomIndex)
+    }
+    textArray.push(randomText)
+  }
+  return textArray
+}
+</script>
+
+<template>
+  <div class="demo full">
+    <h2 class="title">
+      基础用法
+    </h2>
+    <div>
+      {{ generateRandomTextArray(900).join(' ') }}
+    </div>
+    <nut-safe-area position="bottom" />
+  </div>
+</template>
+
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "SafeArea"
+  }
+}
+</route>

packages/nutui/components/index.ts

@@ -107,3 +107,4 @@ export type * from './shakedice'
 export type * from './turntable'
 export type * from './codeinput'
 export type * from './loadingpage'
+export type * from './safearea'

packages/nutui/components/safearea/index.scss

@@ -0,0 +1,16 @@
+.nut-safe-area {
+  display: block;
+  width: 100%;
+
+  &-position-top {
+    padding-top: calc(
+      env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
+    );
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
+    );
+  }
+}

packages/nutui/components/safearea/index.ts

@@ -0,0 +1 @@
+export * from './safearea'

packages/nutui/components/safearea/safearea.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { commonProps } from '../_utils'
+
+export const safeareaProps = {
+  ...commonProps,
+  /**
+   * @description 安全区的位置
+   */
+  position: String as PropType<'top' | 'bottom'>,
+}
+
+export type SafeAreaProps = ExtractPropTypes<typeof safeareaProps>

packages/nutui/components/safearea/safearea.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { safeareaProps } from './safearea'
+
+const props = defineProps(safeareaProps)
+
+const classes = computed(() => {
+  return getMainClass(props, componentName, [
+   `${componentName}-position-${props.position}`,
+  ])
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-safe-area`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle" />
+</template>
+
+<style lang="scss">
+@import './index';
+</style>