feature:基本功能

client/components/onboarding/NameInputStep.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, StyleSheet, TextInput, Platform } from 'react-native';
+import { SerifText } from './SerifText';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+
+interface NameInputStepProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onSubmitEditing?: () => void;
+}
+
+export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInputStepProps) {
+  return (
+    <View style={styles.container}>
+      <SerifText style={styles.title}>我可以怎么称呼你？</SerifText>
+      
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder="Hao"
+          placeholderTextColor={OnboardingColors.textSecondary}
+          selectionColor={OnboardingColors.cursor}
+          autoFocus
+          onSubmitEditing={onSubmitEditing}
+          returnKeyType="done"
+          textAlign="center"
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 40,
+    textAlign: 'center',
+  },
+  inputContainer: {
+    width: '100%',
+    backgroundColor: OnboardingColors.cardBackground,
+    borderRadius: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  input: {
+    fontSize: 24,
+    fontFamily: Platform.select({ ios: 'Georgia', android: 'serif', default: 'serif' }),
+    color: OnboardingColors.textPrimary,
+    textAlign: 'center',
+    padding: 0, // remove default padding
+  },
+});