美化login和home页面
This commit is contained in:
parent
c0a0eed3c0
commit
8741ce913e
|
|
@ -5,7 +5,6 @@ import {
|
|||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
InteractionManager,
|
||||
Image,
|
||||
Dimensions,
|
||||
} from 'react-native';
|
||||
import {useNavigation, useIsFocused} from '@react-navigation/native';
|
||||
|
|
@ -14,10 +13,9 @@ import {RootStackParamList} from '../../navigation/types';
|
|||
import {Screen} from '../../components/common/Screen';
|
||||
import {WaveBackground} from '../../components/common/WaveBackground';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
import Svg, {Path, Defs, LinearGradient as SvgLinearGradient, Stop} from 'react-native-svg';
|
||||
import {useTheme} from '../../contexts/ThemeContext';
|
||||
|
||||
const {width} = Dimensions.get('window');
|
||||
const {width, height} = Dimensions.get('window');
|
||||
|
||||
type LoginScreenNavigationProp = NativeStackNavigationProp<
|
||||
RootStackParamList,
|
||||
|
|
@ -32,7 +30,6 @@ export const LoginScreen: React.FC = () => {
|
|||
const handleLogin = useCallback(() => {
|
||||
if (!isFocused) return;
|
||||
|
||||
// 使用 InteractionManager 确保所有交互和动画完成
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
if (isFocused) {
|
||||
navigation.replace('Home');
|
||||
|
|
@ -41,107 +38,44 @@ export const LoginScreen: React.FC = () => {
|
|||
}, [navigation, isFocused]);
|
||||
|
||||
return (
|
||||
<Screen style={[styles.screen, {backgroundColor: theme.colors.background}]}>
|
||||
{/* 头部背景 */}
|
||||
<View style={styles.headerContainer}>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.primary}
|
||||
style={[StyleSheet.absoluteFill, styles.gradientBackground]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
{/* 半透明波浪效果 */}
|
||||
<View style={styles.waveOverlay}>
|
||||
<Svg height="100%" width={width} style={styles.waveSvg}>
|
||||
<Path
|
||||
d={`M0,50
|
||||
C${width * 0.2},30
|
||||
${width * 0.4},70
|
||||
${width * 0.6},50
|
||||
C${width * 0.8},30
|
||||
${width},60
|
||||
${width},50`}
|
||||
fill="none"
|
||||
stroke="rgba(255, 255, 255, 0.2)"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<Path
|
||||
d={`M0,70
|
||||
C${width * 0.2},50
|
||||
${width * 0.4},90
|
||||
${width * 0.6},70
|
||||
C${width * 0.8},50
|
||||
${width},80
|
||||
${width},70`}
|
||||
fill="none"
|
||||
stroke="rgba(255, 255, 255, 0.15)"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</Svg>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<View style={styles.headerContent}>
|
||||
<Text style={[styles.headerTitle, { color: theme.colors.background }]}>
|
||||
景旺冷冻仓
|
||||
</Text>
|
||||
<Text style={[styles.headerSubtitle, { color: theme.colors.background }]}>
|
||||
智能仓储管理系统
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 不规则曲线背景 */}
|
||||
<View style={styles.curveContainer}>
|
||||
<Svg height="120" width={width} style={styles.curve}>
|
||||
<Defs>
|
||||
<SvgLinearGradient id="contrastGradient" x1="0" y1="0" x2="1" y2="0">
|
||||
<Stop offset="0" stopColor={theme.colors.gradients.contrast[0]} />
|
||||
<Stop offset="1" stopColor={theme.colors.gradients.contrast[1]} />
|
||||
</SvgLinearGradient>
|
||||
</Defs>
|
||||
<Path
|
||||
d={`M0,120
|
||||
L0,50
|
||||
C${width * 0.3},20 ${width * 0.7},80 ${width},30
|
||||
L${width},120
|
||||
Z`}
|
||||
fill="url(#contrastGradient)"
|
||||
/>
|
||||
</Svg>
|
||||
</View>
|
||||
|
||||
{/* 主体内容 */}
|
||||
<View style={[styles.contentWrapper]}>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.contrast}
|
||||
style={StyleSheet.absoluteFill}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 0}}
|
||||
<Screen style={styles.screen}>
|
||||
{/* 背景区域 */}
|
||||
<View style={styles.backgroundContainer}>
|
||||
<WaveBackground
|
||||
height={height * 0.6}
|
||||
gradientColors={theme.colors.gradients.primary}
|
||||
/>
|
||||
<View style={styles.content}>
|
||||
{/* Logo占位 */}
|
||||
<View style={styles.logoContainer}>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.contrast}
|
||||
style={[styles.logoCircle, theme.shadow.medium]}>
|
||||
</View>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<View style={styles.contentContainer}>
|
||||
{/* 标题区域 */}
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title}>景旺冷冻仓</Text>
|
||||
<Text style={styles.subtitle}>智能仓储管理系统</Text>
|
||||
</View>
|
||||
|
||||
{/* Logo和按钮区域 */}
|
||||
<View style={styles.centerContent}>
|
||||
{/* Logo */}
|
||||
<View style={styles.logoWrapper}>
|
||||
<View style={[styles.logoCircle, theme.shadow.medium]}>
|
||||
<Text style={[styles.logoText, {color: theme.colors.primary}]}>
|
||||
JW
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 登录按钮 */}
|
||||
<TouchableOpacity
|
||||
style={[styles.loginButtonContainer, theme.shadow.medium]}
|
||||
style={[styles.loginButtonContainer, theme.shadow.small]}
|
||||
onPress={handleLogin}>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.primary}
|
||||
colors={theme.colors.gradients.button}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 0}}
|
||||
style={styles.loginButton}>
|
||||
<Text style={[styles.loginButtonText, {color: theme.colors.background}]}>
|
||||
进入系统
|
||||
</Text>
|
||||
<Text style={styles.loginButtonText}>进入系统</Text>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
|
@ -160,63 +94,65 @@ export const LoginScreen: React.FC = () => {
|
|||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
headerContainer: {
|
||||
height: 280,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
headerContent: {
|
||||
position: 'absolute',
|
||||
top: 60,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
textShadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
textShadowOffset: {width: 1, height: 1},
|
||||
textShadowRadius: 3,
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: 18,
|
||||
marginTop: 8,
|
||||
opacity: 0.9,
|
||||
},
|
||||
curveContainer: {
|
||||
position: 'absolute',
|
||||
top: 200,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1,
|
||||
},
|
||||
curve: {
|
||||
backgroundContainer: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
contentWrapper: {
|
||||
contentContainer: {
|
||||
flex: 1,
|
||||
marginTop: 160,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
titleContainer: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 40,
|
||||
marginTop: height * 0.12,
|
||||
},
|
||||
logoContainer: {
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
color: '#FFFFFF',
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 18,
|
||||
color: '#FFFFFF',
|
||||
opacity: 0.9,
|
||||
},
|
||||
centerContent: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingBottom: height * 0.1,
|
||||
},
|
||||
logoWrapper: {
|
||||
width: 90,
|
||||
height: 90,
|
||||
backgroundColor: '#F5F5F5',
|
||||
borderRadius: 45,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
logoCircle: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#FFFFFF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 1,
|
||||
},
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 1.41,
|
||||
},
|
||||
logoText: {
|
||||
fontSize: 40,
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
loginButtonContainer: {
|
||||
|
|
@ -235,25 +171,16 @@ const styles = StyleSheet.create({
|
|||
loginButtonText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
footer: {
|
||||
padding: 20,
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 12,
|
||||
},
|
||||
gradientBackground: {
|
||||
opacity: 0.95,
|
||||
},
|
||||
waveOverlay: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
opacity: 0.6,
|
||||
},
|
||||
waveSvg: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
},
|
||||
});
|
||||
|
|
@ -141,13 +141,7 @@ export const HomeScreen: React.FC = () => {
|
|||
</View>
|
||||
|
||||
{/* 主体内容 */}
|
||||
<View style={styles.mainContent}>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.contrast}
|
||||
style={StyleSheet.absoluteFill}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 0}}
|
||||
/>
|
||||
<View style={[styles.mainContent, { backgroundColor: '#FFFFFF' }]}>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
{/* 快捷操作区 */}
|
||||
<View style={styles.quickActions}>
|
||||
|
|
@ -157,16 +151,14 @@ export const HomeScreen: React.FC = () => {
|
|||
style={[styles.actionCard]}
|
||||
onPress={() => navigation.navigate(item.route)}>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.card}
|
||||
colors={theme.colors.gradients.contrast}
|
||||
style={[StyleSheet.absoluteFill, {borderRadius: 12}]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
end={{x: 1, y: 0}}
|
||||
/>
|
||||
<LinearGradient
|
||||
colors={theme.colors.gradients.primary}
|
||||
style={styles.iconGradient}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Icon name={item.icon} size={32} color={theme.colors.background} />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<Text style={[styles.actionTitle, {color: theme.colors.background}]}>
|
||||
{item.title}
|
||||
</Text>
|
||||
|
|
@ -176,7 +168,7 @@ export const HomeScreen: React.FC = () => {
|
|||
|
||||
{/* 图表区域 */}
|
||||
<View style={styles.chartSection}>
|
||||
<Text style={[styles.chartTitle, {color: theme.colors.background}]}>
|
||||
<Text style={[styles.chartTitle, {color: theme.colors.text}]}>
|
||||
库存占用情况
|
||||
</Text>
|
||||
<View style={styles.chartContainer}>
|
||||
|
|
@ -300,18 +292,21 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
actionCard: {
|
||||
width: width / 2 - 24,
|
||||
height: 120,
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
iconGradient: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
iconContainer: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
actionTitle: {
|
||||
fontSize: 16,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user