状态栏修复更新

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

src/pages/shop/detail/index.tsx

@@ -4,14 +4,21 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import './index.scss'
 import { PRODUCTS } from '../../../utils/productConfig'
 import { ProductCategory } from '../../../types'
+import { useSafeArea } from '../../../hooks/useSafeArea'
+import { useStatusBar } from '../../../hooks/useStatusBar'
+import { useThemeContext } from '../../../context/ThemeContext'
 
 const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
 const lerp = (a: number, b: number, t: number) => a + (b - a) * t
 const easeOut = (t: number) => 1 - Math.pow(1 - t, 3)
 
 export default function ShopDetailPage() {
+  const { resolvedTheme } = useThemeContext()
   const [winHeight, setWinHeight] = useState(667)
   const [progress, setProgress] = useState(0)
+  const safe = useSafeArea()
+  // 顶部为沉浸式商品图，状态栏始终使用白字。
+  useStatusBar(resolvedTheme, { mode: 'light' })
 
   const routerParams = Taro.getCurrentInstance().router?.params
   const productId = routerParams?.id || ''
@@ -174,6 +181,7 @@ export default function ShopDetailPage() {
           <View
             className="shop-band"
             style={{
+              top: `${safe.statusBarHeight}px`,
               opacity: heroStyles.bandOpacity,
               backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.88)`,
               backdropFilter: 'blur(12px)',
@@ -251,7 +259,7 @@ export default function ShopDetailPage() {
       <View
         className="shop-back-btn"
         onTap={() => Taro.navigateBack()}
-        style={{ opacity: heroStyles.backBtnOpacity }}
+        style={{ top: `${safe.backBtnPaddingTop}px`, opacity: heroStyles.backBtnOpacity }}
       >
         <Text className="shop-back-arrow">←</Text>
       </View>