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