feat：支持身体围度数据展示

2025-09-22 10:58:23 +08:00
parent dbe460a084
commit d082c66b72
11 changed files with 581 additions and 69 deletions
--- a/components/ui/FloatingSelectionCard.tsx
+++ b/components/ui/FloatingSelectionCard.tsx
@@ -0,0 +1,122 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import React from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+interface FloatingSelectionCardProps {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export function FloatingSelectionCard({
+  visible,
+  onClose,
+  title,
+  children
+}: FloatingSelectionCardProps) {
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <BlurView intensity={20} tint="dark" style={styles.overlay}>
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+
+        <View style={styles.container}>
+          <BlurView intensity={80} tint="light" style={styles.blurContainer}>
+            <View style={styles.header}>
+              <Text style={styles.title}>{title}</Text>
+            </View>
+
+            <View style={styles.content}>
+              {children}
+            </View>
+          </BlurView>
+
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={onClose}
+            activeOpacity={0.7}
+          >
+            <View style={styles.closeButtonInner}>
+              <Ionicons name="close" size={24} color="#666" />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </BlurView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  container: {
+    alignItems: 'center',
+    marginBottom: 40,
+  },
+  blurContainer: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    minWidth: 340,
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    minHeight: 100,
+  },
+  header: {
+    paddingBottom: 20,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#636161ff',
+  },
+  content: {
+    alignItems: 'center',
+  },
+  closeButton: {
+    marginTop: 20,
+  },
+  closeButtonInner: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+});