feat(ui): 统一应用主题色为天空蓝并优化渐变背景
将应用主色调从 '#BBF246' 更改为 '#87CEEB'(天空蓝),并更新所有相关组件和页面中的颜色引用。同时为多个页面添加统一的渐变背景,提升视觉效果和用户体验。新增压力分析模态框组件,并优化压力计组件的交互与显示逻辑。更新应用图标和启动图资源。
This commit is contained in:
@@ -17,7 +17,7 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
View
|
||||
} from 'react-native';
|
||||
import Markdown from 'react-native-markdown-display';
|
||||
import Animated, { FadeInDown, FadeInUp, Layout } from 'react-native-reanimated';
|
||||
@@ -32,6 +32,7 @@ import { deleteConversation, getConversationDetail, listConversations, type AiCo
|
||||
import { loadAiCoachSessionCache, saveAiCoachSessionCache } from '@/services/aiCoachSession';
|
||||
import { api, getAuthToken, postTextStream } from '@/services/api';
|
||||
import dayjs from 'dayjs';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { ActionSheet } from '../../components/ui/ActionSheet';
|
||||
|
||||
type Role = 'user' | 'assistant';
|
||||
@@ -1121,7 +1122,7 @@ export default function CoachScreen() {
|
||||
style={[
|
||||
styles.bubble,
|
||||
{
|
||||
backgroundColor: isUser ? theme.primary : 'rgba(187,242,70,0.16)',
|
||||
backgroundColor: theme.card, // 16% opacity
|
||||
borderTopLeftRadius: isUser ? 16 : 6,
|
||||
borderTopRightRadius: isUser ? 6 : 16,
|
||||
maxWidth: isUser ? '82%' : '90%',
|
||||
@@ -1347,7 +1348,7 @@ export default function CoachScreen() {
|
||||
</View>
|
||||
)}
|
||||
{isSelected && isPending && (
|
||||
<ActivityIndicator size="small" color="#2D5016" />
|
||||
<ActivityIndicator size="small" color={Colors.light.accentGreenDark} />
|
||||
)}
|
||||
{isSelected && !isPending && (
|
||||
<View style={styles.selectedBadge}>
|
||||
@@ -1594,7 +1595,13 @@ export default function CoachScreen() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.screen, { backgroundColor: theme.background }]}>
|
||||
<View style={styles.screen}>
|
||||
<LinearGradient
|
||||
colors={[theme.backgroundGradientStart, theme.backgroundGradientEnd]}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
/>
|
||||
{/* 顶部标题区域,显示教练名称、新建会话和历史按钮 */}
|
||||
<View
|
||||
style={[styles.header, { paddingTop: insets.top + 10 }]}
|
||||
@@ -1608,14 +1615,14 @@ export default function CoachScreen() {
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={startNewConversation}
|
||||
style={[styles.headerActionButton, { backgroundColor: 'rgba(187,242,70,0.2)' }]}
|
||||
style={[styles.headerActionButton, { backgroundColor: `${Colors.light.accentGreen}33` }]} // 20% opacity
|
||||
>
|
||||
<Ionicons name="add-outline" size={18} color={theme.onPrimary} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={openHistory}
|
||||
style={[styles.headerActionButton, { backgroundColor: 'rgba(187,242,70,0.2)' }]}
|
||||
style={[styles.headerActionButton, { backgroundColor: `${Colors.light.accentGreen}33` }]} // 20% opacity
|
||||
>
|
||||
<Ionicons name="time-outline" size={18} color={theme.onPrimary} />
|
||||
</TouchableOpacity>
|
||||
@@ -1680,7 +1687,7 @@ export default function CoachScreen() {
|
||||
contentContainerStyle={{ paddingHorizontal: 6, gap: 8 }}
|
||||
>
|
||||
{chips.map((c) => (
|
||||
<TouchableOpacity key={c.key} style={[styles.chip, { borderColor: 'rgba(187,242,70,0.35)', backgroundColor: 'rgba(187,242,70,0.12)' }]} onPress={c.action}>
|
||||
<TouchableOpacity key={c.key} style={[styles.chip, { borderColor: `${Colors.light.accentGreen}59`, backgroundColor: `${Colors.light.accentGreen}1F` }]} onPress={c.action}>
|
||||
<Text style={[styles.chipText, { color: '#192126' }]}>{c.label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
@@ -1722,11 +1729,11 @@ export default function CoachScreen() {
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
<View style={[styles.inputRow, { borderColor: 'rgba(187,242,70,0.35)', backgroundColor: 'rgba(187,242,70,0.08)' }]}>
|
||||
<View style={[styles.inputRow, { borderColor: `${Colors.light.accentGreen}59`, backgroundColor: `${Colors.light.accentGreen}14` }]}>
|
||||
<TouchableOpacity
|
||||
accessibilityRole="button"
|
||||
onPress={pickImages}
|
||||
style={[styles.mediaBtn, { backgroundColor: 'rgba(187,242,70,0.16)' }]}
|
||||
style={[styles.mediaBtn, { backgroundColor: `${Colors.light.accentGreen}28` }]}
|
||||
>
|
||||
<Ionicons name="image-outline" size={18} color={'#192126'} />
|
||||
</TouchableOpacity>
|
||||
@@ -1936,7 +1943,7 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(187,242,70,0.6)'
|
||||
backgroundColor: `${Colors.light.accentGreen}99` // 60% opacity
|
||||
},
|
||||
dietOptionsContainer: {
|
||||
gap: 8,
|
||||
@@ -1948,13 +1955,13 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(187,242,70,0.3)',
|
||||
borderColor: `${Colors.light.accentGreen}4D`, // 30% opacity
|
||||
},
|
||||
dietOptionIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(187,242,70,0.2)',
|
||||
backgroundColor: `${Colors.light.accentGreen}33`, // 20% opacity
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
@@ -2003,7 +2010,7 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(187,242,70,0.6)',
|
||||
backgroundColor: `${Colors.light.accentGreen}99`, // 60% opacity
|
||||
alignSelf: 'flex-end',
|
||||
},
|
||||
// markdown 基础样式承载容器的字体尺寸保持与气泡一致
|
||||
@@ -2316,17 +2323,17 @@ const styles = StyleSheet.create({
|
||||
choiceButton: {
|
||||
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(187,242,70,0.3)',
|
||||
borderColor: `${Colors.light.accentGreen}4D`, // 30% opacity
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
},
|
||||
choiceButtonRecommended: {
|
||||
borderColor: 'rgba(187,242,70,0.6)',
|
||||
backgroundColor: 'rgba(187,242,70,0.1)',
|
||||
borderColor: `${Colors.light.accentGreen}99`, // 60% opacity
|
||||
backgroundColor: `${Colors.light.accentGreen}1A`, // 10% opacity
|
||||
},
|
||||
choiceButtonSelected: {
|
||||
borderColor: '#2D5016',
|
||||
backgroundColor: 'rgba(187,242,70,0.2)',
|
||||
borderColor: Colors.light.accentGreenDark,
|
||||
backgroundColor: `${Colors.light.accentGreen}33`, // 20% opacity
|
||||
borderWidth: 2,
|
||||
},
|
||||
choiceButtonDisabled: {
|
||||
@@ -2346,10 +2353,10 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
},
|
||||
choiceLabelRecommended: {
|
||||
color: '#2D5016',
|
||||
color: Colors.light.accentGreenDark,
|
||||
},
|
||||
choiceLabelSelected: {
|
||||
color: '#2D5016',
|
||||
color: Colors.light.accentGreenDark,
|
||||
fontWeight: '700',
|
||||
},
|
||||
choiceLabelDisabled: {
|
||||
@@ -2361,7 +2368,7 @@ const styles = StyleSheet.create({
|
||||
gap: 8,
|
||||
},
|
||||
recommendedBadge: {
|
||||
backgroundColor: 'rgba(187,242,70,0.8)',
|
||||
backgroundColor: `${Colors.light.accentGreen}CC`, // 80% opacity
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
@@ -2369,10 +2376,10 @@ const styles = StyleSheet.create({
|
||||
recommendedText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: '#2D5016',
|
||||
color: Colors.light.accentGreenDark,
|
||||
},
|
||||
selectedBadge: {
|
||||
backgroundColor: '#2D5016',
|
||||
backgroundColor: Colors.light.accentGreenDark,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
@@ -2405,6 +2412,13 @@ const styles = StyleSheet.create({
|
||||
fontWeight: '600',
|
||||
color: '#FF4444',
|
||||
},
|
||||
gradientBackground: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const markdownStyles = {
|
||||
|
||||
Reference in New Issue
Block a user