状态栏修复更新

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

src/pages/diy/index.tsx

@@ -5,9 +5,13 @@ import './index.scss'
 import { getProductById } from '../../utils/productConfig'
 import { getDesignList, setDesignList, updateDesign, type DesignItem, type StickerItem } from '../../utils/store'
 import { useThemeContext } from '../../context/ThemeContext'
+import { useSafeArea } from '../../hooks/useSafeArea'
+import { useStatusBar } from '../../hooks/useStatusBar'
 
 export default function DIYPage() {
   const { theme, resolvedTheme } = useThemeContext()
+  const safe = useSafeArea()
+  useStatusBar(resolvedTheme)
   const [category, setCategory] = useState<any>(null)
   const [step, setStep] = useState(1)
   const [designId, setDesignId] = useState('')
@@ -264,7 +268,7 @@ export default function DIYPage() {
     <View className={`theme-${resolvedTheme}`}>
       <View className='diy-page'>
 
-        <View className='page-header dashed-card mt-20'>
+        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
           <View className='star-badge' />
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={goBack}>←</Text>