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

- 在药品详情页和管理页面添加线性渐变背景 - 增加装饰性圆圈元素提升视觉效果 - 为添加按钮应用玻璃效果（当可用时） - 简化InfoCard组件，移除玻璃效果逻辑 - 统一页面视觉风格，提升用户体验
2025-11-11 17:39:52 +08:00
parent f4ce3d9edf
commit 81a6e43d7c
3 changed files with 121 additions and 50 deletions
--- a/app/medications/[medicationId].tsx
+++ b/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,
--- a/app/medications/manage-medications.tsx
+++ b/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',
--- a/components/ui/InfoCard.tsx
+++ b/components/ui/InfoCard.tsx
@@ -1,6 +1,5 @@
 import type { Colors } from '@/constants/Colors';
 import { Ionicons } from '@expo/vector-icons';
-import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

@@ -11,9 +10,6 @@ export interface InfoCardProps {
  colors: (typeof Colors)[keyof typeof Colors];
  onPress?: () => void;
  clickable?: boolean;
-  glassEffectStyle?: 'clear' | 'regular';
-  tintColor?: string;
-  className?: string;
 }

 export const InfoCard: React.FC<InfoCardProps> = ({
@@ -23,26 +19,9 @@ export const InfoCard: React.FC<InfoCardProps> = ({
  colors,
  onPress,
  clickable = false,
-  glassEffectStyle = 'clear',
-  tintColor,
 }) => {
-  const isGlassAvailable = isLiquidGlassAvailable();
-
-  // 渲染图标按钮 - 只在可点击时应用 GlassView
+  // 渲染图标 - 始终使用普通 View
  const renderIcon = () => {
-    if (clickable && isGlassAvailable) {
-      return (
-        <GlassView
-          style={styles.infoCardIcon}
-          glassEffectStyle={glassEffectStyle}
-          tintColor={tintColor || 'rgba(76, 110, 245, 0.2)'}
-          isInteractive={true}
-        >
-          <Ionicons name={icon} size={16} color="#4C6EF5" />
-        </GlassView>
-      );
-    }
-    
    return (
      <View style={[
        styles.infoCardIcon,
@@ -53,25 +32,12 @@ export const InfoCard: React.FC<InfoCardProps> = ({
    );
  };

-  // 渲染箭头 - 只在可点击时显示并应用 GlassView
+  // 渲染箭头 - 只在可点击时显示
  const renderArrow = () => {
    if (!clickable) return null;

-    if (isGlassAvailable) {
-      return (
-        <GlassView
-          style={styles.infoCardArrow}
-          glassEffectStyle={glassEffectStyle}
-          tintColor={tintColor || 'rgba(255, 255, 255, 0.3)'}
-          isInteractive={true}
-        >
-          <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
-        </GlassView>
-      );
-    }
-
    return (
-      <View style={[styles.infoCardArrow, styles.arrowFallback]}>
+      <View style={styles.infoCardArrow}>
        <Ionicons name="chevron-forward" size={16} color={colors.textMuted} />
      </View>
    );
@@ -140,12 +106,6 @@ const styles = StyleSheet.create({
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
-    overflow: 'hidden', // 保证玻璃边界圆角效果
-  },
-  arrowFallback: {
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  infoCardIcon: {
    width: 28,
@@ -154,7 +114,6 @@ const styles = StyleSheet.create({
    backgroundColor: '#EEF1FF',
    alignItems: 'center',
    justifyContent: 'center',
-    overflow: 'hidden', // 保证玻璃边界圆角效果
  },
  clickableIconFallback: {
    borderWidth: 1,