状态栏修复更新

1.添加状态栏间距来防止内容遮挡
2.添加了跟随页面自动变色的状态栏标题色改变

src/pages/settings/index.tsx

@@ -3,6 +3,8 @@ import Taro from '@tarojs/taro'
 import { useState, useEffect, useCallback } from 'react'
 import './index.scss'
 import { useThemeContext } from '../../context/ThemeContext'
+import { useSafeArea } from '../../hooks/useSafeArea'
+import { useStatusBar } from '../../hooks/useStatusBar'
 import { getUserInfo, setUserInfo, clearUserInfo, getAddressList, getDefaultAddress, type AddressItem } from '../../utils/store'
 
 const THEME_OPTIONS: { label: string; value: 'light' | 'dark' | 'auto' }[] = [
@@ -20,6 +22,8 @@ const MENU = [
 
 export default function SettingsPage() {
   const { theme, setTheme, resolvedTheme } = useThemeContext()
+  const safe = useSafeArea()
+  useStatusBar(resolvedTheme)
   const [user, setUser] = useState<any>({})
   const [editName, setEditName] = useState('')
   const [editAvatar, setEditAvatar] = useState('')
@@ -65,7 +69,7 @@ export default function SettingsPage() {
       <View className='settings-page'>
         <View className='settings-area'>
 
-          <View className='page-header dashed-card mt-20'>
+          <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
             <View className='flex-between' style={{ width: '100%' }}>
               <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
               <Text className='page-title'>设置</Text>