feat: 更新应用版本和集成腾讯云 COS 上传功能
- 将应用版本更新至 1.0.2，修改相关配置文件 - 集成腾讯云 COS 上传功能，新增相关服务和钩子 - 更新 AI 体态评估页面，支持照片上传和评估结果展示 - 添加雷达图组件以展示评估结果 - 更新样式以适应新功能的展示和交互 - 修改登录页面背景效果，提升用户体验
This commit is contained in:
richarjiang
318
app/ai-posture-result.tsx
Normal file
318
app/ai-posture-result.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { useRouter } from 'expo-router';
|
||||
import React, { useMemo } from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import Animated, { FadeInDown } from 'react-native-reanimated';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { RadarChart } from '@/components/RadarChart';
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
|
||||
type PoseView = 'front' | 'side' | 'back';
|
||||
|
||||
// 斯多特普拉提体态评估维度（示例）
|
||||
const DIMENSIONS = [
|
||||
{ key: 'head_neck', label: '头颈对齐' },
|
||||
{ key: 'shoulder', label: '肩带稳定' },
|
||||
{ key: 'ribs', label: '胸廓控制' },
|
||||
{ key: 'pelvis', label: '骨盆中立' },
|
||||
{ key: 'spine', label: '脊柱排列' },
|
||||
{ key: 'hip_knee', label: '髋膝对线' },
|
||||
];
|
||||
|
||||
type Issue = {
|
||||
title: string;
|
||||
severity: 'low' | 'medium' | 'high';
|
||||
description: string;
|
||||
suggestions: string[];
|
||||
};
|
||||
|
||||
type ViewReport = {
|
||||
score: number; // 0-5
|
||||
issues: Issue[];
|
||||
};
|
||||
|
||||
type ResultData = {
|
||||
radar: number[]; // 与 DIMENSIONS 对应，0-5
|
||||
overview: string;
|
||||
byView: Record<PoseView, ViewReport>;
|
||||
};
|
||||
|
||||
// NOTE: 此处示例数据，后续可由 API 注入
|
||||
const MOCK_RESULT: ResultData = {
|
||||
radar: [4.2, 3.6, 3.2, 4.6, 3.8, 3.4],
|
||||
overview: '整体体态较为均衡，骨盆与脊柱控制较好；肩带稳定性与胸廓控制仍有提升空间。',
|
||||
byView: {
|
||||
front: {
|
||||
score: 3.8,
|
||||
issues: [
|
||||
{
|
||||
title: '肩峰略前移，肩胛轻度外旋',
|
||||
severity: 'medium',
|
||||
description: '站立正面观察，右侧肩峰较左侧略有前移，提示肩带稳定性偏弱。',
|
||||
suggestions: ['肩胛稳定训练（如天鹅摆臂分解）', '胸椎伸展与放松', '轻度弹力带外旋激活'],
|
||||
},
|
||||
],
|
||||
},
|
||||
side: {
|
||||
score: 4.1,
|
||||
issues: [
|
||||
{
|
||||
title: '骨盆接近中立，腰椎轻度前凸',
|
||||
severity: 'low',
|
||||
description: '侧面观察，骨盆位置接近中立位，腰椎存在轻度前凸，需注意腹压与肋骨下沉。',
|
||||
suggestions: ['呼吸配合下的腹横肌激活', '猫牛流动改善胸椎灵活性'],
|
||||
},
|
||||
],
|
||||
},
|
||||
back: {
|
||||
score: 3.5,
|
||||
issues: [
|
||||
{
|
||||
title: '右侧肩胛轻度上抬',
|
||||
severity: 'medium',
|
||||
description: '背面观察，右肩胛较左侧轻度上抬，肩胛下回旋不足。',
|
||||
suggestions: ['锯前肌激活训练', '低位划船，关注肩胛下沉与后缩'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function AIPostureResultScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const router = useRouter();
|
||||
const theme = Colors.light;
|
||||
|
||||
const categories = useMemo(() => DIMENSIONS.map(d => ({ key: d.key, label: d.label })), []);
|
||||
|
||||
const ScoreBadge = ({ score }: { score: number }) => (
|
||||
<View style={styles.scoreBadge}>
|
||||
<Text style={styles.scoreText}>{score.toFixed(1)}</Text>
|
||||
<Text style={styles.scoreUnit}>/5</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const IssueItem = ({ issue }: { issue: Issue }) => (
|
||||
<View style={styles.issueItem}>
|
||||
<View style={[styles.issueDot, issue.severity === 'high' ? styles.dotHigh : issue.severity === 'medium' ? styles.dotMedium : styles.dotLow]} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.issueTitle}>{issue.title}</Text>
|
||||
<Text style={styles.issueDesc}>{issue.description}</Text>
|
||||
{!!issue.suggestions?.length && (
|
||||
<View style={styles.suggestRow}>
|
||||
{issue.suggestions.map((s, idx) => (
|
||||
<View key={idx} style={styles.suggestChip}><Text style={styles.suggestText}>{s}</Text></View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const ViewCard = ({ title, report }: { title: string; report: ViewReport }) => (
|
||||
<Animated.View entering={FadeInDown.duration(400)} style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>{title}</Text>
|
||||
<ScoreBadge score={report.score} />
|
||||
</View>
|
||||
{report.issues.map((iss, idx) => (<IssueItem key={idx} issue={iss} />))}
|
||||
</Animated.View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={[styles.screen, { backgroundColor: theme.background }]}>
|
||||
<HeaderBar title="体态评估结果" onBack={() => router.back()} tone="light" transparent />
|
||||
|
||||
{/* 背景装饰 */}
|
||||
<View style={[StyleSheet.absoluteFill, { zIndex: -1 }]} pointerEvents="none">
|
||||
<BlurView intensity={20} tint="light" style={styles.bgBlobA} />
|
||||
<BlurView intensity={20} tint="light" style={styles.bgBlobB} />
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={{ paddingBottom: insets.bottom + 40 }} showsVerticalScrollIndicator={false}>
|
||||
{/* 总览与雷达图 */}
|
||||
<Animated.View entering={FadeInDown.duration(400)} style={styles.card}>
|
||||
<Text style={styles.sectionTitle}>总体概览</Text>
|
||||
<Text style={styles.overview}>{MOCK_RESULT.overview}</Text>
|
||||
<View style={styles.radarWrap}>
|
||||
<RadarChart categories={categories} values={MOCK_RESULT.radar} />
|
||||
</View>
|
||||
</Animated.View>
|
||||
|
||||
{/* 视图分析 */}
|
||||
<ViewCard title="正面视图" report={MOCK_RESULT.byView.front} />
|
||||
<ViewCard title="侧面视图" report={MOCK_RESULT.byView.side} />
|
||||
<ViewCard title="背面视图" report={MOCK_RESULT.byView.back} />
|
||||
|
||||
{/* 底部操作 */}
|
||||
<View style={styles.actions}>
|
||||
<TouchableOpacity style={[styles.primaryBtn, { backgroundColor: theme.primary }]} onPress={() => router.replace('/(tabs)/personal')}>
|
||||
<Ionicons name="checkmark-circle" size={18} color={theme.onPrimary} />
|
||||
<Text style={[styles.primaryBtnText, { color: theme.onPrimary }]}>完成并返回</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.secondaryBtn, { borderColor: theme.border }]} onPress={() => router.push('/ai-coach-chat')}>
|
||||
<Text style={[styles.secondaryBtnText, { color: theme.text }]}>生成训练建议</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
},
|
||||
bgBlobA: {
|
||||
position: 'absolute',
|
||||
top: -60,
|
||||
right: -40,
|
||||
width: 200,
|
||||
height: 200,
|
||||
borderRadius: 100,
|
||||
backgroundColor: 'rgba(187,242,70,0.18)',
|
||||
},
|
||||
bgBlobB: {
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
left: -30,
|
||||
width: 180,
|
||||
height: 180,
|
||||
borderRadius: 90,
|
||||
backgroundColor: 'rgba(89, 198, 255, 0.16)',
|
||||
},
|
||||
card: {
|
||||
marginTop: 16,
|
||||
marginHorizontal: 16,
|
||||
borderRadius: 16,
|
||||
padding: 14,
|
||||
backgroundColor: 'rgba(255,255,255,0.72)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(25,33,38,0.08)',
|
||||
},
|
||||
sectionTitle: {
|
||||
color: '#192126',
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
marginBottom: 8,
|
||||
},
|
||||
overview: {
|
||||
color: '#384046',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
radarWrap: {
|
||||
marginTop: 10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 8,
|
||||
},
|
||||
cardTitle: {
|
||||
color: '#192126',
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
},
|
||||
scoreBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(187,242,70,0.16)',
|
||||
},
|
||||
scoreText: {
|
||||
color: '#192126',
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
scoreUnit: {
|
||||
color: '#5E6468',
|
||||
fontSize: 12,
|
||||
marginLeft: 4,
|
||||
},
|
||||
issueItem: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
issueDot: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
marginTop: 6,
|
||||
},
|
||||
dotHigh: { backgroundColor: '#E24D4D' },
|
||||
dotMedium: { backgroundColor: '#F0C23C' },
|
||||
dotLow: { backgroundColor: '#2BCC7F' },
|
||||
issueTitle: {
|
||||
color: '#192126',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
issueDesc: {
|
||||
color: '#5E6468',
|
||||
fontSize: 13,
|
||||
marginTop: 4,
|
||||
},
|
||||
suggestRow: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 8,
|
||||
marginTop: 8,
|
||||
},
|
||||
suggestChip: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(25,33,38,0.04)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(25,33,38,0.08)',
|
||||
},
|
||||
suggestText: {
|
||||
color: '#192126',
|
||||
fontSize: 12,
|
||||
},
|
||||
actions: {
|
||||
marginTop: 16,
|
||||
paddingHorizontal: 16,
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
},
|
||||
primaryBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
height: 48,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 14,
|
||||
},
|
||||
primaryBtnText: {
|
||||
color: '#192126',
|
||||
fontSize: 15,
|
||||
fontWeight: '800',
|
||||
},
|
||||
secondaryBtn: {
|
||||
flex: 1,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
secondaryBtnText: {
|
||||
color: '#384046',
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user