状态栏修复更新

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

src/pages/index/index.tsx

@@ -4,6 +4,8 @@ import { useState } from 'react'
 import './index.scss'
 import { CATEGORIES } from '../../utils/productConfig'
 import { useThemeContext } from '../../context/ThemeContext'
+import { useSafeArea } from '../../hooks/useSafeArea'
+import { useStatusBar } from '../../hooks/useStatusBar'
 
 // 成品展示配图（从 img 里取对应实物图）
 const SHOWCASE_LIST = [
@@ -26,6 +28,8 @@ const PRODUCT_IMG_MAP: Record<string, string> = {
 
 export default function Index() {
   const { theme, resolvedTheme } = useThemeContext()
+  const safe = useSafeArea()
+  useStatusBar(resolvedTheme)
   const [searchKey, setSearchKey] = useState('')
 
   const navigateToProduct = (categoryId: string) => {
@@ -47,7 +51,7 @@ export default function Index() {
       <View className='index-page'>
 
         {/* 顶部标题栏 */}
-        <View className='header-bar'>
+        <View className='header-bar' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
           <Text className='header-title'>智绘微刻</Text>
         </View>