feature:基本功能

client/components/onboarding/IntentSelectionStep.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { SerifText } from './SerifText';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+
+export const INTENTS = [
+  { id: 'love', label: '爱情', icon: '❤️' },
+  { id: 'life', label: '生活', icon: '⛅' },
+  { id: 'travel', label: '旅游', icon: '🌴' },
+  { id: 'work', label: '职场', icon: '💼' },
+];
+
+interface IntentSelectionStepProps {
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+}
+
+export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionStepProps) {
+  return (
+    <View style={styles.container}>
+      <SerifText style={styles.title}>你希望得到什么帮助？</SerifText>
+      
+      <View style={styles.grid}>
+        {INTENTS.map((intent) => {
+          const isSelected = selectedIds.includes(intent.id);
+          return (
+            <TouchableOpacity
+              key={intent.id}
+              style={[
+                styles.card,
+                isSelected && styles.cardSelected
+              ]}
+              onPress={() => onToggle(intent.id)}
+              activeOpacity={0.7}
+            >
+              <SerifText style={styles.icon}>{intent.icon}</SerifText>
+              <SerifText style={[styles.label, isSelected && styles.labelSelected]}>
+                {intent.label}
+              </SerifText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 40,
+    textAlign: 'center',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 16,
+    justifyContent: 'center',
+    width: '100%',
+  },
+  card: {
+    width: '45%', // slightly less than half to accommodate gap
+    aspectRatio: 1.2,
+    backgroundColor: OnboardingColors.cardBackground,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  cardSelected: {
+    borderColor: OnboardingColors.buttonEnd, // Use pink as highlight
+    backgroundColor: '#FFFBF5',
+  },
+  icon: {
+    fontSize: 32,
+  },
+  label: {
+    fontSize: 18,
+    color: OnboardingColors.textPrimary,
+  },
+  labelSelected: {
+    fontWeight: 'bold',
+  },
+});

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
+  },
+});

client/components/onboarding/NextButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import Svg, { Path } from 'react-native-svg';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+
+interface NextButtonProps {
+  onPress: () => void;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export function NextButton({ onPress, disabled, style }: NextButtonProps) {
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled} activeOpacity={0.8} style={[styles.container, style]}>
+      <LinearGradient
+        colors={[OnboardingColors.buttonStart, OnboardingColors.buttonEnd]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={[styles.gradient, disabled && styles.disabled]}
+      >
+        <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <Path d="M5 12h14M12 5l7 7-7 7" />
+        </Svg>
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    shadowColor: OnboardingColors.buttonEnd,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  gradient: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

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
+  },
+});

client/components/onboarding/SerifText.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, TextProps, Platform, StyleSheet } from 'react-native';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+
+interface SerifTextProps extends TextProps {
+  weight?: 'regular' | 'bold';
+}
+
+export function SerifText({ style, weight = 'regular', ...otherProps }: SerifTextProps) {
+  return (
+    <Text
+      style={[
+        styles.text,
+        weight === 'bold' && styles.bold,
+        style,
+      ]}
+      {...otherProps}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontFamily: Platform.select({ ios: 'Georgia', android: 'serif', default: 'serif' }),
+    color: OnboardingColors.textPrimary,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+});