From 2ed3562a00b6d1da6a068da21750f791416bae71 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Tue, 11 Nov 2025 17:57:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E8=8D=AF?=
 =?UTF-8?q?=E5=93=81=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=9A=84=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E8=AE=BE=E8=AE=A1=E5=92=8C=E8=83=8C=E6=99=AF=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整药品列表页面的渐变背景颜色，移除最后一个颜色值
- 修复药品详情页面的样式数组格式问题
- 为添加药品页面添加渐变背景和装饰性圆圈元素
- 优化表单按钮的间距和样式，提升视觉层次感
- 统一背景颜色处理，增强页面一致性
---
 app/(tabs)/medications.tsx         |  2 +-
 app/medications/[medicationId].tsx |  2 +-
 app/medications/add-medication.tsx | 55 ++++++++++++++++++++++++------
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/app/(tabs)/medications.tsx b/app/(tabs)/medications.tsx
index 4b690d0..c3554f5 100644
--- a/app/(tabs)/medications.tsx
+++ b/app/(tabs)/medications.tsx
@@ -128,7 +128,7 @@ export default function MedicationsScreen() {
     <View style={styles.container}>
       {/* 背景渐变 */}
       <LinearGradient
-        colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+        colors={['#f5e5fbff', '#edf4f4ff', '#ffffff']}
         style={styles.gradientBackground}
         start={{ x: 0, y: 0 }}
         end={{ x: 0, y: 1 }}
diff --git a/app/medications/[medicationId].tsx b/app/medications/[medicationId].tsx
index 92afc12..53198ea 100644
--- a/app/medications/[medicationId].tsx
+++ b/app/medications/[medicationId].tsx
@@ -632,7 +632,7 @@ export default function MedicationDetailScreen() {
               paddingTop: insets.top + 48,
               paddingBottom: contentBottomPadding,
             },
-          ]}
+              ]}
           showsVerticalScrollIndicator={false}
         >
           <View style={[styles.heroCard, { backgroundColor: colors.surface }]}>
diff --git a/app/medications/add-medication.tsx b/app/medications/add-medication.tsx
index 8ab090f..7033d87 100644
--- a/app/medications/add-medication.tsx
+++ b/app/medications/add-medication.tsx
@@ -18,6 +18,7 @@ import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
+import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
@@ -128,7 +129,7 @@ export default function AddMedicationScreen() {
   // 获取登录验证相关的功能
   const { ensureLoggedIn } = useAuthGuard();
   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 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]);
@@ -833,7 +834,19 @@ export default function AddMedicationScreen() {
   const showDateField = currentStep === 2;
 
   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
         title="添加药物"
         onBack={() => router.back()}
@@ -857,9 +870,6 @@ export default function AddMedicationScreen() {
           <View
             style={[
               styles.formSurface,
-              {
-                backgroundColor: colors.pageBackgroundEmphasis,
-              },
             ]}
           >
             <View style={styles.stepIndicator}>
@@ -1167,6 +1177,33 @@ const styles = StyleSheet.create({
   screen: {
     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: 1,
   },
@@ -1486,15 +1523,13 @@ const styles = StyleSheet.create({
   },
   footerButtons: {
     flexDirection: 'row',
-    gap: 12,
+    gap: 48,
     alignItems: 'center',
   },
   secondaryBtn: {
     paddingVertical: 14,
     paddingHorizontal: 20,
-    borderRadius: 18,
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
+    backgroundColor: '#F2F2F2'
   },
   secondaryBtnText: {
     fontSize: 15,
@@ -1504,7 +1539,7 @@ const styles = StyleSheet.create({
   primaryBtn: {
     flex: 1,
     paddingVertical: 16,
-    borderRadius: 18,
+    borderRadius: 10,
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',