4836058d56
新增手腕温度健康数据追踪，支持Apple Watch睡眠手腕温度数据展示和30天历史趋势分析 实现经期数据与HealthKit的完整双向同步，支持读取、写入和删除经期记录 优化经期预测算法，基于历史数据计算更准确的周期和排卵日预测 重构经期UI组件为模块化结构，提升代码可维护性 添加完整的中英文国际化支持，覆盖所有新增功能界面
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { STATUS_COLORS } from './constants';
|
|
import { LegendItem } from './types';
|
|
|
|
const LEGEND_ITEMS: LegendItem[] = [
|
|
{ label: '经期', key: 'period' },
|
|
{ label: '预测经期', key: 'predicted-period' },
|
|
{ label: '排卵期', key: 'fertile' },
|
|
{ label: '排卵日', key: 'ovulation-day' },
|
|
];
|
|
|
|
export const Legend: React.FC = () => {
|
|
return (
|
|
<View style={styles.legendRow}>
|
|
{LEGEND_ITEMS.map((item) => (
|
|
<View key={item.key} style={styles.legendItem}>
|
|
<View
|
|
style={[
|
|
styles.legendDot,
|
|
{ backgroundColor: STATUS_COLORS[item.key].bg },
|
|
item.key === 'ovulation-day' && styles.legendDotRing,
|
|
]}
|
|
/>
|
|
<Text style={styles.legendLabel}>{item.label}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
legendRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 12,
|
|
marginBottom: 12,
|
|
paddingHorizontal: 4,
|
|
},
|
|
legendItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
legendDot: {
|
|
width: 16,
|
|
height: 16,
|
|
borderRadius: 8,
|
|
marginRight: 6,
|
|
},
|
|
legendDotRing: {
|
|
borderWidth: 2,
|
|
borderColor: '#fff',
|
|
},
|
|
legendLabel: {
|
|
fontSize: 13,
|
|
color: '#111827',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
});
|