feat(ui): 为药品管理页面添加渐变背景和装饰性元素
- 在药品详情页和管理页面添加线性渐变背景 - 增加装饰性圆圈元素提升视觉效果 - 为添加按钮应用玻璃效果(当可用时) - 简化InfoCard组件,移除玻璃效果逻辑 - 统一页面视觉风格,提升用户体验
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user