fix(safearea): 在小程序环境安全区距离未生效的问题

src/packages/safearea/demos/taro/demo1.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollView, Text } from '@tarojs/components'
+import { ScrollView, Text, View } from '@tarojs/components'
 import { SafeArea } from '@nutui/nutui-react-taro'
 
 function generateRandomTextArray(count: number) {
@@ -20,8 +20,13 @@ function generateRandomTextArray(count: number) {
 const Demo1 = () => {
   return (
     <ScrollView>
+      <View style={{ backgroundColor: 'red' }}>
+        <SafeArea position="top" />
+      </View>
       <Text>{generateRandomTextArray(900).join(' ')}</Text>
-      <SafeArea position="bottom" />
+      <View style={{ backgroundColor: 'red' }}>
+        <SafeArea position="bottom" />
+      </View>
     </ScrollView>
   )
 }

src/packages/safearea/safearea.scss

@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: flex;
+  display: block;
   width: 100%;
 
   &-position-top {

src/packages/safearea/safearea.taro.tsx

@@ -1,12 +1,29 @@
 import React, { FC } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
 import { TaroSafeAreaProps } from '@/types'
+import { jd } from '../../utils/taro/platform'
 
 const classPrefix = 'nut-safe-area'
 export const SafeArea: FC<TaroSafeAreaProps> = (props) => {
+  const getSafeAreaStyle = () => {
+    if (jd()) {
+      const { screenHeight, safeArea } = Taro.getSystemInfoSync()
+      if (props.position === 'top') {
+        return { paddingTop: safeArea?.top || 0 }
+      }
+      if (props.position === 'bottom') {
+        const bottom = safeArea?.bottom || screenHeight
+        return { paddingBottom: screenHeight - bottom }
+      }
+    }
+    return {}
+  }
+
   return (
     <View
+      style={getSafeAreaStyle()}
       className={classNames(
         classPrefix,
         `${classPrefix}-position-${props.position}`

src/utils/taro/platform.ts

@@ -5,10 +5,19 @@ export const harmony = () => {
     getEnv().toLowerCase()
   )
 }
+
 export const web = () => {
   return ['web'].includes(getEnv().toLowerCase())
 }
 
 export const miniprogram = () => {
   return ['mini'].includes(getEnv().toLowerCase())
 }
+
+export const weapp = () => {
+  return ['weapp'].includes(getEnv().toLowerCase())
+}
+
+export const jd = () => {
+  return ['jd'].includes(getEnv().toLowerCase())
+}