feat(ui): 优化药品管理页面的视觉设计和背景效果

- 调整药品列表页面的渐变背景颜色,移除最后一个颜色值
- 修复药品详情页面的样式数组格式问题
- 为添加药品页面添加渐变背景和装饰性圆圈元素
- 优化表单按钮的间距和样式,提升视觉层次感
- 统一背景颜色处理,增强页面一致性
This commit is contained in:
richarjiang
2025-11-11 17:57:36 +08:00
parent 81a6e43d7c
commit 2ed3562a00
3 changed files with 47 additions and 12 deletions

View File

@@ -128,7 +128,7 @@ export default function MedicationsScreen() {
<View style={styles.container}> <View style={styles.container}>
{/* 背景渐变 */} {/* 背景渐变 */}
<LinearGradient <LinearGradient
colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']} colors={['#f5e5fbff', '#edf4f4ff', '#ffffff']}
style={styles.gradientBackground} style={styles.gradientBackground}
start={{ x: 0, y: 0 }} start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }} end={{ x: 0, y: 1 }}

View File

@@ -632,7 +632,7 @@ export default function MedicationDetailScreen() {
paddingTop: insets.top + 48, paddingTop: insets.top + 48,
paddingBottom: contentBottomPadding, paddingBottom: contentBottomPadding,
}, },
]} ]}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
> >
<View style={[styles.heroCard, { backgroundColor: colors.surface }]}> <View style={[styles.heroCard, { backgroundColor: colors.surface }]}>

View File

@@ -18,6 +18,7 @@ import dayjs from 'dayjs';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect'; import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { Image } from 'expo-image'; import { Image } from 'expo-image';
import * as ImagePicker from 'expo-image-picker'; import * as ImagePicker from 'expo-image-picker';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router'; import { router } from 'expo-router';
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { import {
@@ -128,7 +129,7 @@ export default function AddMedicationScreen() {
// 获取登录验证相关的功能 // 获取登录验证相关的功能
const { ensureLoggedIn } = useAuthGuard(); const { ensureLoggedIn } = useAuthGuard();
const softBorderColor = useMemo(() => withAlpha(colors.border, 0.45), [colors.border]); const softBorderColor = useMemo(() => withAlpha(colors.border, 0.45), [colors.border]);
const fadedBorderFill = useMemo(() => withAlpha(colors.border, 0.2), [colors.border]); const fadedBorderFill = useMemo(() => withAlpha('#ffffff', 1), [colors.border]);
const glassPrimaryTint = useMemo(() => withAlpha(colors.primary, theme === 'dark' ? 0.55 : 0.45), [colors.primary, theme]); const glassPrimaryTint = useMemo(() => withAlpha(colors.primary, theme === 'dark' ? 0.55 : 0.45), [colors.primary, theme]);
const glassDisabledTint = useMemo(() => withAlpha(colors.border, theme === 'dark' ? 0.45 : 0.6), [colors.border, theme]); const glassDisabledTint = useMemo(() => withAlpha(colors.border, theme === 'dark' ? 0.45 : 0.6), [colors.border, theme]);
const glassPrimaryBackground = useMemo(() => withAlpha(colors.primary, theme === 'dark' ? 0.35 : 0.7), [colors.primary, theme]); const glassPrimaryBackground = useMemo(() => withAlpha(colors.primary, theme === 'dark' ? 0.35 : 0.7), [colors.primary, theme]);
@@ -833,7 +834,19 @@ export default function AddMedicationScreen() {
const showDateField = currentStep === 2; const showDateField = currentStep === 2;
return ( return (
<View style={[styles.screen, { backgroundColor: colors.background }]}> <View style={styles.screen}>
{/* 背景渐变 */}
<LinearGradient
colors={['#f5e5fbff','#ffffff']}
style={styles.gradientBackground}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
/>
{/* 装饰性圆圈 */}
<View style={styles.decorativeCircle1} />
<View style={styles.decorativeCircle2} />
<HeaderBar <HeaderBar
title="添加药物" title="添加药物"
onBack={() => router.back()} onBack={() => router.back()}
@@ -857,9 +870,6 @@ export default function AddMedicationScreen() {
<View <View
style={[ style={[
styles.formSurface, styles.formSurface,
{
backgroundColor: colors.pageBackgroundEmphasis,
},
]} ]}
> >
<View style={styles.stepIndicator}> <View style={styles.stepIndicator}>
@@ -1167,6 +1177,33 @@ const styles = StyleSheet.create({
screen: { screen: {
flex: 1, flex: 1,
}, },
gradientBackground: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
decorativeCircle1: {
position: 'absolute',
top: 40,
right: 20,
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: '#0EA5E9',
opacity: 0.1,
},
decorativeCircle2: {
position: 'absolute',
bottom: -15,
left: -15,
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: '#0EA5E9',
opacity: 0.05,
},
flex: { flex: {
flex: 1, flex: 1,
}, },
@@ -1486,15 +1523,13 @@ const styles = StyleSheet.create({
}, },
footerButtons: { footerButtons: {
flexDirection: 'row', flexDirection: 'row',
gap: 12, gap: 48,
alignItems: 'center', alignItems: 'center',
}, },
secondaryBtn: { secondaryBtn: {
paddingVertical: 14, paddingVertical: 14,
paddingHorizontal: 20, paddingHorizontal: 20,
borderRadius: 18, backgroundColor: '#F2F2F2'
borderWidth: 1,
borderColor: '#E2E8F0',
}, },
secondaryBtnText: { secondaryBtnText: {
fontSize: 15, fontSize: 15,
@@ -1504,7 +1539,7 @@ const styles = StyleSheet.create({
primaryBtn: { primaryBtn: {
flex: 1, flex: 1,
paddingVertical: 16, paddingVertical: 16,
borderRadius: 18, borderRadius: 10,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
overflow: 'hidden', overflow: 'hidden',