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,