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/NameInputStep.tsx
+++ b/client/components/onboarding/NameInputStep.tsx
@@ -1,32 +1,82 @@
-import React from 'react';
-import { View, StyleSheet, TextInput, Platform } from 'react-native';
-import { SerifText } from './SerifText';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Dimensions, Text } from 'react-native';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
+import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
+import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
+import EnterLightIcon from '@/assets/images/icon/enter_Light_icon.svg';
+
+const { height } = Dimensions.get('window');

 interface NameInputStepProps {
  value: string;
  onChangeText: (text: string) => void;
-  onSubmitEditing?: () => void;
+  onNext: () => void;
 }

-export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInputStepProps) {
+export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const blinkAnim = useRef(new Animated.Value(1)).current;
+  const hasInput = value.trim().length > 0;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(blinkAnim, { toValue: 0, duration: 500, useNativeDriver: true }),
+        Animated.timing(blinkAnim, { toValue: 1, duration: 500, useNativeDriver: true }),
+      ])
+    );
+    if (isFocused) {
+      animation.start();
+    } else {
+      animation.stop();
+      blinkAnim.setValue(0);
+    }
+    return () => animation.stop();
+  }, [blinkAnim, isFocused]);
+
  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 style={styles.inputCard}>
+        <View style={styles.inputWrapper}>
+          {/* 显示层：文案 + 跟随的光标 */}
+          <View style={styles.displayLayer}>
+            <Text 
+              style={[
+                styles.displayText, 
+                (!isFocused && !hasInput) && { color: OnboardingColors.textSecondary }
+              ]}
+            >
+              {hasInput ? value : (isFocused ? "" : "Mama")}
+            </Text>
+            {isFocused && (
+              <Animated.View style={[styles.cursorWrapper, { opacity: blinkAnim, marginLeft: 2 }]}>
+                <EnterLightIcon width={3} height={27} />
+              </Animated.View>
+            )}
+          </View>
+
+          {/* 交互层：隐藏的输入框 */}
+          <TextInput
+            style={styles.hiddenInput}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            caretHidden={true}
+            autoCorrect={false}
+            spellCheck={false}
+          />
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          onPress={onNext} 
+          disabled={!hasInput}
+          activeOpacity={0.8}
+        >
+          {hasInput ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
+        </TouchableOpacity>
      </View>
    </View>
  );
@@ -34,31 +84,53 @@ export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInpu

 const styles = StyleSheet.create({
  container: {
+    flex: 1,
    alignItems: 'center',
-    width: '100%',
+    paddingTop: 20,
  },
-  title: {
-    fontSize: 24,
-    marginBottom: 40,
-    textAlign: 'center',
-  },
-  inputContainer: {
-    width: '100%',
+  inputCard: {
+    width: 335,
+    height: 75,
    backgroundColor: OnboardingColors.cardBackground,
    borderRadius: 20,
-    paddingVertical: 20,
-    paddingHorizontal: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
    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' }),
+  inputWrapper: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  displayLayer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  displayText: {
+    fontSize: 22,
+    fontFamily: Platform.select({ ios: 'STIX Two Text', android: 'serif', default: 'serif' }),
+    fontWeight: '600',
    color: OnboardingColors.textPrimary,
    textAlign: 'center',
-    padding: 0, // remove default padding
  },
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    color: 'transparent', // 文字透明，只负责输入逻辑
+    fontSize: 22,
+    textAlign: 'center',
+  },
+  cursorWrapper: {
+    // 默认居中显示时，光标在左侧
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    alignItems: 'center',
+  }
 });
--- a/client/components/onboarding/OnboardingLayout.tsx
+++ b/client/components/onboarding/OnboardingLayout.tsx
@@ -1,45 +1,61 @@
 import React from 'react';
-import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar } from 'react-native';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } 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;
+  title?: string;
+  currentStep: number;
+  totalSteps: number;
+  onSkip: () => void;
+  onBack?: () => void;
+  showBackButton?: boolean;
 }

 export function OnboardingLayout({ 
  children, 
+  title,
+  currentStep,
+  totalSteps,
  onSkip, 
-  onNext, 
-  nextEnabled = true,
-  showNextButton = true 
+  onBack,
+  showBackButton = false
 }: OnboardingLayoutProps) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeArea}>
