初步实现选择运动

app/(tabs)/index.tsx

@@ -152,6 +152,7 @@ export default function HomeScreen() {
           id: s.id,
           label: s.name,
           value: s.id,
+          icon: s.icon, // 添加图标
         }))}
         selectedValue={selectedSportId}
         onSelect={setSelectedSportId}

components/selection-modal.tsx

@@ -1,4 +1,5 @@
 import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import React from "react";
@@ -9,8 +10,47 @@ interface SelectionOption {
   id: number | string;
   label: string;
   value: any;
+  icon?: string; // 图标名称
 }
 
+// 运动名称到图标的映射
+const getSportIcon = (label: string, icon?: string): string => {
+  // 如果提供了 icon 字段，尝试直接使用
+  if (icon) {
+    // 如果 icon 已经是 Ionicons 格式，直接返回
+    if (icon.includes("-")) {
+      return icon;
+    }
+  }
+
+  // 根据运动名称映射图标
+  const labelLower = label.toLowerCase();
+  if (labelLower.includes("足球") || labelLower.includes("football") || labelLower.includes("soccer")) {
+    return "football-outline";
+  }
+  if (labelLower.includes("篮球") || labelLower.includes("basketball")) {
+    return "basketball-outline";
+  }
+  if (labelLower.includes("板球") || labelLower.includes("cricket")) {
+    return "baseball-outline";
+  }
+  if (labelLower.includes("网球") || labelLower.includes("tennis")) {
+    return "tennisball-outline";
+  }
+  if (labelLower.includes("棒球") || labelLower.includes("baseball")) {
+    return "baseball-outline";
+  }
+  if (labelLower.includes("羽毛球") || labelLower.includes("badminton")) {
+    return "ellipse-outline";
+  }
+  if (labelLower.includes("斯诺克") || labelLower.includes("snooker")) {
+    return "radio-button-on-outline";
+  }
+  
+  // 默认图标
+  return "ellipse-outline";
+};
+
 interface SelectionModalProps {
   visible: boolean;
   onClose: () => void;
@@ -47,37 +87,71 @@ export function SelectionModal({
       <View style={[styles.sheet, { backgroundColor: bg }]}>
         <SafeAreaView edges={["bottom"]}>
           <View style={styles.header}>
-            <ThemedText type="subtitle">{title}</ThemedText>
-            <Pressable onPress={onClose}>
-              <ThemedText style={{ color: Colors[theme].tint }}>
-                Done
-              </ThemedText>
+            <ThemedText type="subtitle" style={styles.title}>
+              {title}
+            </ThemedText>
+            <Pressable onPress={onClose} style={styles.closeButton}>
+              <IconSymbol name="close" size={24} color={text} />
             </Pressable>
           </View>
-          <ScrollView style={{ maxHeight: 300 }}>
-            {options.map((opt) => (
-              <Pressable
-                key={opt.id}
-                style={[
-                  styles.option,
-                  selectedValue === opt.value && {
-                    backgroundColor: isDark ? "#333" : "#F0F0F0",
-                  },
-                ]}
-                onPress={() => {
-                  onSelect(opt.value);
-                  onClose();
-                }}
-              >
-                <ThemedText
-                  style={{
-                    fontWeight: selectedValue === opt.value ? "bold" : "normal",
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+            {options.map((opt) => {
+              const isSelected = selectedValue === opt.value;
+              const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
+              const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
+
+              return (
+                <Pressable
+                  key={opt.id}
+                  style={[
+                    styles.option,
+                    { backgroundColor: optionBg },
+                  ]}
+                  onPress={() => {
+                    onSelect(opt.value);
+                    onClose();
                   }}
                 >
-                  {opt.label}
-                </ThemedText>
-              </Pressable>
-            ))}
+                  {/* 左侧图标 */}
+                  <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
+                    <IconSymbol
+                      name={getSportIcon(opt.label, opt.icon) as any}
+                      size={24}
+                      color={isSelected ? Colors.light.tint : text}
+                    />
+                  </View>
+
+                  {/* 中间内容 */}
+                  <View style={styles.content}>
+                    <ThemedText
+                      style={[
+                        styles.optionLabel,
+                        { fontWeight: isSelected ? "600" : "400" },
+                      ]}
+                    >
+                      {opt.label}
+                    </ThemedText>
+                    <ThemedText style={styles.statusText}>
+                      {isSelected ? "已选择" : "点击切换"}
+                    </ThemedText>
+                  </View>
+
+                  {/* 右侧指示点 */}
+                  <View
+                    style={[
+                      styles.indicator,
+                      {
+                        backgroundColor: isSelected
+                          ? Colors.light.tint
+                          : isDark
+                            ? "#666666"
+                            : "#CCCCCC",
+                      },
+                    ]}
+                  />
+                </Pressable>
+              );
+            })}
           </ScrollView>
         </SafeAreaView>
       </View>
@@ -91,21 +165,67 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(0,0,0,0.5)",
   },
   sheet: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    padding: 16,
-    maxHeight: "60%",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    maxHeight: "70%",
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 16,
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  scrollView: {
+    maxHeight: 400,
   },
   option: {
+    flexDirection: "row",
+    alignItems: "center",
     paddingVertical: 16,
-    paddingHorizontal: 12,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#ccc",
+    paddingHorizontal: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  iconPlaceholder: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#999",
+  },
+  content: {
+    flex: 1,
+  },
+  optionLabel: {
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  statusText: {
+    fontSize: 12,
+    opacity: 0.6,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 12,
   },
 });