feat(Theme): enhance theming and UI consistency across components
- Updated app.json to set userInterfaceStyle to automatic for improved theme adaptability. - Refactored layout components to utilize useAppColors for dynamic theming, ensuring consistent color usage. - Introduced SystemChrome component to manage system UI background color based on theme. - Enhanced TabsLayout, ProfileStackLayout, and other components to leverage new theming structure. - Improved QRCodeScanner, SearchBar, and CommentItem styles to align with the updated theme system. - Consolidated styles in SystemMessageItem and TabBar for better maintainability and visual coherence.
This commit is contained in:
lafay
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -12,11 +12,148 @@ import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router';
|
||||
import { qrcodeApi } from '../../services/authService';
|
||||
import { colors, spacing, fontSizes, borderRadius } from '../../theme';
|
||||
import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
|
||||
import { AppBackButton } from '../../components/common';
|
||||
|
||||
function createQrCodeConfirmStyles(colors: AppColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: spacing.sm,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.divider,
|
||||
},
|
||||
closeButton: {
|
||||
padding: spacing.sm,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: fontSizes.lg,
|
||||
fontWeight: '600',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
placeholder: {
|
||||
width: 40,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: spacing.lg,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
infoCard: {
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: spacing.xl,
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.xl,
|
||||
shadowColor: colors.chat.shadow,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
infoText: {
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.secondary,
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
userInfo: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
avatar: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
avatarPlaceholder: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: colors.background.disabled,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
nickname: {
|
||||
fontSize: fontSizes.lg,
|
||||
fontWeight: '600',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
buttonContainer: {
|
||||
gap: spacing.md,
|
||||
},
|
||||
button: {
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.xl,
|
||||
borderRadius: borderRadius.md,
|
||||
alignItems: 'center',
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: colors.primary.main,
|
||||
},
|
||||
confirmButtonText: {
|
||||
color: colors.text.inverse,
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '600',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: colors.background.paper,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
},
|
||||
cancelButtonText: {
|
||||
color: colors.text.secondary,
|
||||
fontSize: fontSizes.md,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: spacing.md,
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.secondary,
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: spacing.xl,
|
||||
},
|
||||
errorText: {
|
||||
marginTop: spacing.md,
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.secondary,
|
||||
textAlign: 'center',
|
||||
},
|
||||
backButton: {
|
||||
marginTop: spacing.xl,
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.xl,
|
||||
backgroundColor: colors.primary.main,
|
||||
borderRadius: borderRadius.md,
|
||||
},
|
||||
backButtonText: {
|
||||
color: colors.text.inverse,
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export const QRCodeConfirmScreen: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const colors = useAppColors();
|
||||
const styles = useMemo(() => createQrCodeConfirmStyles(colors), [colors]);
|
||||
const { sessionId: sessionIdParam } = useLocalSearchParams<{ sessionId?: string }>();
|
||||
const sessionId = sessionIdParam || '';
|
||||
|
||||
@@ -37,9 +174,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
} catch (err: any) {
|
||||
const errorMsg = err.response?.data?.message || '扫码失败';
|
||||
setError(errorMsg);
|
||||
Alert.alert('扫码失败', errorMsg, [
|
||||
{ text: '确定', onPress: () => router.back() }
|
||||
]);
|
||||
Alert.alert('扫码失败', errorMsg, [{ text: '确定', onPress: () => router.back() }]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -49,9 +184,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await qrcodeApi.confirm(sessionId);
|
||||
Alert.alert('登录成功', '网页端已登录', [
|
||||
{ text: '确定', onPress: () => router.back() }
|
||||
]);
|
||||
Alert.alert('登录成功', '网页端已登录', [{ text: '确定', onPress: () => router.back() }]);
|
||||
} catch (err: any) {
|
||||
const errorMsg = err.response?.data?.message || '确认登录失败';
|
||||
Alert.alert('登录失败', errorMsg);
|
||||
@@ -63,7 +196,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
const handleCancel = async () => {
|
||||
try {
|
||||
await qrcodeApi.cancel(sessionId);
|
||||
} catch (err) {
|
||||
} catch {
|
||||
// 忽略取消错误
|
||||
}
|
||||
router.back();
|
||||
@@ -97,7 +230,12 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<AppBackButton onPress={handleCancel} icon="close" style={styles.closeButton} iconColor="#666" />
|
||||
<AppBackButton
|
||||
onPress={handleCancel}
|
||||
icon="close"
|
||||
style={styles.closeButton}
|
||||
iconColor={colors.text.secondary}
|
||||
/>
|
||||
<Text style={styles.headerTitle}>确认登录</Text>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
@@ -105,14 +243,14 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
<View style={styles.content}>
|
||||
<View style={styles.infoCard}>
|
||||
<Text style={styles.infoText}>您正在登录网页端</Text>
|
||||
|
||||
|
||||
{userInfo && (
|
||||
<View style={styles.userInfo}>
|
||||
{userInfo.avatar ? (
|
||||
<Image source={{ uri: userInfo.avatar }} style={styles.avatar} />
|
||||
) : (
|
||||
<View style={styles.avatarPlaceholder}>
|
||||
<MaterialCommunityIcons name="account" size={40} color="#999" />
|
||||
<MaterialCommunityIcons name="account" size={40} color={colors.text.disabled} />
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.nickname}>{userInfo.nickname}</Text>
|
||||
@@ -127,7 +265,7 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
<ActivityIndicator color={colors.text.inverse} />
|
||||
) : (
|
||||
<Text style={styles.confirmButtonText}>确认登录</Text>
|
||||
)}
|
||||
@@ -146,137 +284,4 @@ export const QRCodeConfirmScreen: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: spacing.sm,
|
||||
backgroundColor: '#fff',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#eee',
|
||||
},
|
||||
closeButton: {
|
||||
padding: spacing.sm,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: fontSizes.lg,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
placeholder: {
|
||||
width: 40,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: spacing.lg,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
infoCard: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: spacing.xl,
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.xl,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
infoText: {
|
||||
fontSize: fontSizes.md,
|
||||
color: '#666',
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
userInfo: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
avatar: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
avatarPlaceholder: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#f0f0f0',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
nickname: {
|
||||
fontSize: fontSizes.lg,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
buttonContainer: {
|
||||
gap: spacing.md,
|
||||
},
|
||||
button: {
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.xl,
|
||||
borderRadius: borderRadius.md,
|
||||
alignItems: 'center',
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: colors.primary.main,
|
||||
},
|
||||
confirmButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '600',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
},
|
||||
cancelButtonText: {
|
||||
color: '#666',
|
||||
fontSize: fontSizes.md,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: spacing.md,
|
||||
fontSize: fontSizes.md,
|
||||
color: '#666',
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: spacing.xl,
|
||||
},
|
||||
errorText: {
|
||||
marginTop: spacing.md,
|
||||
fontSize: fontSizes.md,
|
||||
color: '#666',
|
||||
textAlign: 'center',
|
||||
},
|
||||
backButton: {
|
||||
marginTop: spacing.xl,
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.xl,
|
||||
backgroundColor: colors.primary.main,
|
||||
borderRadius: borderRadius.md,
|
||||
},
|
||||
backButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
export default QRCodeConfirmScreen;
|
||||
export default QRCodeConfirmScreen;
|
||||
|
||||
Reference in New Issue
Block a user