状态栏修复更新

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

src/pages/shop/index.tsx

@@ -1,11 +1,15 @@
 import { View, Text, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useThemeContext } from '../../context/ThemeContext'
+import { useSafeArea } from '../../hooks/useSafeArea'
+import { useStatusBar } from '../../hooks/useStatusBar'
 import './index.scss'
 import { PRODUCTS } from '../../utils/productConfig'
 
 export default function ShopPage() {
   const { resolvedTheme } = useThemeContext()
+  const safe = useSafeArea()
+  useStatusBar(resolvedTheme)
 
   const openDetail = (productId: string) => {
     Taro.navigateTo({ url: `/pages/shop/detail/index?id=${productId}` })
@@ -14,7 +18,7 @@ export default function ShopPage() {
   return (
     <View className={`shop-page theme-${resolvedTheme}`}>
       <View className="shop-list">
-        <View className="shop-header">
+        <View className="shop-header" style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
           <Text className="shop-header-title">智绘精选</Text>
           <Text className="shop-header-sub">激光微雕定制好物</Text>
         </View>