feat(ui): 为药品管理页面添加渐变背景和装饰性元素

- 在药品详情页和管理页面添加线性渐变背景
- 增加装饰性圆圈元素提升视觉效果
- 为添加按钮应用玻璃效果（当可用时）
- 简化InfoCard组件，移除玻璃效果逻辑
- 统一页面视觉风格，提升用户体验

app/medications/[medicationId].tsx

@@ -22,6 +22,7 @@ import Voice from '@react-native-voice/voice';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
@@ -571,8 +572,20 @@ export default function MedicationDetailScreen() {
 
   if (!medicationId) {
     return (
-      <View style={[styles.container, { backgroundColor: colors.pageBackgroundEmphasis }]}>
-        <HeaderBar title="药品详情" variant="minimal" />
+      <View style={styles.container}>
+        {/* 背景渐变 */}
+        <LinearGradient
+          colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+          style={styles.gradientBackground}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+        />
+
+        {/* 装饰性圆圈 */}
+        <View style={styles.decorativeCircle1} />
+        <View style={styles.decorativeCircle2} />
+
+        <HeaderBar title="药品详情" variant="minimal" transparent />
         <View style={[styles.centered, { paddingTop: insets.top + 72, paddingHorizontal: 24 }]}>
           <ThemedText style={styles.emptyTitle}>未找到药品信息</ThemedText>
           <ThemedText style={styles.emptySubtitle}>请从用药列表重新进入此页面。</ThemedText>
@@ -585,7 +598,19 @@ export default function MedicationDetailScreen() {
   const contentBottomPadding = Math.max(insets.bottom, 16) + 140;
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.pageBackgroundEmphasis}]}>
+    <View style={styles.container}>
+      {/* 背景渐变 */}
+      <LinearGradient
+        colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+        style={styles.gradientBackground}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
+
+      {/* 装饰性圆圈 */}
+      <View style={styles.decorativeCircle1} />
+      <View style={styles.decorativeCircle2} />
+
       <HeaderBar title="药品详情" variant="minimal" transparent />
       {isLoadingState ? (
         <View style={[styles.centered, { paddingTop: insets.top + 48 }]}>
@@ -1067,6 +1092,33 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'relative',
   },
+  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,
+  },
   content: {
     paddingHorizontal: 20,
     gap: 24,

app/medications/manage-medications.tsx

@@ -14,7 +14,9 @@ import {
 import type { Medication, MedicationForm } from '@/types/medication';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useMemo, useState } from 'react';
 import {
@@ -199,7 +201,19 @@ export default function ManageMedicationsScreen() {
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <View style={styles.container}>
+      {/* 背景渐变 */}
+      <LinearGradient
+        colors={['#f5e5fbff', '#edf4f4ff', '#f7f8f8ff']}
+        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()}
@@ -224,11 +238,23 @@ export default function ManageMedicationsScreen() {
             </ThemedText>
           </View>
           <TouchableOpacity
-            style={[styles.addButton, { backgroundColor: colors.primary }]}
             activeOpacity={0.85}
             onPress={() => router.push('/medications/add-medication')}
           >
-            <IconSymbol name="plus" size={20} color={colors.onPrimary} />
+            {isLiquidGlassAvailable() ? (
+              <GlassView
+                style={styles.addButton}
+                glassEffectStyle="clear"
+                tintColor="rgba(255, 255, 255, 0.3)"
+                isInteractive={true}
+              >
+                <IconSymbol name="plus" size={20} color="#333" />
+              </GlassView>
+            ) : (
+              <View style={[styles.addButton, styles.fallbackAddButton]}>
+                <IconSymbol name="plus" size={20} color="#333" />
+              </View>
+            )}
           </TouchableOpacity>
         </View>
 
@@ -301,6 +327,34 @@ export default function ManageMedicationsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    position: 'relative',
+  },
+  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,
   },
   content: {
     paddingHorizontal: 20,
@@ -325,6 +379,12 @@ const styles = StyleSheet.create({
     borderRadius: 22,
     alignItems: 'center',
     justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  fallbackAddButton: {
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
   },
   segmented: {
     flexDirection: 'row',