feature:基本功能

client/components/onboarding/OnboardingLayout.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar } from 'react-native';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+import { SerifText } from './SerifText';
+import { NextButton } from './NextButton';
+
+interface OnboardingLayoutProps {
+  children: React.ReactNode;
+  onSkip?: () => void;
+  onNext?: () => void;
+  nextEnabled?: boolean;
+  showNextButton?: boolean;
+}
+
+export function OnboardingLayout({ 
+  children, 
+  onSkip, 
+  onNext, 
+  nextEnabled = true,
+  showNextButton = true 
+}: OnboardingLayoutProps) {
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.header}>
+          <View style={styles.spacer} />
+          {onSkip && (
+            <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
+              <SerifText style={styles.skipText}>Skip {'->'}</SerifText>
+            </TouchableOpacity>
+          )}
+        </View>
+        
+        <View style={styles.content}>
+          {children}
+        </View>
+
+        <View style={styles.footer}>
+          {showNextButton && onNext && (
+            <NextButton onPress={onNext} disabled={!nextEnabled} />
+          )}
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: OnboardingColors.background,
+  },
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  spacer: {
+    width: 60, // Balance the skip button width approximately
+  },
+  skipButton: {
+    padding: 8,
+  },
+  skipText: {
+    fontSize: 16,
+    color: OnboardingColors.textPrimary,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  footer: {
+    alignItems: 'center',
+    paddingBottom: 40,
+    minHeight: 100, // Reserve space for button
+  },
+});