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

src/pages/diy/index.tsx

@@ -8,6 +8,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 BottomActionBar from '../../components/BottomActionBar'
 
 export default function DIYPage() {
@@ -264,6 +265,7 @@ export default function DIYPage() {
     return (
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
+      <ScrollTopMask title="设计工作台" targetSelector=".page-header.surface-card" showBack />
         <View className='diy-page'>
           <Text className='page-title'>加载中...</Text>
         </View>
@@ -274,9 +276,10 @@ export default function DIYPage() {
   return (
     <View className={`theme-${resolvedTheme}`}>
       <ThemedPageMeta />
+      <ScrollTopMask title="设计工作台" targetSelector=".page-header.surface-card" showBack />
       <View className='diy-page'>
 
-        <View className='page-header surface-card mt-20' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
+        <View className='page-header surface-card mt-20' style={{ paddingTop: `${safe.statusBarHeight + 12}px` }}>
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={goBack}>←</Text>
             <Text className='page-title'>设计工作台</Text>