状态栏修复更新

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

src/pages/designList/index.tsx

@@ -5,6 +5,8 @@ import './index.scss'
 import { getDesignList, removeDesigns, type DesignItem } from '../../utils/store'
 import { PRODUCT_ICON_MAP } from '../../utils/productConfig'
 import { useThemeContext } from '../../context/ThemeContext'
+import { useSafeArea } from '../../hooks/useSafeArea'
+import { useStatusBar } from '../../hooks/useStatusBar'
 import LoginGuard from '../../components/LoginGuard'
 
 const STATUS_TABS = [
@@ -23,6 +25,8 @@ const STATUS_STYLE: Record<string, { label: string; cls: string }> = {
 
 export default function DesignListPage() {
   const { resolvedTheme } = useThemeContext()
+  const safe = useSafeArea()
+  useStatusBar(resolvedTheme)
   const [activeTab, setActiveTab] = useState('all')
   const [list, setList] = useState<DesignItem[]>([])
   const [managing, setManaging] = useState(false)
@@ -113,7 +117,7 @@ export default function DesignListPage() {
     <View className={`theme-${resolvedTheme}`}>
       <LoginGuard>
         <View className='design-page'>
-          <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>