feat: add scroll top mask, unify page top spacing and docs

src/pages/userDatabase/index.tsx

@@ -14,6 +14,7 @@ import { useThemeContext } from '../../context/ThemeContext'
 import { useSafeArea } from '../../hooks/useSafeArea'
 import { useStatusBar } from '../../hooks/useStatusBar'
 import ThemedPageMeta from '../../components/ThemedPageMeta'
+import ScrollTopMask from '../../components/ScrollTopMask'
 import { assetUrl } from '../../utils/asset'
 
 export default function UserDatabasePage() {
@@ -86,7 +87,8 @@ export default function UserDatabasePage() {
     return (
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
-        <View className='udb-page udb-lock-page' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
+      <ScrollTopMask title="本地用户数据库" targetSelector=".page-header.udb-header" />
+        <View className='udb-page udb-lock-page' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
           <View className='udb-lock-card surface-card'>
             <Image className='udb-lock-icon' src={assetUrl('/icon/账号管理.png')} mode='aspectFit' />
             <Text className='udb-lock-title'>管理员验证</Text>
@@ -114,9 +116,10 @@ export default function UserDatabasePage() {
   return (
     <View className={`theme-${resolvedTheme}`}>
       <ThemedPageMeta />
+      <ScrollTopMask title="本地用户数据库" targetSelector=".page-header.udb-header" />
       <View className='udb-page'>
 
-        <View className='page-header udb-header' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
+        <View className='page-header udb-header' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
           <Text className='page-title'>本地用户数据库</Text>
         </View>