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

- 调整药品列表页面的渐变背景颜色，移除最后一个颜色值
- 修复药品详情页面的样式数组格式问题
- 为添加药品页面添加渐变背景和装饰性圆圈元素
- 优化表单按钮的间距和样式，提升视觉层次感
- 统一背景颜色处理，增强页面一致性

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 }]}>

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',