+        {/* Header: Back & Skip */}
        <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 style={styles.headerLeft}>
+            {showBackButton && onBack && (
+              <TouchableOpacity onPress={onBack} style={styles.iconButton}>
+                <Image 
+                  source={require('@/assets/images/icon/back_icon.png')} 
+                  style={styles.backIcon}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
+            <Text style={styles.skipText}>skip</Text>
+            <Image 
+              source={require('@/assets/images/icon/skip_icon.png')} 
+              style={styles.skipIcon}
+            />
+          </TouchableOpacity>
        </View>

-        <View style={styles.footer}>
-          {showNextButton && onNext && (
-            <NextButton onPress={onNext} disabled={!nextEnabled} />
-          )}
+        {/* Title & Progress Row */}
+        <View style={styles.titleRow}>
+          <Text style={styles.questionTitle}>{title}</Text>
+          <Text style={styles.progressText}>({currentStep}/{totalSteps})</Text>
+        </View>
+        
+        {/* Content */}
+        <View style={styles.content}>
+          {children}
        </View>
      </SafeAreaView>
    </View>
@@ -58,27 +74,60 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
+    paddingHorizontal: 20,
+    height: 44,
  },
-  spacer: {
-    width: 60, // Balance the skip button width approximately
+  headerLeft: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+  },
+  iconButton: {
+    padding: 8,
+  },
+  backIcon: {
+    width: 19,
+    height: 19,
+    resizeMode: 'contain',
  },
  skipButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
    padding: 8,
  },
  skipText: {
-    fontSize: 16,
-    color: OnboardingColors.textPrimary,
+    fontSize: 13,
+    color: OnboardingColors.textMuted,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    marginRight: 4,
+  },
+  skipIcon: {
+    width: 10,
+    height: 4,
+    resizeMode: 'contain',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    paddingHorizontal: 20,
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  questionTitle: {
+    fontSize: 22,
+    color: OnboardingColors.questionTitle,
+    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    flex: 1,
+  },
+  progressText: {
+    fontSize: 18,
+    color: OnboardingColors.textProgress,
+    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    marginLeft: 10,
  },
  content: {
    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 24,
-  },
-  footer: {
-    alignItems: 'center',
-    paddingBottom: 40,
-    minHeight: 100, // Reserve space for button
+    paddingHorizontal: 20,
  },
 });
--- a/client/components/onboarding/ReminderStep.tsx
+++ b/client/components/onboarding/ReminderStep.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, Platform, Dimensions } from 'react-native';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+import AddIcon from '@/assets/images/icon/add_icon.svg';
+import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
+import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
+
+const { height } = Dimensions.get('window');
+
+interface ReminderStepProps {
+  value: number;
+  onChange: (value: number) => void;
+  onFinish: () => void;
+}
+
+export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
+  const handleReduce = () => {
+    if (value > 1) onChange(value - 1);
+  };
+
+  const handleAdd = () => {
+    if (value < 5) onChange(value + 1);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.counterContainer}>
+        <TouchableOpacity onPress={handleReduce} activeOpacity={0.7}>
+          <ReduceIcon width={47} height={47} />
+        </TouchableOpacity>
+
+        <View style={styles.numberWrapper}>
+          <Text style={styles.numberText}>{value}</Text>
+          <Text style={styles.unitText}>次</Text>
+        </View>
+
+        <TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
+          <AddIcon width={47} height={47} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
+          <BtnClicked width={87} height={57} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    paddingTop: 20,
+  },
+  counterContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    marginTop: 40,
+  },
+  numberWrapper: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginHorizontal: 40,
+  },
+  numberText: {
+    fontSize: 107,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    fontWeight: '600',
+    color: OnboardingColors.textPrimary,
+    lineHeight: 120,
+  },
+  unitText: {
+    fontSize: 17,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    fontWeight: '600',
+    color: OnboardingColors.textPrimary,
+    marginBottom: 20,
+    marginLeft: 4,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    alignItems: 'center',
+  }
+});
--- 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',
+  }
+});