feat: 完善个人中心与小组件功能，优化 Onboarding 交互与手势体验

2026-01-31 19:02:54 +08:00
parent c4c7d7d251
commit e675cbbbfb
49 changed files with 1536 additions and 522 deletions
--- a/client/components/onboarding/SelectionStep.tsx
+++ b/client/components/onboarding/SelectionStep.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+import { SerifText } from './SerifText';
+import SelectedIcon from '@/assets/images/icon/selected_icon.svg';
+import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
+import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
+
+const { height } = Dimensions.get('window');
+
+interface Option {
+  id: string;
+  label: string;
+}
+
+interface SelectionStepProps {
+  options: Option[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  onNext: () => void;
+}
+
+export function SelectionStep({ options, selectedIds, onToggle, onNext }: SelectionStepProps) {
+  const hasSelection = selectedIds.length > 0;
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.optionsList}>
+        {options.map((option) => {
+          const isSelected = selectedIds.includes(option.id);
+          return (
+            <TouchableOpacity
+              key={option.id}
+              style={styles.optionCard}
+              onPress={() => onToggle(option.id)}
+              activeOpacity={0.7}
+            >
+              <SerifText style={styles.optionText}>{option.label}</SerifText>
+              {isSelected && (
+                <View style={styles.iconWrapper}>
+                  <SelectedIcon width={20} height={20} />
+                </View>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+
+      {/* 底部按钮：距离底部 12% 高度 */}
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          onPress={onNext} 
+          disabled={!hasSelection}
+          activeOpacity={0.8}
+        >
+          {hasSelection ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+  },
+  optionsList: {
+    paddingBottom: 150, // 为底部按钮留出空间
+  },
+  optionCard: {
+    width: '100%',
+    height: 75,
+    backgroundColor: OnboardingColors.cardBackground,
+    borderRadius: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  optionText: {
+    fontSize: 18,
+    color: OnboardingColors.textPrimary,
+    fontWeight: '500',
+    flex: 1,
+  },
+  iconWrapper: {
+    marginLeft: 10,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  }
+});