feat: 全站视觉焕新与悬浮玻璃 TabBar 迁移

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 BottomActionBar from '../../components/BottomActionBar'
 
 export default function DIYPage() {
   const { theme, resolvedTheme } = useThemeContext()
@@ -275,11 +276,11 @@ export default function DIYPage() {
       <ThemedPageMeta />
       <View className='diy-page'>
 
-        <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
+        <View className='page-header surface-card mt-20' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={goBack}>←</Text>
             <Text className='page-title'>设计工作台</Text>
-            <View style={{ width: '60px' }} />
+            <View className='header-spacer' />
           </View>
         </View>
 
@@ -358,14 +359,14 @@ export default function DIYPage() {
         </View>
 
         {/* 底部操作按钮 */}
-        <View className='action-bar'>
+        <BottomActionBar>
           <View className='btn-primary' onTap={() => setPreviewMode(true)}>
             <Text>预览效果</Text>
           </View>
           <View className='btn-secondary' onTap={addSticker}>
             <Text>添加贴纸</Text>
           </View>
-        </View>
+        </BottomActionBar>
 
         {/* 预览弹层 */}
         {previewMode && (