richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新教练页面和布局，优化用户体验

Browse Source 
- 将教练页面中的“Bot”名称更改为“Seal”，提升品牌一致性
- 在布局文件中调整标签标题和图标，确保与新名称一致
- 新增使用次数显示功能，优化用户对使用情况的了解
- 更新日期选择器样式，增强未来日期的禁用效果
- 优化压力分析模态框的颜色和文本，提升可读性
This commit is contained in:
richarjiang
2025-08-21 10:29:12 +08:00
parent 78620f18ee
commit b396a7d101
8 changed files with 108 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/StressAnalysisModal.tsx
View File

@@ -56,7 +56,7 @@ export function StressAnalysisModal({ visible, onClose, hrvValue, updateTime }:
<View style={styles.chartContainer}>
<View style={styles.colorBar}>
<LinearGradient
colors={['#10B981', '#3B82F6', '#F59E0B']}
colors={['#F59E0B', '#3B82F6', '#10B981']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.gradientBar}
@@ -64,16 +64,16 @@ export function StressAnalysisModal({ visible, onClose, hrvValue, updateTime }:
</View>
<View style={styles.legend}>
<View style={styles.legendItem}>
<View style={[styles.legendDot, { backgroundColor: '#10B981' }]} />
<Text style={styles.legendText}>好事发生</Text>
<View style={[styles.legendDot, { backgroundColor: '#F59E0B' }]} />
<Text style={styles.legendText}>鸭梨山大</Text>
</View>
<View style={styles.legendItem}>
<View style={[styles.legendDot, { backgroundColor: '#3B82F6' }]} />
<Text style={styles.legendText}>活力满满</Text>
</View>
<View style={styles.legendItem}>
<View style={[styles.legendDot, { backgroundColor: '#F59E0B' }]} />
<Text style={styles.legendText}>鸭梨山大</Text>
<View style={[styles.legendDot, { backgroundColor: '#10B981' }]} />
<Text style={styles.legendText}>好事发生</Text>
</View>
</View>
</View>

12
components/StressMeter.tsx
View File

@@ -1,4 +1,3 @@
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
@@ -19,9 +18,9 @@ export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterP
const getStressStatus = () => {
if (value === null) {
return '未知';
} else if (value <= 30) {
} else if (value >= 70) {
return '放松';
} else if (value <= 70) {
} else if (value >= 30) {
return '正常';
} else {
return '紧张';
@@ -46,7 +45,7 @@ export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterP
};
// 计算进度条位置（0-100%）
// 压力指数越高，进度条越满
// 压力指数越高，进度条越满（红色区域越多）
const progressPercentage = value !== null ? Math.max(0, Math.min(100, value)) : 0;
// 在组件内部添加状态
@@ -67,9 +66,6 @@ export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterP
{/* 头部区域 */}
<View style={styles.header}>
<View style={styles.leftSection}>
<View style={styles.iconContainer}>
<Ionicons name="heart" size={16} color="red" />
</View>
<Text style={styles.title}>压力</Text>
</View>
<Text style={styles.emoji}>{getStatusEmoji()}</Text>
@@ -87,7 +83,7 @@ export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterP
{/* 渐变背景进度条 */}
<View style={[styles.progressBar, { width: '100%' }]}>
<LinearGradient
colors={['#10B981', '#FCD34D', '#F97316']}
colors={['#10B981', '#FCD34D', '#EF4444']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.gradientBar}