feat(ui): unify design system to Twitter/X style across screens and improve message handling
Redesign multiple screens and components from card-based responsive design to Twitter/X flat design: - UserProfileHeader: adopt Twitter/X style with larger icons, simplified buttons, and block functionality - AppBackButton: update to chevron-left icon with larger size, remove background styling - Update SettingsScreen, EditProfileScreen, and UserProfileScreen with flat layout approach - ConversationListRow: convert from bordered cards to flat list rows with updated typography Improve message system with WebSocket notification handling: - Add real-time system unread count updates via WebSocket - Track lastSystemMessageAt for accurate system message timestamps - Add notification deduplication and read-status filtering - Combine system and conversation unread counts in background sync - Clear system notifications from notification center on mark as read
This commit is contained in:
lafay
@@ -1,50 +1,50 @@
|
||||
/**
|
||||
* UserProfileHeader 用户资料头部组件 - 美化版（响应式适配）
|
||||
* UserProfileHeader 用户资料头部组件 - Twitter/X 风格
|
||||
* 显示用户封面、头像、昵称、简介、关注/粉丝数
|
||||
* 采用现代卡片式设计，渐变封面，悬浮头像
|
||||
* 采用 Twitter/X 扁平化设计，左对齐布局
|
||||
* 支持互关状态显示
|
||||
* 在宽屏下显示更大的头像和封面
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import React, { useMemo, useState, useRef, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
Pressable,
|
||||
Dimensions,
|
||||
} from 'react-native';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { spacing, fontSizes, borderRadius, shadows, useAppColors, type AppColors } from '../../theme';
|
||||
import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
|
||||
import { User } from '../../types';
|
||||
import Text from '../common/Text';
|
||||
import Button from '../common/Button';
|
||||
import Avatar from '../common/Avatar';
|
||||
import { useResponsive } from '../../hooks';
|
||||
|
||||
interface UserProfileHeaderProps {
|
||||
user: User;
|
||||
isCurrentUser?: boolean;
|
||||
isBlocked?: boolean;
|
||||
onFollow: () => void;
|
||||
onSettings?: () => void;
|
||||
onEditProfile?: () => void;
|
||||
onMessage?: () => void;
|
||||
onMore?: () => void; // 点击更多按钮
|
||||
onPostsPress?: () => void; // 点击帖子数（可选）
|
||||
onFollowingPress?: () => void; // 点击关注数
|
||||
onFollowersPress?: () => void; // 点击粉丝数
|
||||
onAvatarPress?: () => void; // 点击头像编辑按钮
|
||||
onBlock?: () => void;
|
||||
onFollowingPress?: () => void;
|
||||
onFollowersPress?: () => void;
|
||||
onAvatarPress?: () => void;
|
||||
}
|
||||
|
||||
const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
|
||||
user,
|
||||
isCurrentUser = false,
|
||||
isBlocked = false,
|
||||
onFollow,
|
||||
onSettings,
|
||||
onEditProfile,
|
||||
onMessage,
|
||||
onMore,
|
||||
onPostsPress,
|
||||
onBlock,
|
||||
onFollowingPress,
|
||||
onFollowersPress,
|
||||
onAvatarPress,
|
||||
@@ -52,108 +52,118 @@ const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
|
||||
const colors = useAppColors();
|
||||
const styles = useMemo(() => createUserProfileHeaderStyles(colors), [colors]);
|
||||
const { isWideScreen, isDesktop, width } = useResponsive();
|
||||
const [menuVisible, setMenuVisible] = useState(false);
|
||||
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
|
||||
const moreButtonRef = useRef<View>(null);
|
||||
|
||||
// 格式化数字
|
||||
const formatCount = (count: number | undefined): string => {
|
||||
if (count === undefined || count === null) {
|
||||
return '0';
|
||||
}
|
||||
if (count >= 10000) {
|
||||
return `${(count / 10000).toFixed(1)}w`;
|
||||
}
|
||||
if (count >= 1000) {
|
||||
return `${(count / 1000).toFixed(1)}k`;
|
||||
}
|
||||
if (count === undefined || count === null) return '0';
|
||||
if (count >= 10000) return `${(count / 10000).toFixed(1)}w`;
|
||||
if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
|
||||
return count.toString();
|
||||
};
|
||||
|
||||
// 获取帖子数量
|
||||
const getPostsCount = (): number => {
|
||||
return user.posts_count ?? 0;
|
||||
};
|
||||
const getPostsCount = (): number => user.posts_count ?? 0;
|
||||
const getFollowersCount = (): number => user.followers_count ?? 0;
|
||||
const getFollowingCount = (): number => user.following_count ?? 0;
|
||||
const getIsFollowing = (): boolean => user.is_following ?? false;
|
||||
const getIsFollowingMe = (): boolean => user.is_following_me ?? false;
|
||||
|
||||
// 获取粉丝数量
|
||||
const getFollowersCount = (): number => {
|
||||
return user.followers_count ?? 0;
|
||||
};
|
||||
|
||||
// 获取关注数量
|
||||
const getFollowingCount = (): number => {
|
||||
return user.following_count ?? 0;
|
||||
};
|
||||
|
||||
// 检查是否关注
|
||||
const getIsFollowing = (): boolean => {
|
||||
return user.is_following ?? false;
|
||||
};
|
||||
|
||||
// 检查对方是否关注了我
|
||||
const getIsFollowingMe = (): boolean => {
|
||||
return user.is_following_me ?? false;
|
||||
};
|
||||
|
||||
// 获取按钮配置（类似B站的互关逻辑）
|
||||
const getButtonConfig = (): { title: string; variant: 'primary' | 'outline'; icon?: string } => {
|
||||
const getButtonConfig = (): { title: string; variant: 'primary' | 'outline' | 'ghost'; icon?: string } => {
|
||||
const isFollowing = getIsFollowing();
|
||||
const isFollowingMe = getIsFollowingMe();
|
||||
|
||||
if (isFollowing && isFollowingMe) {
|
||||
// 已互关
|
||||
return { title: '互相关注', variant: 'outline', icon: 'account-check' };
|
||||
} else if (isFollowing) {
|
||||
// 已关注但对方未回关
|
||||
return { title: '已关注', variant: 'outline', icon: 'check' };
|
||||
} else if (isFollowingMe) {
|
||||
// 对方关注了我，但我没关注对方 - 显示回关
|
||||
return { title: '回关', variant: 'primary', icon: 'plus' };
|
||||
} else {
|
||||
// 互不关注
|
||||
return { title: '关注', variant: 'primary', icon: 'plus' };
|
||||
}
|
||||
};
|
||||
|
||||
// 根据屏幕尺寸计算封面高度
|
||||
const coverHeight = isDesktop ? 240 : isWideScreen ? 200 : (width * 9) / 16;
|
||||
|
||||
// 根据屏幕尺寸计算头像大小
|
||||
const avatarSize = isDesktop ? 120 : isWideScreen ? 100 : 90;
|
||||
const coverHeight = isDesktop ? 280 : isWideScreen ? 240 : (width * 10) / 16;
|
||||
const avatarSize = isDesktop ? 140 : isWideScreen ? 120 : 88;
|
||||
|
||||
const renderStatItem = ({
|
||||
value,
|
||||
label,
|
||||
onPress,
|
||||
}: {
|
||||
value: string;
|
||||
label: string;
|
||||
onPress?: () => void;
|
||||
}) => {
|
||||
const content = (
|
||||
<View style={styles.statContent}>
|
||||
<Text variant="h3" style={styles.statNumber}>{value}</Text>
|
||||
<Text variant="caption" color={colors.text.secondary} style={styles.statLabel}>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
const handleMorePress = useCallback(() => {
|
||||
moreButtonRef.current?.measure((_fx, _fy, _w, h, px, py) => {
|
||||
const screenWidth = Dimensions.get('window').width;
|
||||
const menuWidth = 180;
|
||||
let x = px + _w / 2 - menuWidth / 2;
|
||||
if (x + menuWidth > screenWidth - 12) {
|
||||
x = screenWidth - menuWidth - 12;
|
||||
}
|
||||
if (x < 12) x = 12;
|
||||
setMenuPosition({ x, y: py + h + 4 });
|
||||
setMenuVisible(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (onPress) {
|
||||
const handleBlockPress = useCallback(() => {
|
||||
setMenuVisible(false);
|
||||
onBlock?.();
|
||||
}, [onBlock]);
|
||||
|
||||
const renderStatLink = (count: number, label: string, onPress?: () => void) => {
|
||||
if (!onPress) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.statItem, styles.statItemTouchable]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.75}
|
||||
>
|
||||
{content}
|
||||
</TouchableOpacity>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statNumber}>{formatCount(count)}</Text>
|
||||
<Text style={styles.statLabel}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return <View style={styles.statItem}>{content}</View>;
|
||||
return (
|
||||
<TouchableOpacity style={styles.statItem} onPress={onPress} activeOpacity={0.7}>
|
||||
<Text style={styles.statNumber}>{formatCount(count)}</Text>
|
||||
<Text style={styles.statLabel}>{label}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDropdownMenu = () => (
|
||||
<Modal
|
||||
visible={menuVisible}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setMenuVisible(false)}
|
||||
>
|
||||
<Pressable style={styles.menuBackdrop} onPress={() => setMenuVisible(false)}>
|
||||
<View
|
||||
style={[
|
||||
styles.menuContainer,
|
||||
{ left: menuPosition.x, top: menuPosition.y },
|
||||
]}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.menuItem}
|
||||
onPress={handleBlockPress}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name={isBlocked ? 'account-check-outline' : 'account-off-outline'}
|
||||
size={18}
|
||||
color={isBlocked ? colors.success.main : colors.error.main}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.menuItemText,
|
||||
{ color: isBlocked ? colors.success.main : colors.error.main },
|
||||
]}
|
||||
>
|
||||
{isBlocked ? '取消拉黑' : '拉黑用户'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 渐变封面背景 */}
|
||||
{/* 全宽封面背景 */}
|
||||
<View style={[styles.coverContainer, { height: coverHeight }]}>
|
||||
<View style={styles.coverTouchable}>
|
||||
{user.cover_url ? (
|
||||
@@ -163,382 +173,351 @@ const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
|
||||
resizeMode="cover"
|
||||
/>
|
||||
) : (
|
||||
<LinearGradient
|
||||
colors={['#FF8F66', '#FF6B35', '#E5521D']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.gradient}
|
||||
/>
|
||||
<View style={[styles.coverFallback, { backgroundColor: colors.primary.main }]}>
|
||||
<MaterialCommunityIcons name="image-outline" size={48} color="rgba(255,255,255,0.4)" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 设置按钮 */}
|
||||
{isCurrentUser && onSettings && (
|
||||
<TouchableOpacity style={styles.settingsButton} onPress={onSettings}>
|
||||
<MaterialCommunityIcons name="cog-outline" size={22} color={colors.text.inverse} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{/* 装饰性波浪 */}
|
||||
<View style={styles.waveDecoration}>
|
||||
<View style={styles.wave} />
|
||||
{/* 顶部导航栏按钮 */}
|
||||
<View style={styles.topBar}>
|
||||
{isCurrentUser && onSettings && (
|
||||
<TouchableOpacity style={styles.iconButton} onPress={onSettings}>
|
||||
<MaterialCommunityIcons name="cog-outline" size={20} color={colors.text.primary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 用户信息卡片 */}
|
||||
<View style={[
|
||||
styles.profileCard,
|
||||
isWideScreen && styles.profileCardWide,
|
||||
]}>
|
||||
{/* 悬浮头像 */}
|
||||
<View style={[
|
||||
styles.avatarWrapper,
|
||||
isWideScreen && styles.avatarWrapperWide,
|
||||
]}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Avatar
|
||||
source={user.avatar}
|
||||
size={avatarSize}
|
||||
name={user.nickname}
|
||||
/>
|
||||
{isCurrentUser && onAvatarPress && (
|
||||
<TouchableOpacity style={styles.editAvatarButton} onPress={onAvatarPress}>
|
||||
<MaterialCommunityIcons name="camera" size={14} color={colors.text.inverse} />
|
||||
{/* 用户信息区 */}
|
||||
<View style={styles.infoSection}>
|
||||
{/* 头像与操作按钮行 */}
|
||||
<View style={styles.avatarActionRow}>
|
||||
<View style={[styles.avatarWrapper, { marginTop: -avatarSize / 2 }]}>
|
||||
<View style={[styles.avatarContainer, { width: avatarSize, height: avatarSize }]}>
|
||||
<Avatar
|
||||
source={user.avatar}
|
||||
size={avatarSize - 6}
|
||||
name={user.nickname}
|
||||
/>
|
||||
{isCurrentUser && onAvatarPress && (
|
||||
<TouchableOpacity style={styles.editAvatarButton} onPress={onAvatarPress}>
|
||||
<MaterialCommunityIcons name="camera" size={14} color={colors.text.inverse} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.actionButtons}>
|
||||
{isCurrentUser ? (
|
||||
<TouchableOpacity style={styles.editProfileButton} onPress={onEditProfile} activeOpacity={0.8}>
|
||||
<Text style={styles.editProfileText}>编辑资料</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={styles.buttonRow}>
|
||||
<View ref={moreButtonRef} collapsable={false}>
|
||||
<TouchableOpacity style={styles.iconButtonSmall} onPress={handleMorePress}>
|
||||
<MaterialCommunityIcons name="dots-horizontal" size={20} color={colors.text.primary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.iconButtonSmall} onPress={onMessage}>
|
||||
<MaterialCommunityIcons name="email-outline" size={18} color={colors.text.primary} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.followBtn,
|
||||
getButtonConfig().variant === 'outline' && styles.followBtnOutline,
|
||||
getButtonConfig().variant === 'primary' && styles.followBtnPrimary,
|
||||
]}
|
||||
onPress={onFollow}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.followBtnText,
|
||||
...(getButtonConfig().variant === 'primary' ? [styles.followBtnTextPrimary] : []),
|
||||
]}
|
||||
>
|
||||
{getButtonConfig().title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 用户名和简介 */}
|
||||
<View style={styles.userInfo}>
|
||||
<Text variant="h2" style={[
|
||||
styles.nickname,
|
||||
isWideScreen ? styles.nicknameWide : {},
|
||||
]}>
|
||||
{user.nickname}
|
||||
</Text>
|
||||
<Text variant="caption" color={colors.text.secondary} style={styles.username}>
|
||||
@{user.username}
|
||||
</Text>
|
||||
|
||||
{user.bio ? (
|
||||
<Text variant="body" color={colors.text.secondary} style={[
|
||||
styles.bio,
|
||||
isWideScreen ? styles.bioWide : {},
|
||||
]}>
|
||||
{user.bio}
|
||||
</Text>
|
||||
) : (
|
||||
<Text variant="body" color={colors.text.hint} style={styles.bioPlaceholder}>
|
||||
这个人很懒，还没有写简介~
|
||||
</Text>
|
||||
)}
|
||||
{/* 用户名 */}
|
||||
<View style={styles.nameSection}>
|
||||
<Text style={styles.nickname}>{user.nickname}</Text>
|
||||
<Text style={styles.username}>@{user.username}</Text>
|
||||
</View>
|
||||
|
||||
{/* 个人信息标签 */}
|
||||
{/* 简介 */}
|
||||
{user.bio ? (
|
||||
<Text style={styles.bio}>{user.bio}</Text>
|
||||
) : null}
|
||||
|
||||
{/* 元信息 */}
|
||||
<View style={styles.metaInfo}>
|
||||
{user.location?.trim() ? (
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="map-marker-outline" size={12} color={colors.primary.main} />
|
||||
<Text variant="caption" color={colors.primary.main} style={styles.metaTagText}>
|
||||
{user.location}
|
||||
</Text>
|
||||
<View style={styles.metaItem}>
|
||||
<MaterialCommunityIcons name="map-marker-outline" size={14} color={colors.text.hint} />
|
||||
<Text style={styles.metaText}>{user.location}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{user.website?.trim() ? (
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="link-variant" size={12} color={colors.info.main} />
|
||||
<Text variant="caption" color={colors.info.main} style={styles.metaTagText}>
|
||||
{user.website.replace(/^https?:\/\//, '')}
|
||||
</Text>
|
||||
<View style={styles.metaItem}>
|
||||
<MaterialCommunityIcons name="link-variant" size={14} color={colors.info.main} />
|
||||
<Text style={[styles.metaText, styles.metaLink]}>{user.website.replace(/^https?:\/\//, '')}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="calendar-outline" size={12} color={colors.text.secondary} />
|
||||
<Text variant="caption" color={colors.text.secondary} style={styles.metaTagText}>
|
||||
<View style={styles.metaItem}>
|
||||
<MaterialCommunityIcons name="calendar-outline" size={14} color={colors.text.hint} />
|
||||
<Text style={styles.metaText}>
|
||||
加入于 {new Date(user.created_at || Date.now()).getFullYear()}年
|
||||
{new Date(user.created_at || Date.now()).getMonth() + 1}月
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 统计数据 - 卡片式 */}
|
||||
<View style={[
|
||||
styles.statsCard,
|
||||
isWideScreen && styles.statsCardWide,
|
||||
]}>
|
||||
{renderStatItem({
|
||||
value: formatCount(getPostsCount()),
|
||||
label: '帖子',
|
||||
onPress: onPostsPress,
|
||||
})}
|
||||
<View style={styles.statDivider} />
|
||||
{renderStatItem({
|
||||
value: formatCount(getFollowingCount()),
|
||||
label: '关注',
|
||||
onPress: onFollowingPress,
|
||||
})}
|
||||
<View style={styles.statDivider} />
|
||||
{renderStatItem({
|
||||
value: formatCount(getFollowersCount()),
|
||||
label: '粉丝',
|
||||
onPress: onFollowersPress,
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View style={styles.actionButtons}>
|
||||
{isCurrentUser ? (
|
||||
<View style={styles.buttonRow} />
|
||||
) : (
|
||||
<View style={StyleSheet.flatten([
|
||||
styles.buttonRow,
|
||||
isWideScreen && styles.buttonRowWide,
|
||||
])}>
|
||||
<Button
|
||||
title={getButtonConfig().title}
|
||||
onPress={onFollow}
|
||||
variant={getButtonConfig().variant}
|
||||
style={StyleSheet.flatten([
|
||||
styles.followButton,
|
||||
isWideScreen && styles.followButtonWide,
|
||||
])}
|
||||
icon={getButtonConfig().icon}
|
||||
/>
|
||||
<TouchableOpacity style={styles.messageButton} onPress={onMessage}>
|
||||
<MaterialCommunityIcons name="message-text-outline" size={20} color={colors.primary.main} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.moreButton} onPress={onMore}>
|
||||
<MaterialCommunityIcons name="dots-horizontal" size={24} color={colors.text.secondary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
{/* 统计数据 - Twitter 风格内联 */}
|
||||
<View style={styles.statsRow}>
|
||||
{renderStatLink(getFollowingCount(), '正在关注', onFollowingPress)}
|
||||
{renderStatLink(getFollowersCount(), '关注者', onFollowersPress)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{renderDropdownMenu()}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
function createUserProfileHeaderStyles(colors: AppColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
coverContainer: {
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
coverTouchable: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
gradient: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
settingsButton: {
|
||||
position: 'absolute',
|
||||
top: spacing.lg,
|
||||
right: spacing.lg,
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
waveDecoration: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 40,
|
||||
},
|
||||
wave: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: colors.background.default,
|
||||
borderTopLeftRadius: 30,
|
||||
borderTopRightRadius: 30,
|
||||
},
|
||||
profileCard: {
|
||||
backgroundColor: colors.background.paper,
|
||||
marginHorizontal: spacing.md,
|
||||
marginTop: -50,
|
||||
borderRadius: borderRadius.xl,
|
||||
padding: spacing.lg,
|
||||
...shadows.md,
|
||||
},
|
||||
profileCardWide: {
|
||||
marginHorizontal: spacing.lg,
|
||||
marginTop: -60,
|
||||
padding: spacing.xl,
|
||||
},
|
||||
avatarWrapper: {
|
||||
alignItems: 'center',
|
||||
marginTop: -60,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
avatarWrapperWide: {
|
||||
marginTop: -80,
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
avatarContainer: {
|
||||
position: 'relative',
|
||||
padding: 4,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: 50,
|
||||
},
|
||||
editAvatarButton: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: colors.primary.main,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: colors.background.paper,
|
||||
},
|
||||
userInfo: {
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
nickname: {
|
||||
marginBottom: spacing.xs,
|
||||
fontWeight: '700',
|
||||
},
|
||||
nicknameWide: {
|
||||
fontSize: fontSizes['3xl'],
|
||||
},
|
||||
username: {
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
bio: {
|
||||
textAlign: 'center',
|
||||
marginTop: spacing.sm,
|
||||
lineHeight: 20,
|
||||
},
|
||||
bioWide: {
|
||||
fontSize: fontSizes.md,
|
||||
lineHeight: 24,
|
||||
maxWidth: 600,
|
||||
},
|
||||
bioPlaceholder: {
|
||||
textAlign: 'center',
|
||||
marginTop: spacing.sm,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
metaInfo: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: spacing.md,
|
||||
gap: spacing.sm,
|
||||
},
|
||||
metaTag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.background.default,
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: spacing.xs,
|
||||
borderRadius: borderRadius.md,
|
||||
},
|
||||
metaTagText: {
|
||||
marginLeft: spacing.xs,
|
||||
fontSize: fontSizes.xs,
|
||||
},
|
||||
statsCard: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
paddingHorizontal: spacing.xs,
|
||||
paddingVertical: spacing.xs,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
statsCardWide: {
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: spacing.sm,
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
statItem: {
|
||||
flex: 1,
|
||||
minHeight: 58,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
statItemTouchable: {
|
||||
borderRadius: borderRadius.md,
|
||||
},
|
||||
statContent: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.sm,
|
||||
paddingHorizontal: spacing.xs,
|
||||
},
|
||||
statNumber: {
|
||||
fontWeight: '600',
|
||||
marginBottom: 0,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: fontSizes.xs,
|
||||
marginTop: 2,
|
||||
},
|
||||
statDivider: {
|
||||
width: 1,
|
||||
height: 24,
|
||||
backgroundColor: colors.divider + '55',
|
||||
},
|
||||
actionButtons: {
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.sm,
|
||||
},
|
||||
buttonRowWide: {
|
||||
justifyContent: 'center',
|
||||
gap: spacing.md,
|
||||
},
|
||||
editButton: {
|
||||
flex: 1,
|
||||
},
|
||||
followButton: {
|
||||
flex: 1,
|
||||
},
|
||||
followButtonWide: {
|
||||
flex: 0,
|
||||
minWidth: 120,
|
||||
},
|
||||
messageButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.primary.light + '20',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
moreButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.background.default,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
settingsButtonOnly: {
|
||||
alignSelf: 'center',
|
||||
padding: spacing.sm,
|
||||
},
|
||||
container: {
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
// 封面
|
||||
coverContainer: {
|
||||
position: 'relative',
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
coverTouchable: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverFallback: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
// 顶部栏
|
||||
topBar: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingTop: spacing.md,
|
||||
},
|
||||
iconButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: borderRadius.full,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.85)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
...shadows.sm,
|
||||
},
|
||||
// 信息区
|
||||
infoSection: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingTop: spacing.sm,
|
||||
paddingBottom: spacing.lg,
|
||||
},
|
||||
avatarActionRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
avatarWrapper: {
|
||||
// 负边距在 inline style 中计算
|
||||
},
|
||||
avatarContainer: {
|
||||
borderRadius: borderRadius.full,
|
||||
backgroundColor: colors.background.paper,
|
||||
padding: 3,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
editAvatarButton: {
|
||||
position: 'absolute',
|
||||
bottom: 4,
|
||||
right: 4,
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: colors.primary.main,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: colors.background.paper,
|
||||
},
|
||||
// 操作按钮
|
||||
actionButtons: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.sm,
|
||||
},
|
||||
iconButtonSmall: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: borderRadius.full,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
editProfileButton: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.sm,
|
||||
borderRadius: borderRadius.full,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
editProfileText: {
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '600',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
followBtn: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.sm,
|
||||
borderRadius: borderRadius.full,
|
||||
minWidth: 80,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
followBtnPrimary: {
|
||||
backgroundColor: colors.text.primary,
|
||||
},
|
||||
followBtnOutline: {
|
||||
backgroundColor: colors.background.paper,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
},
|
||||
followBtnText: {
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '700',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
followBtnTextPrimary: {
|
||||
color: colors.background.paper,
|
||||
},
|
||||
// 名字
|
||||
nameSection: {
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
nickname: {
|
||||
fontSize: fontSizes['2xl'],
|
||||
fontWeight: '800',
|
||||
color: colors.text.primary,
|
||||
marginBottom: 2,
|
||||
},
|
||||
username: {
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.hint,
|
||||
},
|
||||
// 简介
|
||||
bio: {
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.primary,
|
||||
lineHeight: 20,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
// 元信息
|
||||
metaInfo: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: spacing.md,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
metaItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
metaText: {
|
||||
fontSize: fontSizes.sm,
|
||||
color: colors.text.hint,
|
||||
},
|
||||
metaLink: {
|
||||
color: colors.info.main,
|
||||
},
|
||||
// 统计
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: spacing.lg,
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
statItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
statNumber: {
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '700',
|
||||
color: colors.text.primary,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: fontSizes.sm,
|
||||
color: colors.text.hint,
|
||||
},
|
||||
// 下拉菜单
|
||||
menuBackdrop: {
|
||||
flex: 1,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
menuContainer: {
|
||||
position: 'absolute',
|
||||
minWidth: 160,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.lg,
|
||||
...shadows.lg,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.divider,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
menuItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.sm,
|
||||
paddingVertical: spacing.md,
|
||||
paddingHorizontal: spacing.lg,
|
||||
},
|
||||
menuItemText: {
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 使用 React.memo 避免不必要的重新渲染
|
||||
const MemoizedUserProfileHeader = React.memo(UserProfileHeader);
|
||||
import { shadows } from '../../theme';
|
||||
|
||||
const MemoizedUserProfileHeader = React.memo(UserProfileHeader);
|
||||
export default MemoizedUserProfileHeader;
|
||||
|
||||
@@ -2,56 +2,54 @@ import React from 'react';
|
||||
import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
|
||||
import { borderRadius, spacing, useAppColors } from '../../theme';
|
||||
import { useAppColors } from '../../theme';
|
||||
|
||||
type AppBackButtonIcon = 'arrow-left' | 'close';
|
||||
type AppBackButtonIcon = 'chevron-left' | 'arrow-left' | 'close';
|
||||
|
||||
interface AppBackButtonProps {
|
||||
onPress: () => void;
|
||||
icon?: AppBackButtonIcon;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
iconColor?: string;
|
||||
backgroundColor?: string;
|
||||
hitSlop?: number;
|
||||
testID?: string;
|
||||
}
|
||||
|
||||
const AppBackButton: React.FC<AppBackButtonProps> = ({
|
||||
onPress,
|
||||
icon = 'arrow-left',
|
||||
icon = 'chevron-left',
|
||||
style,
|
||||
iconColor: iconColorProp,
|
||||
backgroundColor: backgroundColorProp,
|
||||
hitSlop = 8,
|
||||
testID,
|
||||
}) => {
|
||||
const colors = useAppColors();
|
||||
const iconColor = iconColorProp ?? colors.text.primary;
|
||||
const backgroundColor = backgroundColorProp ?? colors.background.paper;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
style={[styles.button, { backgroundColor }, style]}
|
||||
activeOpacity={0.75}
|
||||
style={[styles.button, style]}
|
||||
activeOpacity={0.6}
|
||||
hitSlop={hitSlop}
|
||||
testID={testID}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={icon === 'close' ? '关闭' : '返回'}
|
||||
>
|
||||
<MaterialCommunityIcons name={icon} size={22} color={iconColor} />
|
||||
<MaterialCommunityIcons name={icon} size={36} color={iconColor} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: borderRadius.full,
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: spacing.xs,
|
||||
marginLeft: -12,
|
||||
marginRight: 0,
|
||||
padding: 0,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ function createQrCodeConfirmStyles(colors: AppColors) {
|
||||
borderBottomColor: colors.divider,
|
||||
},
|
||||
closeButton: {
|
||||
padding: spacing.sm,
|
||||
marginLeft: -12,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: fontSizes.lg,
|
||||
|
||||
@@ -309,10 +309,10 @@ function createRegisterStyles(colors: AppColors) {
|
||||
backIconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: colors.background.default,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: -12,
|
||||
padding: 0,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
|
||||
@@ -327,6 +327,8 @@ function createStyles(colors: AppColors) {
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginLeft: -12,
|
||||
padding: 0,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 18,
|
||||
|
||||
@@ -1929,10 +1929,8 @@ function createPostDetailStyles(colors: AppColors) {
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
headerBackButton: {
|
||||
paddingHorizontal: spacing.xs,
|
||||
paddingVertical: spacing.xs,
|
||||
marginLeft: spacing.xs,
|
||||
marginRight: spacing.sm,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
// 帖子容器
|
||||
postContainer: {
|
||||
|
||||
@@ -14,6 +14,7 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
|
||||
import { AppBackButton } from '../../components/common';
|
||||
import {
|
||||
spacing,
|
||||
fontSizes,
|
||||
@@ -275,9 +276,7 @@ export const MaterialDetailScreen: React.FC = () => {
|
||||
{/* Header */}
|
||||
<View style={[styles.header, isWideScreen && styles.headerWide]}>
|
||||
<View style={styles.headerLeft}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<MaterialCommunityIcons name="arrow-left" size={24} color={colors.text.primary} />
|
||||
</TouchableOpacity>
|
||||
<AppBackButton onPress={() => router.back()} />
|
||||
</View>
|
||||
<View style={styles.headerCenter}>
|
||||
<Text style={isWideScreen ? [styles.headerTitle, styles.headerTitleWide] : styles.headerTitle}>
|
||||
@@ -341,12 +340,9 @@ function createMaterialDetailStyles(colors: AppColors) {
|
||||
paddingVertical: spacing.lg,
|
||||
},
|
||||
headerLeft: {
|
||||
width: 44,
|
||||
width: 40,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
backButton: {
|
||||
padding: spacing.xs,
|
||||
},
|
||||
headerCenter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -14,6 +14,7 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
|
||||
import { AppBackButton } from '../../components/common';
|
||||
import {
|
||||
spacing,
|
||||
fontSizes,
|
||||
@@ -166,9 +167,7 @@ export const MaterialsScreen: React.FC = () => {
|
||||
{/* Header */}
|
||||
<View style={[styles.header, isWideScreen && styles.headerWide]}>
|
||||
<View style={styles.headerLeft}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<MaterialCommunityIcons name="arrow-left" size={24} color={colors.text.primary} />
|
||||
</TouchableOpacity>
|
||||
<AppBackButton onPress={() => router.back()} />
|
||||
</View>
|
||||
<View style={styles.headerCenter}>
|
||||
<Text style={isWideScreen ? [styles.headerTitle, styles.headerTitleWide] : styles.headerTitle}>
|
||||
@@ -227,12 +226,9 @@ function createMaterialsStyles(colors: AppColors) {
|
||||
paddingVertical: spacing.lg,
|
||||
},
|
||||
headerLeft: {
|
||||
width: 44,
|
||||
width: 40,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
backButton: {
|
||||
padding: spacing.xs,
|
||||
},
|
||||
headerCenter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -15,6 +15,7 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
|
||||
import { AppBackButton } from '../../components/common';
|
||||
import {
|
||||
spacing,
|
||||
fontSizes,
|
||||
@@ -255,9 +256,7 @@ export const SubjectMaterialsScreen: React.FC = () => {
|
||||
{/* Header */}
|
||||
<View style={[styles.header, isWideScreen && styles.headerWide]}>
|
||||
<View style={styles.headerLeft}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
|
||||
<MaterialCommunityIcons name="arrow-left" size={24} color={colors.text.primary} />
|
||||
</TouchableOpacity>
|
||||
<AppBackButton onPress={() => router.back()} />
|
||||
</View>
|
||||
<View style={styles.headerCenter}>
|
||||
<Text style={isWideScreen ? [styles.headerTitle, styles.headerTitleWide] : styles.headerTitle}>
|
||||
@@ -302,12 +301,9 @@ function createSubjectMaterialsStyles(colors: AppColors) {
|
||||
paddingVertical: spacing.lg,
|
||||
},
|
||||
headerLeft: {
|
||||
width: 44,
|
||||
width: 40,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
backButton: {
|
||||
padding: spacing.xs,
|
||||
},
|
||||
headerCenter: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1108,10 +1108,10 @@ function createGroupInfoStyles(colors: AppColors) {
|
||||
fontSize: fontSizes.xl,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
pageHeaderPlaceholder: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
pageHeaderPlaceholder: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
@@ -690,6 +690,7 @@ function createGroupMembersStyles(colors: AppColors) {
|
||||
},
|
||||
pageHeaderPlaceholder: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
section: {
|
||||
marginBottom: spacing.md,
|
||||
|
||||
@@ -49,6 +49,7 @@ import {
|
||||
useUnreadCount,
|
||||
useMarkAsRead,
|
||||
useMessageManagerConversations,
|
||||
useMessageStore,
|
||||
} from '../../stores';
|
||||
import { Avatar, Text, EmptyState, ResponsiveContainer, AppBackButton } from '../../components/common';
|
||||
import { useResponsive, useBreakpointGTE } from '../../hooks/useResponsive';
|
||||
@@ -113,6 +114,7 @@ export const MessageListScreen: React.FC = () => {
|
||||
|
||||
// 使用 MessageManager 获取未读数和系统通知数
|
||||
const { totalUnreadCount, systemUnreadCount } = useUnreadCount();
|
||||
const lastSystemMessageAt = useMessageStore(state => state.lastSystemMessageAt);
|
||||
const { markAllAsRead, isMarking } = useMarkAsRead(null);
|
||||
|
||||
// 【新架构】使用MessageManager的hook创建会话
|
||||
@@ -160,14 +162,14 @@ export const MessageListScreen: React.FC = () => {
|
||||
seq: 0,
|
||||
segments: [{ type: 'text', data: { text: '系统通知' } }],
|
||||
status: 'normal',
|
||||
created_at: new Date().toISOString(),
|
||||
created_at: lastSystemMessageAt || new Date().toISOString(),
|
||||
},
|
||||
last_message_at: new Date().toISOString(),
|
||||
last_message_at: lastSystemMessageAt || new Date().toISOString(),
|
||||
unread_count: systemUnreadCount,
|
||||
participants: [],
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
}), [systemUnreadCount]);
|
||||
created_at: lastSystemMessageAt || new Date().toISOString(),
|
||||
updated_at: lastSystemMessageAt || new Date().toISOString(),
|
||||
}), [systemUnreadCount, lastSystemMessageAt]);
|
||||
|
||||
// 动画值
|
||||
const [scaleAnims] = useState(() =>
|
||||
@@ -451,6 +453,7 @@ export const MessageListScreen: React.FC = () => {
|
||||
// 创建系统通知会话项
|
||||
const createSystemMessageItem = (): ConversationResponse => {
|
||||
const noticeContent = systemUnreadCount > 0 ? `您有 ${systemUnreadCount} 条未读通知` : '暂无新通知';
|
||||
const lastTime = lastSystemMessageAt || new Date().toISOString();
|
||||
return {
|
||||
id: SYSTEM_MESSAGE_CHANNEL_ID,
|
||||
type: 'private',
|
||||
@@ -462,13 +465,13 @@ export const MessageListScreen: React.FC = () => {
|
||||
seq: 0,
|
||||
segments: [{ type: 'text', data: { text: noticeContent } }],
|
||||
status: 'normal',
|
||||
created_at: new Date().toISOString(),
|
||||
created_at: lastTime,
|
||||
},
|
||||
last_message_at: new Date().toISOString(),
|
||||
last_message_at: lastTime,
|
||||
unread_count: systemUnreadCount,
|
||||
participants: [],
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
created_at: lastTime,
|
||||
updated_at: lastTime,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -936,7 +939,8 @@ function createMessageListStyles(colors: AppColors) {
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: spacing.md,
|
||||
backgroundColor: colors.background.default,
|
||||
...shadows.sm,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: colors.divider + '60',
|
||||
},
|
||||
headerWide: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
@@ -949,7 +953,7 @@ function createMessageListStyles(colors: AppColors) {
|
||||
paddingHorizontal: spacing.lg,
|
||||
},
|
||||
listContentWide: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingHorizontal: spacing.xs,
|
||||
},
|
||||
headerLeft: {
|
||||
width: 44,
|
||||
@@ -1028,6 +1032,7 @@ function createMessageListStyles(colors: AppColors) {
|
||||
listContent: {
|
||||
flexGrow: 1,
|
||||
backgroundColor: colors.background.default,
|
||||
paddingHorizontal: spacing.xs,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
@@ -1086,11 +1091,9 @@ function createMessageListStyles(colors: AppColors) {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: spacing.md,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.lg,
|
||||
marginBottom: spacing.sm,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: `${colors.divider}50`,
|
||||
backgroundColor: colors.background.default,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: `${colors.divider}50`,
|
||||
},
|
||||
searchResultContent: {
|
||||
flex: 1,
|
||||
|
||||
@@ -32,9 +32,10 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { spacing, borderRadius, useAppColors, useResolvedColorScheme, type AppColors } from '../../theme';
|
||||
import { SystemMessageResponse } from '../../types/dto';
|
||||
import { messageService } from '@/services/message';
|
||||
import { systemNotificationService } from '@/services/notification';
|
||||
import { commentService } from '@/services/post';
|
||||
import { SystemMessageItem } from '../../components/business';
|
||||
import { Text, ResponsiveContainer } from '../../components/common';
|
||||
import { Text, ResponsiveContainer, AppBackButton } from '../../components/common';
|
||||
import { useCursorPagination } from '../../hooks/useCursorPagination';
|
||||
import * as hrefs from '../../navigation/hrefs';
|
||||
import { useMessageManagerSystemUnreadCount } from '../../stores';
|
||||
@@ -174,6 +175,8 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
|
||||
setSystemUnreadCount(0);
|
||||
// 同步更新全局 TabBar 红点
|
||||
messageManager.fetchUnreadCount();
|
||||
// 清除通知栏中已读的系统消息通知
|
||||
systemNotificationService.clearAllNotifications().catch(() => {});
|
||||
} catch (error) {
|
||||
console.error('一键已读失败:', error);
|
||||
}
|
||||
@@ -381,11 +384,9 @@ export const NotificationsScreen: React.FC<{ onBack?: () => void }> = ({ onBack
|
||||
return (
|
||||
<View style={[styles.header, isWideScreen ? styles.headerWide : null]}>
|
||||
{shouldShowBackButton ? (
|
||||
<TouchableOpacity style={styles.backButton} onPress={onBack} activeOpacity={0.8}>
|
||||
<View style={styles.backIconButton}>
|
||||
<MaterialCommunityIcons name="arrow-left" size={22} color={colors.text.primary} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.backButton}>
|
||||
<AppBackButton onPress={onBack} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.backButtonPlaceholder} />
|
||||
)}
|
||||
@@ -673,14 +674,6 @@ function createNotificationsStyles(colors: AppColors) {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
backIconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: colors.background.default,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
backButtonPlaceholder: {
|
||||
width: 40,
|
||||
},
|
||||
@@ -735,7 +728,7 @@ function createNotificationsStyles(colors: AppColors) {
|
||||
listContent: {
|
||||
flexGrow: 1,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 24,
|
||||
paddingBottom: 88,
|
||||
},
|
||||
listContentWide: {
|
||||
paddingHorizontal: 32,
|
||||
|
||||
@@ -106,12 +106,12 @@ export function createChatScreenStyles(colors: AppColors, dynamicStyles?: {
|
||||
height: 56,
|
||||
},
|
||||
backButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'transparent',
|
||||
marginLeft: -12,
|
||||
padding: 0,
|
||||
},
|
||||
headerCenter: {
|
||||
flex: 1,
|
||||
|
||||
@@ -157,32 +157,27 @@ function createConversationRowStyles(colors: AppColors) {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: colors.background.paper,
|
||||
marginHorizontal: spacing.md,
|
||||
marginTop: spacing.sm,
|
||||
borderRadius: borderRadius.lg,
|
||||
borderWidth: 0.5,
|
||||
borderColor: colors.divider + '40',
|
||||
backgroundColor: colors.background.default,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: colors.chat.borderLight,
|
||||
},
|
||||
conversationItemSelected: {
|
||||
backgroundColor: colors.primary.light + '12',
|
||||
borderColor: colors.primary.main + '60',
|
||||
borderWidth: 1.5,
|
||||
backgroundColor: colors.chat.surfaceMuted,
|
||||
},
|
||||
avatarContainer: {
|
||||
position: 'relative',
|
||||
},
|
||||
systemAvatar: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: borderRadius.md,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: borderRadius.full,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: colors.primary.main,
|
||||
},
|
||||
conversationContent: {
|
||||
flex: 1,
|
||||
marginLeft: spacing.md,
|
||||
marginLeft: spacing.lg,
|
||||
},
|
||||
conversationHeader: {
|
||||
flexDirection: 'row',
|
||||
@@ -197,49 +192,49 @@ function createConversationRowStyles(colors: AppColors) {
|
||||
officialBadge: {
|
||||
backgroundColor: colors.primary.main,
|
||||
borderRadius: borderRadius.sm,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
paddingHorizontal: 5,
|
||||
paddingVertical: 1,
|
||||
marginRight: spacing.xs,
|
||||
},
|
||||
officialBadgeText: {
|
||||
color: colors.primary.contrast,
|
||||
fontSize: 10,
|
||||
fontSize: 9,
|
||||
fontWeight: '800',
|
||||
},
|
||||
userName: {
|
||||
fontWeight: '700',
|
||||
fontWeight: '600',
|
||||
color: colors.text.primary,
|
||||
fontSize: 16,
|
||||
letterSpacing: 0.3,
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
groupIcon: {
|
||||
marginRight: 4,
|
||||
marginRight: 3,
|
||||
},
|
||||
memberCount: {
|
||||
fontSize: 12,
|
||||
fontSize: 13,
|
||||
color: colors.text.secondary,
|
||||
marginLeft: 2,
|
||||
fontWeight: '500',
|
||||
},
|
||||
pinnedIcon: {
|
||||
marginLeft: 6,
|
||||
marginLeft: 5,
|
||||
},
|
||||
groupAvatar: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
width: 56,
|
||||
height: 56,
|
||||
},
|
||||
groupAvatarPlaceholder: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.primary.main,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
timeText: {
|
||||
color: colors.text.secondary,
|
||||
color: colors.text.hint,
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
fontWeight: '400',
|
||||
},
|
||||
messageRow: {
|
||||
flexDirection: 'row',
|
||||
@@ -250,25 +245,26 @@ function createConversationRowStyles(colors: AppColors) {
|
||||
color: colors.text.secondary,
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
lineHeight: 20,
|
||||
},
|
||||
unreadMessageText: {
|
||||
color: colors.text.primary,
|
||||
fontWeight: '600',
|
||||
},
|
||||
unreadBadge: {
|
||||
minWidth: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
backgroundColor: colors.primary.main,
|
||||
minWidth: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.error.main,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: spacing.sm,
|
||||
paddingHorizontal: 6,
|
||||
paddingHorizontal: 5,
|
||||
},
|
||||
unreadBadgeText: {
|
||||
color: colors.primary.contrast,
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '800',
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -321,12 +317,12 @@ const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
|
||||
<View style={styles.avatarContainer}>
|
||||
{isSystemChannel ? (
|
||||
<View style={styles.systemAvatar}>
|
||||
<MaterialCommunityIcons name="bell-ring" size={24} color={colors.primary.contrast} />
|
||||
<MaterialCommunityIcons name="bell-ring" size={26} color={colors.primary.contrast} />
|
||||
</View>
|
||||
) : isGroupChat ? (
|
||||
<View style={styles.groupAvatar}>
|
||||
{displayAvatar ? (
|
||||
<Avatar source={displayAvatar} size={50} name={displayName} />
|
||||
<Avatar source={displayAvatar} size={56} name={displayName} />
|
||||
) : (
|
||||
<View style={styles.groupAvatarPlaceholder}>
|
||||
<MaterialCommunityIcons name="account-group" size={28} color={colors.primary.contrast} />
|
||||
@@ -334,7 +330,7 @@ const ConversationListRowInner: React.FC<ConversationListRowProps> = ({
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<Avatar source={displayAvatar} size={50} name={displayName} />
|
||||
<Avatar source={displayAvatar} size={56} name={displayName} />
|
||||
)}
|
||||
</View>
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/**
|
||||
* 编辑资料页 EditProfileScreen（响应式适配）
|
||||
* 编辑资料页 EditProfileScreen - Twitter/X 风格
|
||||
* 威友 - 编辑用户资料
|
||||
* 与用户资料页样式完全一致
|
||||
* 表单在宽屏下居中显示
|
||||
* 与 Twitter/X 个人资料编辑页样式一致
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
@@ -21,274 +20,199 @@ import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import {
|
||||
spacing,
|
||||
fontSizes,
|
||||
borderRadius,
|
||||
shadows,
|
||||
useAppColors,
|
||||
type AppColors,
|
||||
} from '../../theme';
|
||||
import { useAuthStore } from '../../stores';
|
||||
import { Avatar, Button, Text } from '../../components/common';
|
||||
import { Avatar, Text } from '../../components/common';
|
||||
import { authService, uploadService } from '../../services';
|
||||
import { useResponsive, useResponsiveSpacing } from '../../hooks';
|
||||
|
||||
// 内容最大宽度
|
||||
const CONTENT_MAX_WIDTH = 720;
|
||||
|
||||
function createEditProfileStyles(colors: AppColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
keyboardView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
padding: spacing.lg,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
keyboardView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: spacing.xl,
|
||||
},
|
||||
|
||||
// ===== 预览区域 - 与 UserProfileHeader 完全一致 =====
|
||||
previewContainer: {
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
coverContainer: {
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 14,
|
||||
},
|
||||
coverTouchable: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
gradient: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverUploadingOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
coverEditOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
coverEditText: {
|
||||
color: colors.text.inverse,
|
||||
fontSize: fontSizes.sm,
|
||||
marginTop: spacing.xs,
|
||||
fontWeight: '500',
|
||||
},
|
||||
waveDecoration: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 40,
|
||||
},
|
||||
wave: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: colors.background.paper,
|
||||
borderTopLeftRadius: 30,
|
||||
borderTopRightRadius: 30,
|
||||
},
|
||||
// ===== 封面区域 - Twitter 风格全宽 =====
|
||||
coverContainer: {
|
||||
position: 'relative',
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
coverTouchable: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
coverFallback: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: colors.primary.main,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
coverOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
|
||||
// 用户信息卡片
|
||||
profileCard: {
|
||||
backgroundColor: colors.background.paper,
|
||||
marginHorizontal: spacing.md,
|
||||
marginTop: -50,
|
||||
borderRadius: borderRadius.xl,
|
||||
padding: spacing.lg,
|
||||
},
|
||||
avatarWrapper: {
|
||||
alignItems: 'center',
|
||||
marginTop: -60,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
avatarContainer: {
|
||||
position: 'relative',
|
||||
padding: 4,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: 50,
|
||||
},
|
||||
avatarUploadingOverlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
borderRadius: 60,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
editAvatarButton: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: colors.primary.main,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: colors.background.paper,
|
||||
},
|
||||
userInfo: {
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
nickname: {
|
||||
marginBottom: spacing.xs,
|
||||
fontWeight: '700',
|
||||
},
|
||||
username: {
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
bio: {
|
||||
textAlign: 'center',
|
||||
marginTop: spacing.sm,
|
||||
lineHeight: 20,
|
||||
},
|
||||
bioPlaceholder: {
|
||||
textAlign: 'center',
|
||||
marginTop: spacing.sm,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
metaInfo: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: spacing.md,
|
||||
gap: spacing.sm,
|
||||
},
|
||||
metaTag: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.background.default,
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: spacing.xs,
|
||||
borderRadius: borderRadius.md,
|
||||
},
|
||||
metaTagText: {
|
||||
marginLeft: spacing.xs,
|
||||
fontSize: fontSizes.xs,
|
||||
},
|
||||
editHint: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: colors.background.default,
|
||||
borderRadius: borderRadius.md,
|
||||
paddingVertical: spacing.sm,
|
||||
gap: spacing.xs,
|
||||
},
|
||||
editHintText: {
|
||||
fontSize: fontSizes.xs,
|
||||
},
|
||||
// ===== 信息区 =====
|
||||
infoSection: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingBottom: spacing.md,
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
avatarActionRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
avatarWrapper: {
|
||||
// 负边距在 inline style 中计算
|
||||
},
|
||||
avatarContainer: {
|
||||
borderRadius: borderRadius.full,
|
||||
backgroundColor: colors.background.paper,
|
||||
padding: 3,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
},
|
||||
avatarOverlay: {
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
left: 3,
|
||||
right: 3,
|
||||
bottom: 3,
|
||||
borderRadius: borderRadius.full,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
editAvatarButton: {
|
||||
position: 'absolute',
|
||||
bottom: 4,
|
||||
right: 4,
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: colors.primary.main,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: colors.background.paper,
|
||||
},
|
||||
|
||||
// ===== 表单区域 =====
|
||||
formCard: {
|
||||
borderRadius: 14,
|
||||
padding: spacing.lg,
|
||||
marginBottom: spacing.lg,
|
||||
maxWidth: CONTENT_MAX_WIDTH,
|
||||
alignSelf: 'center',
|
||||
width: '100%',
|
||||
},
|
||||
sectionTitle: {
|
||||
marginBottom: spacing.lg,
|
||||
},
|
||||
formField: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
fieldIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.background.default,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: spacing.md,
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
fieldContent: {
|
||||
flex: 1,
|
||||
},
|
||||
fieldLabel: {
|
||||
marginBottom: spacing.xs,
|
||||
fontWeight: '500',
|
||||
},
|
||||
fieldInput: {
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.primary,
|
||||
paddingVertical: spacing.sm,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.divider,
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
disabledInput: {
|
||||
color: colors.text.disabled,
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: colors.divider,
|
||||
marginVertical: spacing.md,
|
||||
marginLeft: 56,
|
||||
},
|
||||
// 名字预览
|
||||
nameSection: {
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
nickname: {
|
||||
fontSize: fontSizes['2xl'],
|
||||
fontWeight: '800',
|
||||
color: colors.text.primary,
|
||||
marginBottom: 2,
|
||||
},
|
||||
username: {
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.hint,
|
||||
},
|
||||
|
||||
// 保存按钮
|
||||
buttonContainer: {
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
saveButton: {
|
||||
height: 50,
|
||||
backgroundColor: colors.primary.main,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
saveButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
saveButtonContent: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonIcon: {
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: colors.text.inverse,
|
||||
},
|
||||
// 编辑提示
|
||||
editHint: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: spacing.xs,
|
||||
gap: spacing.xs,
|
||||
},
|
||||
editHintText: {
|
||||
fontSize: fontSizes.xs,
|
||||
color: colors.text.hint,
|
||||
},
|
||||
|
||||
// ===== 表单区域 - Twitter 风格全宽卡片 =====
|
||||
formSection: {
|
||||
backgroundColor: colors.background.paper,
|
||||
marginTop: spacing.md,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.divider,
|
||||
},
|
||||
formField: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.md,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: colors.divider,
|
||||
},
|
||||
formFieldLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
fieldLabel: {
|
||||
fontSize: fontSizes.sm,
|
||||
fontWeight: '500',
|
||||
color: colors.text.secondary,
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
fieldInput: {
|
||||
fontSize: fontSizes.md,
|
||||
color: colors.text.primary,
|
||||
paddingVertical: spacing.xs,
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
disabledInput: {
|
||||
color: colors.text.disabled,
|
||||
},
|
||||
charCount: {
|
||||
textAlign: 'right',
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
|
||||
// 保存按钮
|
||||
buttonContainer: {
|
||||
marginTop: spacing.lg,
|
||||
paddingHorizontal: spacing.lg,
|
||||
},
|
||||
saveButton: {
|
||||
height: 48,
|
||||
backgroundColor: colors.text.primary,
|
||||
borderRadius: borderRadius.full,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
saveButtonDisabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: colors.background.paper,
|
||||
fontSize: fontSizes.md,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
type EditProfileSheet = ReturnType<typeof createEditProfileStyles>;
|
||||
|
||||
|
||||
// 表单输入项组件
|
||||
interface FormFieldProps {
|
||||
icon: string;
|
||||
label: string;
|
||||
value: string;
|
||||
onChangeText: (text: string) => void;
|
||||
@@ -301,10 +225,10 @@ interface FormFieldProps {
|
||||
editable?: boolean;
|
||||
sheet: EditProfileSheet;
|
||||
colors: AppColors;
|
||||
isLast?: boolean;
|
||||
}
|
||||
|
||||
const FormField: React.FC<FormFieldProps> = ({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
onChangeText,
|
||||
@@ -317,32 +241,33 @@ const FormField: React.FC<FormFieldProps> = ({
|
||||
editable = true,
|
||||
sheet,
|
||||
colors,
|
||||
isLast = false,
|
||||
}) => {
|
||||
return (
|
||||
<View style={sheet.formField}>
|
||||
<View style={sheet.fieldIconContainer}>
|
||||
<MaterialCommunityIcons name={icon as any} size={22} color={colors.primary.main} />
|
||||
</View>
|
||||
<View style={sheet.fieldContent}>
|
||||
<Text variant="caption" style={sheet.fieldLabel}>{label}</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
sheet.fieldInput,
|
||||
multiline && sheet.textArea,
|
||||
!editable && sheet.disabledInput
|
||||
]}
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={colors.text.hint}
|
||||
maxLength={maxLength}
|
||||
multiline={multiline}
|
||||
numberOfLines={numberOfLines}
|
||||
autoCapitalize={autoCapitalize}
|
||||
keyboardType={keyboardType}
|
||||
editable={editable}
|
||||
/>
|
||||
</View>
|
||||
<View style={[sheet.formField, isLast && sheet.formFieldLast]}>
|
||||
<Text style={sheet.fieldLabel}>{label}</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
sheet.fieldInput,
|
||||
multiline && sheet.textArea,
|
||||
!editable && sheet.disabledInput
|
||||
]}
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={colors.text.hint}
|
||||
maxLength={maxLength}
|
||||
multiline={multiline}
|
||||
numberOfLines={numberOfLines}
|
||||
autoCapitalize={autoCapitalize}
|
||||
keyboardType={keyboardType}
|
||||
editable={editable}
|
||||
/>
|
||||
{maxLength && (
|
||||
<Text variant="caption" color={colors.text.hint} style={sheet.charCount}>
|
||||
{value.length}/{maxLength}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -353,7 +278,7 @@ export const EditProfileScreen: React.FC = () => {
|
||||
const navigation = useNavigation();
|
||||
const { currentUser, updateUser } = useAuthStore();
|
||||
const { isWideScreen, isMobile, width } = useResponsive();
|
||||
const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
|
||||
const responsivePadding = useResponsiveSpacing({ xs: 0, sm: 0, md: 0, lg: 24, xl: 32 });
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const [nickname, setNickname] = useState(currentUser?.nickname || '');
|
||||
@@ -367,16 +292,13 @@ export const EditProfileScreen: React.FC = () => {
|
||||
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
||||
const [uploadingCover, setUploadingCover] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
// 底部间距，避免被 TabBar 遮挡
|
||||
|
||||
const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.lg;
|
||||
const coverHeight = isWideScreen ? Math.min((width * 10) / 16, 320) : (width * 10) / 16;
|
||||
const avatarSize = isWideScreen ? 120 : 88;
|
||||
|
||||
// 根据屏幕宽度计算封面高度
|
||||
const coverHeight = isWideScreen ? Math.min((width * 9) / 16, 300) : (width * 9) / 16;
|
||||
|
||||
// 选择头图
|
||||
const handlePickCover = async () => {
|
||||
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
|
||||
if (!permissionResult.granted) {
|
||||
Alert.alert('权限不足', '需要访问相册权限来选择头图');
|
||||
return;
|
||||
@@ -416,10 +338,8 @@ export const EditProfileScreen: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 选择头像
|
||||
const handlePickAvatar = async () => {
|
||||
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
|
||||
if (!permissionResult.granted) {
|
||||
Alert.alert('权限不足', '需要访问相册权限来选择头像');
|
||||
return;
|
||||
@@ -459,7 +379,6 @@ export const EditProfileScreen: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 保存资料
|
||||
const handleSave = async () => {
|
||||
if (!nickname.trim()) {
|
||||
Alert.alert('错误', '昵称不能为空');
|
||||
@@ -512,69 +431,56 @@ export const EditProfileScreen: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染表单内容
|
||||
const renderFormContent = () => (
|
||||
<>
|
||||
{/* ===== 用户资料预览区域 - 与 UserProfileHeader 完全一致 ===== */}
|
||||
<View style={styles.previewContainer}>
|
||||
{/* 封面背景 */}
|
||||
<View style={[styles.coverContainer, { height: coverHeight }]}>
|
||||
<TouchableOpacity
|
||||
style={styles.coverTouchable}
|
||||
onPress={handlePickCover}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{coverUrl ? (
|
||||
<Image
|
||||
source={{ uri: coverUrl }}
|
||||
style={styles.coverImage}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
) : (
|
||||
<LinearGradient
|
||||
colors={['#FF8F66', '#FF6B35', '#E5521D']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.gradient}
|
||||
/>
|
||||
)}
|
||||
{/* ===== 封面区域 - Twitter 风格全宽 ===== */}
|
||||
<View style={[styles.coverContainer, { height: coverHeight }]}>
|
||||
<TouchableOpacity
|
||||
style={styles.coverTouchable}
|
||||
onPress={handlePickCover}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{coverUrl ? (
|
||||
<Image
|
||||
source={{ uri: coverUrl }}
|
||||
style={styles.coverImage}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.coverFallback}>
|
||||
<MaterialCommunityIcons name="image-outline" size={48} color="rgba(255,255,255,0.4)" />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 头图编辑蒙版 */}
|
||||
{uploadingCover ? (
|
||||
<View style={styles.coverUploadingOverlay}>
|
||||
<MaterialCommunityIcons name="loading" size={32} color={colors.text.inverse} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.coverEditOverlay}>
|
||||
<MaterialCommunityIcons name="camera" size={28} color={colors.text.inverse} />
|
||||
<Text style={styles.coverEditText}>更换头图</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{uploadingCover ? (
|
||||
<View style={styles.coverOverlay}>
|
||||
<MaterialCommunityIcons name="loading" size={32} color={colors.text.inverse} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.coverOverlay}>
|
||||
<MaterialCommunityIcons name="camera" size={28} color={colors.text.inverse} />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 装饰性波浪 */}
|
||||
<View style={styles.waveDecoration}>
|
||||
<View style={styles.wave} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 用户信息卡片 */}
|
||||
<View style={styles.profileCard}>
|
||||
{/* 悬浮头像 */}
|
||||
<View style={styles.avatarWrapper}>
|
||||
{/* ===== 用户信息区 - Twitter 风格左对齐 ===== */}
|
||||
<View style={styles.infoSection}>
|
||||
<View style={styles.avatarActionRow}>
|
||||
<View style={[styles.avatarWrapper, { marginTop: -avatarSize / 2 }]}>
|
||||
<TouchableOpacity
|
||||
style={styles.avatarContainer}
|
||||
style={[styles.avatarContainer, { width: avatarSize, height: avatarSize }]}
|
||||
onPress={handlePickAvatar}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Avatar
|
||||
source={avatar || null}
|
||||
size={isWideScreen ? 110 : 90}
|
||||
size={avatarSize - 6}
|
||||
name={nickname}
|
||||
/>
|
||||
{uploadingAvatar && (
|
||||
<View style={styles.avatarUploadingOverlay}>
|
||||
<MaterialCommunityIcons name="loading" size={32} color={colors.text.inverse} />
|
||||
<View style={styles.avatarOverlay}>
|
||||
<MaterialCommunityIcons name="loading" size={24} color={colors.text.inverse} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.editAvatarButton}>
|
||||
@@ -582,85 +488,22 @@ export const EditProfileScreen: React.FC = () => {
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 用户名和简介 */}
|
||||
<View style={styles.userInfo}>
|
||||
<Text variant="h2" style={styles.nickname}>
|
||||
{nickname || currentUser?.nickname || ''}
|
||||
</Text>
|
||||
<Text variant="caption" color={colors.text.secondary} style={styles.username}>
|
||||
@{currentUser?.username || ''}
|
||||
</Text>
|
||||
<View style={styles.nameSection}>
|
||||
<Text style={styles.nickname}>{nickname || currentUser?.nickname || ''}</Text>
|
||||
<Text style={styles.username}>@{currentUser?.username || ''}</Text>
|
||||
</View>
|
||||
|
||||
{bio ? (
|
||||
<Text variant="body" color={colors.text.secondary} style={styles.bio}>
|
||||
{bio}
|
||||
</Text>
|
||||
) : (
|
||||
<Text variant="body" color={colors.text.hint} style={styles.bioPlaceholder}>
|
||||
这个人很懒，还没有写简介~
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 个人信息标签 */}
|
||||
<View style={styles.metaInfo}>
|
||||
{location ? (
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="map-marker-outline" size={12} color={colors.primary.main} />
|
||||
<Text variant="caption" color={colors.primary.main} style={styles.metaTagText}>
|
||||
{location}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="map-marker-outline" size={12} color={colors.text.hint} />
|
||||
<Text variant="caption" color={colors.text.hint} style={styles.metaTagText}>
|
||||
未设置地区
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{website ? (
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="link-variant" size={12} color={colors.info.main} />
|
||||
<Text variant="caption" color={colors.info.main} style={styles.metaTagText}>
|
||||
{typeof website === 'string' ? website.replace(/^https?:\/\//, '') : ''}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="link-variant" size={12} color={colors.text.hint} />
|
||||
<Text variant="caption" color={colors.text.hint} style={styles.metaTagText}>
|
||||
未设置网站
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.metaTag}>
|
||||
<MaterialCommunityIcons name="calendar-outline" size={12} color={colors.text.secondary} />
|
||||
<Text variant="caption" color={colors.text.secondary} style={styles.metaTagText}>
|
||||
{`加入于 ${new Date(currentUser?.created_at || Date.now()).getFullYear()}年`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 编辑提示 */}
|
||||
<View style={styles.editHint}>
|
||||
<MaterialCommunityIcons name="information-outline" size={14} color={colors.text.hint} />
|
||||
<Text variant="caption" color={colors.text.hint} style={styles.editHintText}>
|
||||
点击头像或头图可更换照片
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.editHint}>
|
||||
<MaterialCommunityIcons name="information-outline" size={12} color={colors.text.hint} />
|
||||
<Text style={styles.editHintText}>点击头像或头图可更换照片</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ===== 表单区域 ===== */}
|
||||
<View style={styles.formCard}>
|
||||
<Text variant="body" style={[styles.sectionTitle, { fontWeight: '600' }]}>
|
||||
个人资料
|
||||
</Text>
|
||||
|
||||
{/* ===== 表单区域 - Twitter 风格全宽分组 ===== */}
|
||||
<View style={styles.formSection}>
|
||||
<FormField
|
||||
icon="account-outline"
|
||||
label="昵称"
|
||||
value={nickname}
|
||||
onChangeText={setNickname}
|
||||
@@ -670,14 +513,11 @@ export const EditProfileScreen: React.FC = () => {
|
||||
colors={colors}
|
||||
/>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<FormField
|
||||
icon="information-outline"
|
||||
label="个人简介"
|
||||
value={bio}
|
||||
onChangeText={setBio}
|
||||
placeholder="介绍一下自己，让大家更了解你"
|
||||
placeholder="介绍一下自己"
|
||||
maxLength={100}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
@@ -685,10 +525,7 @@ export const EditProfileScreen: React.FC = () => {
|
||||
colors={colors}
|
||||
/>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<FormField
|
||||
icon="map-marker-outline"
|
||||
label="地区"
|
||||
value={location}
|
||||
onChangeText={setLocation}
|
||||
@@ -698,10 +535,7 @@ export const EditProfileScreen: React.FC = () => {
|
||||
colors={colors}
|
||||
/>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<FormField
|
||||
icon="link-variant"
|
||||
label="个人网站"
|
||||
value={website}
|
||||
onChangeText={setWebsite}
|
||||
@@ -711,17 +545,13 @@ export const EditProfileScreen: React.FC = () => {
|
||||
keyboardType="url"
|
||||
sheet={styles}
|
||||
colors={colors}
|
||||
isLast
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 联系方式区域 */}
|
||||
<View style={styles.formCard}>
|
||||
<Text variant="body" style={[styles.sectionTitle, { fontWeight: '600' }]}>
|
||||
联系方式
|
||||
</Text>
|
||||
|
||||
<View style={[styles.formSection, { marginTop: spacing.md }]}>
|
||||
<FormField
|
||||
icon="phone-outline"
|
||||
label="手机号"
|
||||
value={phone}
|
||||
onChangeText={setPhone}
|
||||
@@ -732,10 +562,7 @@ export const EditProfileScreen: React.FC = () => {
|
||||
colors={colors}
|
||||
/>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<FormField
|
||||
icon="email-outline"
|
||||
label="邮箱"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
@@ -745,6 +572,7 @@ export const EditProfileScreen: React.FC = () => {
|
||||
keyboardType="email-address"
|
||||
sheet={styles}
|
||||
colors={colors}
|
||||
isLast
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -759,26 +587,9 @@ export const EditProfileScreen: React.FC = () => {
|
||||
disabled={saving || uploadingAvatar || uploadingCover}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<View style={styles.saveButtonContent}>
|
||||
{saving ? (
|
||||
<MaterialCommunityIcons
|
||||
name="loading"
|
||||
size={20}
|
||||
color={colors.text.inverse}
|
||||
style={styles.buttonIcon}
|
||||
/>
|
||||
) : (
|
||||
<MaterialCommunityIcons
|
||||
name="check"
|
||||
size={20}
|
||||
color={colors.text.inverse}
|
||||
style={styles.buttonIcon}
|
||||
/>
|
||||
)}
|
||||
<Text variant="body" style={[styles.saveButtonText, { fontWeight: '600' }]}>
|
||||
{saving ? '保存中...' : '保存修改'}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{saving ? '保存中...' : '保存修改'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</>
|
||||
@@ -801,5 +612,4 @@ export const EditProfileScreen: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default EditProfileScreen;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* 设置页 SettingsScreen（响应式适配）
|
||||
* 设置页 SettingsScreen - Twitter/X 风格
|
||||
* 威友 - 应用设置
|
||||
* 在宽屏下居中显示，最大宽度限制
|
||||
* 采用扁平化设计，全宽布局，简洁分割线
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
@@ -31,8 +31,7 @@ import { useResponsive, useResponsiveSpacing } from '../../hooks';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import * as hrefs from '../../navigation/hrefs';
|
||||
|
||||
// 设置卡片最大宽度
|
||||
const SETTINGS_CARD_MAX_WIDTH = 720;
|
||||
const APP_VERSION = Constants.expoConfig?.version || '1.0.0';
|
||||
|
||||
interface SettingsItem {
|
||||
key: string;
|
||||
@@ -44,12 +43,9 @@ interface SettingsItem {
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
const APP_VERSION = Constants.expoConfig?.version || '1.0.0';
|
||||
|
||||
const SETTINGS_GROUPS_BASE = [
|
||||
{
|
||||
title: '账号与安全',
|
||||
icon: 'shield-check-outline',
|
||||
items: [
|
||||
{ key: 'edit_profile', title: '编辑资料', icon: 'account-edit-outline', showArrow: true },
|
||||
{ key: 'verification', title: '身份认证', icon: 'check-decagram', showArrow: true, subtitle: '获得认证标识，解锁更多功能' },
|
||||
@@ -61,7 +57,6 @@ const SETTINGS_GROUPS_BASE = [
|
||||
},
|
||||
{
|
||||
title: '通知与通用',
|
||||
icon: 'bell-outline',
|
||||
items: [
|
||||
{ key: 'notification_settings', title: '通知设置', icon: 'bell-cog-outline', showArrow: true, subtitle: '推送、震动、提示音' },
|
||||
{ key: 'data_storage', title: '数据与存储', icon: 'database-outline', showArrow: true },
|
||||
@@ -69,7 +64,6 @@ const SETTINGS_GROUPS_BASE = [
|
||||
},
|
||||
{
|
||||
title: '关于与帮助',
|
||||
icon: 'information-outline',
|
||||
items: [
|
||||
{ key: 'about', title: '关于我们', icon: 'information-outline', showArrow: true, subtitle: `版本 ${APP_VERSION}` },
|
||||
{ key: 'help', title: '帮助与反馈', icon: 'help-circle-outline', showArrow: true },
|
||||
@@ -81,39 +75,38 @@ function createSettingsStyles(colors: AppColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background.paper,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingVertical: spacing.lg,
|
||||
paddingVertical: spacing.sm,
|
||||
},
|
||||
groupContainer: {
|
||||
marginBottom: spacing['2xl'],
|
||||
maxWidth: SETTINGS_CARD_MAX_WIDTH,
|
||||
alignSelf: 'center',
|
||||
width: '100%',
|
||||
marginBottom: spacing.xl,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: colors.divider,
|
||||
},
|
||||
groupHeader: {
|
||||
paddingHorizontal: spacing['2xl'],
|
||||
marginBottom: spacing.sm,
|
||||
marginTop: spacing.sm,
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.sm,
|
||||
backgroundColor: colors.background.default,
|
||||
},
|
||||
groupTitle: {
|
||||
fontWeight: '600',
|
||||
fontSize: fontSizes.sm,
|
||||
color: colors.text.secondary,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: spacing['2xl'],
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: spacing.lg,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: colors.divider,
|
||||
backgroundColor: colors.background.paper,
|
||||
},
|
||||
settingItemFirst: {},
|
||||
settingItemLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
@@ -123,13 +116,17 @@ function createSettingsStyles(colors: AppColors) {
|
||||
flex: 1,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: borderRadius.md,
|
||||
backgroundColor: colors.background.default,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: spacing.lg,
|
||||
marginRight: spacing.md,
|
||||
},
|
||||
dangerIconContainer: {
|
||||
backgroundColor: colors.error.light + '20',
|
||||
},
|
||||
dangerIconContainer: {},
|
||||
settingContent: {
|
||||
flex: 1,
|
||||
},
|
||||
@@ -141,22 +138,21 @@ function createSettingsStyles(colors: AppColors) {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: spacing.lg,
|
||||
marginBottom: spacing['2xl'],
|
||||
paddingVertical: 16,
|
||||
marginHorizontal: spacing['2xl'],
|
||||
borderRadius: 14,
|
||||
marginBottom: spacing.xl,
|
||||
paddingVertical: 14,
|
||||
marginHorizontal: spacing.lg,
|
||||
borderRadius: borderRadius.full,
|
||||
gap: spacing.sm,
|
||||
maxWidth: SETTINGS_CARD_MAX_WIDTH,
|
||||
alignSelf: 'center',
|
||||
width: '100%',
|
||||
backgroundColor: colors.error.light + '20',
|
||||
backgroundColor: colors.background.paper,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.divider,
|
||||
},
|
||||
logoutText: {
|
||||
fontWeight: '600',
|
||||
fontWeight: '700',
|
||||
},
|
||||
footer: {
|
||||
alignItems: 'center',
|
||||
marginTop: spacing.xl,
|
||||
marginTop: spacing.md,
|
||||
paddingBottom: spacing.xl,
|
||||
},
|
||||
copyright: {
|
||||
@@ -170,7 +166,7 @@ export const SettingsScreen: React.FC = () => {
|
||||
const { logout } = useAuthStore();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { isMobile } = useResponsive();
|
||||
const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
|
||||
const responsivePadding = useResponsiveSpacing({ xs: 0, sm: 0, md: 0, lg: 24, xl: 32 });
|
||||
const colors = useAppColors();
|
||||
const styles = useMemo(() => createSettingsStyles(colors), [colors]);
|
||||
const themePreference = useThemePreference();
|
||||
@@ -184,7 +180,6 @@ export const SettingsScreen: React.FC = () => {
|
||||
return [
|
||||
{
|
||||
title: '个性化',
|
||||
icon: 'palette-outline',
|
||||
items: [
|
||||
{
|
||||
key: 'chat_settings',
|
||||
@@ -307,16 +302,16 @@ export const SettingsScreen: React.FC = () => {
|
||||
<View style={[styles.iconContainer, item.danger && styles.dangerIconContainer]}>
|
||||
<MaterialCommunityIcons
|
||||
name={item.icon as any}
|
||||
size={22}
|
||||
size={20}
|
||||
color={item.danger ? colors.error.main : colors.text.secondary}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.settingContent}>
|
||||
<Text variant="body" color={item.danger ? colors.error.main : colors.text.primary}>
|
||||
<Text variant="body" color={item.danger ? colors.error.main : colors.text.primary} style={{ fontWeight: '500' }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
{item.subtitle && (
|
||||
<Text variant="caption" color={colors.text.secondary} style={styles.subtitle}>
|
||||
<Text variant="caption" color={colors.text.hint} style={styles.subtitle}>
|
||||
{item.subtitle}
|
||||
</Text>
|
||||
)}
|
||||
@@ -329,13 +324,13 @@ export const SettingsScreen: React.FC = () => {
|
||||
);
|
||||
|
||||
const renderGroup = (group: (typeof settingsGroups)[0]) => (
|
||||
<View key={group.title} style={styles.groupContainer}>
|
||||
<View key={group.title}>
|
||||
<View style={styles.groupHeader}>
|
||||
<Text variant="caption" style={styles.groupTitle}>
|
||||
{group.title}
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<View style={styles.groupContainer}>
|
||||
{group.items.map((item, index) => renderSettingItem(item, index, group.items.length))}
|
||||
</View>
|
||||
</View>
|
||||
@@ -345,9 +340,9 @@ export const SettingsScreen: React.FC = () => {
|
||||
<TouchableOpacity
|
||||
style={styles.logoutButton}
|
||||
onPress={() => handleItemPress('logout')}
|
||||
activeOpacity={0.7}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<MaterialCommunityIcons name="logout-variant" size={20} color={colors.error.main} />
|
||||
<MaterialCommunityIcons name="logout-variant" size={18} color={colors.error.main} />
|
||||
<Text variant="body" color={colors.error.main} style={styles.logoutText}>
|
||||
退出登录
|
||||
</Text>
|
||||
@@ -356,11 +351,8 @@ export const SettingsScreen: React.FC = () => {
|
||||
|
||||
const renderContent = () => (
|
||||
<>
|
||||
{/* 设置分组 */}
|
||||
{settingsGroups.map((group) => renderGroup(group))}
|
||||
|
||||
{renderLogoutButton()}
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text variant="caption" color={colors.text.hint}>
|
||||
威友 v{APP_VERSION}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* 统一的用户主页组件
|
||||
* 威友 - 支持两种模式：self（当前用户）和 other（其他用户）
|
||||
* 采用现代卡片式设计，优化视觉层次和交互体验
|
||||
* 统一的用户主页组件 - Twitter/X 风格
|
||||
* 支持两种模式：self（当前用户）和 other（其他用户）
|
||||
* 采用 Twitter/X 扁平化设计，全宽布局，无边框卡片
|
||||
* 支持桌面端双栏布局
|
||||
*/
|
||||
|
||||
@@ -29,7 +29,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
const colors = useAppColors();
|
||||
const sharedStyles = useMemo(() => createSharedProfileStyles(colors), [colors]);
|
||||
const { isDesktop, isTablet } = useResponsive();
|
||||
|
||||
|
||||
const {
|
||||
user,
|
||||
posts,
|
||||
@@ -45,14 +45,15 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
handleFollowingPress,
|
||||
handleFollowersPress,
|
||||
handleMessage,
|
||||
handleMore,
|
||||
handleBlock,
|
||||
isBlocked,
|
||||
handleSettings,
|
||||
handleEditProfile,
|
||||
isCurrentUser,
|
||||
currentUser,
|
||||
} = useUserProfile({ mode, userId, isDesktop, isTablet });
|
||||
|
||||
// 渲染帖子列表
|
||||
|
||||
// 渲染帖子列表 - Twitter 风格无边框
|
||||
const renderPostList = useCallback((postList: Post[], emptyTitle: string, emptyDesc: string) => {
|
||||
if (postList.length === 0) {
|
||||
return (
|
||||
@@ -64,7 +65,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View style={sharedStyles.postsContainer}>
|
||||
{postList.map((post, index) => {
|
||||
@@ -85,11 +86,11 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
</View>
|
||||
);
|
||||
}, [currentUser?.id, handlePostAction, activeTab]);
|
||||
|
||||
|
||||
// 渲染内容
|
||||
const renderContent = useCallback(() => {
|
||||
if (loading) return <Loading />;
|
||||
|
||||
|
||||
if (activeTab === 0) {
|
||||
return renderPostList(
|
||||
posts,
|
||||
@@ -97,7 +98,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
mode === 'self' ? '分享你的想法，发布第一条帖子吧' : ''
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (activeTab === 1) {
|
||||
return renderPostList(
|
||||
favorites,
|
||||
@@ -105,29 +106,30 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
mode === 'self' ? '发现喜欢的内容，点击收藏按钮保存' : ''
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
}, [loading, activeTab, posts, favorites, mode, renderPostList]);
|
||||
|
||||
|
||||
// 渲染用户信息头部
|
||||
const renderUserHeader = useMemo(() => {
|
||||
if (!user) return null;
|
||||
|
||||
|
||||
return (
|
||||
<UserProfileHeader
|
||||
user={user}
|
||||
isCurrentUser={isCurrentUser}
|
||||
isBlocked={isBlocked}
|
||||
onFollow={handleFollow}
|
||||
onSettings={handleSettings}
|
||||
onEditProfile={handleEditProfile}
|
||||
onMessage={handleMessage}
|
||||
onMore={handleMore}
|
||||
onBlock={handleBlock}
|
||||
onFollowingPress={handleFollowingPress}
|
||||
onFollowersPress={handleFollowersPress}
|
||||
/>
|
||||
);
|
||||
}, [user, isCurrentUser, handleFollow, handleSettings, handleEditProfile, handleMessage, handleMore, handleFollowingPress, handleFollowersPress]);
|
||||
|
||||
}, [user, isCurrentUser, isBlocked, handleFollow, handleSettings, handleEditProfile, handleMessage, handleBlock, handleFollowingPress, handleFollowersPress]);
|
||||
|
||||
// 渲染 TabBar 和内容
|
||||
const renderTabBarAndContent = useMemo(() => (
|
||||
<>
|
||||
@@ -145,7 +147,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
</View>
|
||||
</>
|
||||
), [activeTab, renderContent]);
|
||||
|
||||
|
||||
// 未登录/用户不存在状态
|
||||
if (mode === 'self' && !currentUser) {
|
||||
return (
|
||||
@@ -158,7 +160,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (mode === 'other' && !user && !loading) {
|
||||
return (
|
||||
<SafeAreaView style={sharedStyles.container} edges={['bottom']}>
|
||||
@@ -170,14 +172,14 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const safeAreaEdges = hasHeader ? ['bottom'] : (mode === 'self' ? ['top', 'bottom'] : ['bottom']);
|
||||
|
||||
|
||||
// 桌面端使用双栏布局
|
||||
if (isDesktop || isTablet) {
|
||||
return (
|
||||
<SafeAreaView style={sharedStyles.container} edges={safeAreaEdges as any}>
|
||||
<ResponsiveContainer maxWidth={1400}>
|
||||
<ResponsiveContainer maxWidth={1200}>
|
||||
<View style={sharedStyles.desktopContainer}>
|
||||
{/* 左侧：用户信息 */}
|
||||
<View style={sharedStyles.desktopSidebar}>
|
||||
@@ -196,7 +198,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
{renderUserHeader}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
|
||||
{/* 右侧：帖子列表 */}
|
||||
<View style={sharedStyles.desktopContent}>
|
||||
<ScrollView
|
||||
@@ -211,7 +213,7 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// 移动端使用单栏布局
|
||||
return (
|
||||
<SafeAreaView style={sharedStyles.container} edges={safeAreaEdges as any}>
|
||||
@@ -234,4 +236,4 @@ export const UserProfileScreen: React.FC<UserProfileScreenProps> = ({ mode, user
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfileScreen;
|
||||
export default UserProfileScreen;
|
||||
|
||||
@@ -7,7 +7,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { spacing, type AppColors } from '../../theme';
|
||||
import { spacing, borderRadius, type AppColors } from '../../theme';
|
||||
import { Post, User } from '../../types';
|
||||
import { useUserStore } from '../../stores';
|
||||
import { useCurrentUser } from '../../stores/auth';
|
||||
@@ -54,7 +54,7 @@ export interface UseUserProfileReturn {
|
||||
|
||||
// 仅 other 模式
|
||||
handleMessage?: () => Promise<void>;
|
||||
handleMore?: () => void;
|
||||
handleBlock?: () => Promise<void>;
|
||||
|
||||
// 仅 self 模式
|
||||
handleSettings?: () => void;
|
||||
@@ -356,53 +356,28 @@ case 'like':
|
||||
}
|
||||
}, [user, router]);
|
||||
|
||||
// 更多操作（仅 other 模式）
|
||||
const handleMore = useCallback(() => {
|
||||
// 更多操作（仅 other 模式）- 由 UserProfileHeader 内部下拉菜单触发
|
||||
const handleBlock = useCallback(async () => {
|
||||
if (!user) return;
|
||||
|
||||
const { Alert } = require('react-native');
|
||||
Alert.alert(
|
||||
'更多操作',
|
||||
undefined,
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: isBlocked ? '取消拉黑' : '拉黑用户',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
Alert.alert(
|
||||
isBlocked ? '确认取消拉黑' : '确认拉黑',
|
||||
isBlocked
|
||||
? '取消拉黑后，对方可以重新与你建立关系。'
|
||||
: '拉黑后，对方将无法给你发送私聊消息，且会互相移除关注关系。',
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
text: '确定',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const ok = isBlocked
|
||||
? await authService.unblockUser(user.id)
|
||||
: await authService.blockUser(user.id);
|
||||
if (!ok) {
|
||||
Alert.alert('失败', isBlocked ? '取消拉黑失败，请稍后重试' : '拉黑失败，请稍后重试');
|
||||
return;
|
||||
}
|
||||
setUser(prev =>
|
||||
prev
|
||||
? { ...prev, is_following: false, is_following_me: false }
|
||||
: prev
|
||||
);
|
||||
setIsBlocked(!isBlocked);
|
||||
Alert.alert('成功', isBlocked ? '已取消拉黑' : '已拉黑该用户');
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const ok = isBlocked
|
||||
? await authService.unblockUser(user.id)
|
||||
: await authService.blockUser(user.id);
|
||||
if (!ok) {
|
||||
const { showDialog } = require('../../services/ui');
|
||||
showDialog({
|
||||
title: '失败',
|
||||
message: isBlocked ? '取消拉黑失败，请稍后重试' : '拉黑失败，请稍后重试',
|
||||
actions: [{ text: '确定' }],
|
||||
});
|
||||
return;
|
||||
}
|
||||
setUser(prev =>
|
||||
prev
|
||||
? { ...prev, is_following: false, is_following_me: false }
|
||||
: prev
|
||||
);
|
||||
setIsBlocked(!isBlocked);
|
||||
}, [user, isBlocked]);
|
||||
|
||||
// 设置页跳转（仅 self 模式）
|
||||
@@ -444,7 +419,7 @@ case 'like':
|
||||
handleFollowersPress,
|
||||
handlePostAction,
|
||||
handleMessage: mode === 'other' ? handleMessage : undefined,
|
||||
handleMore: mode === 'other' ? handleMore : undefined,
|
||||
handleBlock: mode === 'other' ? handleBlock : undefined,
|
||||
handleSettings: mode === 'self' ? handleSettings : undefined,
|
||||
handleEditProfile: mode === 'self' ? handleEditProfile : undefined,
|
||||
isCurrentUser: mode === 'self',
|
||||
@@ -474,18 +449,21 @@ export function createSharedProfileStyles(colors: AppColors) {
|
||||
desktopContent: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
backgroundColor: colors.background.paper,
|
||||
borderRadius: borderRadius.xl,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
desktopScrollContent: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
tabBarContainer: {
|
||||
marginTop: spacing.xs,
|
||||
marginBottom: 2,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
},
|
||||
contentContainer: {
|
||||
flex: 1,
|
||||
minHeight: 350,
|
||||
paddingTop: spacing.xs,
|
||||
paddingTop: 0,
|
||||
},
|
||||
postsContainer: {
|
||||
paddingHorizontal: spacing.md,
|
||||
|
||||
@@ -1156,7 +1156,7 @@ function createScheduleStyles(colors: AppColors) {
|
||||
height: 40,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginLeft: spacing.sm,
|
||||
marginLeft: -8,
|
||||
},
|
||||
settingsButton: {
|
||||
width: 40,
|
||||
|
||||
@@ -51,14 +51,25 @@ TaskManager.defineTask(BACKGROUND_SYNC_TASK, async () => {
|
||||
*/
|
||||
async function syncMessages(): Promise<void> {
|
||||
try {
|
||||
// 同步未读数
|
||||
// 同步会话未读数
|
||||
const unreadData = await messageService.getUnreadCount();
|
||||
const totalUnread = unreadData?.total_unread_count ?? 0;
|
||||
|
||||
// 更新前台服务通知
|
||||
await backgroundSyncManager.updateNotification(totalUnread);
|
||||
// 同步系统消息未读数
|
||||
let systemUnread = 0;
|
||||
try {
|
||||
const sysUnreadData = await messageService.getSystemUnreadCount();
|
||||
systemUnread = sysUnreadData?.unread_count ?? 0;
|
||||
} catch {
|
||||
// 忽略系统未读获取失败
|
||||
}
|
||||
|
||||
console.log('[BackgroundService] 同步完成, 未读数:', totalUnread);
|
||||
const combinedTotal = totalUnread + systemUnread;
|
||||
|
||||
// 更新前台服务通知
|
||||
await backgroundSyncManager.updateNotification(combinedTotal);
|
||||
|
||||
console.log('[BackgroundService] 同步完成, 会话未读:', totalUnread, '系统未读:', systemUnread);
|
||||
} catch (error) {
|
||||
console.error('[BackgroundService] 同步失败:', error);
|
||||
}
|
||||
|
||||
@@ -172,6 +172,7 @@ export interface WSNotificationMessage {
|
||||
category?: MessageCategory;
|
||||
system_type?: SystemMessageType;
|
||||
extra_data?: SystemMessageExtraData;
|
||||
is_read?: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -614,6 +615,12 @@ class WebSocketService {
|
||||
type: 'notification',
|
||||
id: String(payload.id ?? ''),
|
||||
content: payload.content || '',
|
||||
sender_id: payload.sender_id,
|
||||
receiver_id: payload.receiver_id,
|
||||
category: payload.category,
|
||||
system_type: payload.system_type,
|
||||
extra_data: payload.extra_data,
|
||||
is_read: !!payload.is_read,
|
||||
created_at: payload.created_at || new Date().toISOString(),
|
||||
};
|
||||
this.emit('notification', m);
|
||||
|
||||
@@ -54,6 +54,8 @@ class SystemNotificationService {
|
||||
private isInitialized: boolean = false;
|
||||
private appStateSubscription: any = null;
|
||||
private currentAppState: AppStateStatus = 'active';
|
||||
private shownNotificationIds: Set<string> = new Set();
|
||||
private static readonly MAX_DEDUP_SIZE = 500;
|
||||
|
||||
async initialize(): Promise<boolean> {
|
||||
if (this.isInitialized) {
|
||||
@@ -174,6 +176,32 @@ class SystemNotificationService {
|
||||
if (!getNotificationPreferencesSync().pushEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const msgId = String(message.id || '');
|
||||
if (msgId && this.shownNotificationIds.has(msgId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ('is_read' in message && (message as any).is_read) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (msgId) {
|
||||
this.shownNotificationIds.add(msgId);
|
||||
if (this.shownNotificationIds.size > SystemNotificationService.MAX_DEDUP_SIZE) {
|
||||
const toRemove: string[] = [];
|
||||
let count = 0;
|
||||
for (const id of this.shownNotificationIds) {
|
||||
if (count >= SystemNotificationService.MAX_DEDUP_SIZE / 2) break;
|
||||
toRemove.push(id);
|
||||
count++;
|
||||
}
|
||||
for (const id of toRemove) {
|
||||
this.shownNotificationIds.delete(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 仅在后台时显示通知，前台时不显示（用户正在使用应用，可以直接看到消息）
|
||||
if (this.currentAppState !== 'active') {
|
||||
// 判断是否是聊天消息（通过 segments 字段）
|
||||
|
||||
@@ -376,6 +376,18 @@ export class MessageSyncService implements IMessageSyncService {
|
||||
|
||||
store.setUnreadCount(totalUnread, systemUnread);
|
||||
|
||||
// 获取最后一条系统通知的时间
|
||||
if (systemUnread > 0) {
|
||||
try {
|
||||
const latestSystemMsg = await messageService.getSystemMessagesCursor({ cursor: '', page_size: 1 });
|
||||
if (latestSystemMsg?.list?.[0]?.created_at) {
|
||||
store.setLastSystemMessageAt(latestSystemMsg.list[0].created_at);
|
||||
}
|
||||
} catch {
|
||||
// 获取最后系统通知时间失败，不影响主流程
|
||||
}
|
||||
}
|
||||
|
||||
// 服务端汇总未读为 0 时，清掉内存中残留的红点
|
||||
if (totalUnread === 0) {
|
||||
const currentConversations = store.getState().conversations;
|
||||
|
||||
@@ -16,6 +16,7 @@ import type {
|
||||
WSGroupRecallMessage,
|
||||
WSGroupTypingMessage,
|
||||
WSGroupNoticeMessage,
|
||||
WSNotificationMessage,
|
||||
} from '@/services/core';
|
||||
import { wsService, GroupNoticeType } from '@/services/core';
|
||||
import { eventBus } from '@/core/events/EventBus';
|
||||
@@ -128,6 +129,20 @@ export class WSMessageHandler implements IWSMessageHandler {
|
||||
this.handleGroupNotice(message);
|
||||
});
|
||||
|
||||
// 监听系统通知，实时更新系统未读数
|
||||
wsService.on('notification', (message: WSNotificationMessage) => {
|
||||
if (!message.is_read) {
|
||||
this.incrementSystemUnread();
|
||||
}
|
||||
if (message.created_at) {
|
||||
const store = useMessageStore.getState();
|
||||
const currentLast = store.lastSystemMessageAt;
|
||||
if (!currentLast || new Date(message.created_at) > new Date(currentLast)) {
|
||||
store.setLastSystemMessageAt(message.created_at);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听连接状态
|
||||
wsService.onConnect(() => {
|
||||
useMessageStore.getState().setSSEConnected(true);
|
||||
@@ -484,6 +499,12 @@ export class WSMessageHandler implements IWSMessageHandler {
|
||||
}
|
||||
}
|
||||
|
||||
private incrementSystemUnread(): void {
|
||||
const store = useMessageStore.getState();
|
||||
const currentUnread = store.getUnreadCount();
|
||||
store.setUnreadCount(currentUnread.total + 1, currentUnread.system + 1);
|
||||
}
|
||||
|
||||
private markMessageAsRecalled(conversationId: string, messageId: string): void {
|
||||
const store = useMessageStore.getState();
|
||||
const messages = store.getMessages(conversationId);
|
||||
|
||||
@@ -31,6 +31,9 @@ export interface MessageState {
|
||||
totalUnreadCount: number;
|
||||
systemUnreadCount: number;
|
||||
|
||||
// 最后一条系统通知时间
|
||||
lastSystemMessageAt: string | null;
|
||||
|
||||
// 连接状态
|
||||
isWSConnected: boolean;
|
||||
|
||||
@@ -75,6 +78,7 @@ export interface MessageActions {
|
||||
addMessage: (conversationId: string, message: MessageResponse) => void;
|
||||
updateMessage: (conversationId: string, messageId: string, updates: Partial<MessageResponse>) => void;
|
||||
setUnreadCount: (total: number, system: number) => void;
|
||||
setLastSystemMessageAt: (time: string | null) => void;
|
||||
setSSEConnected: (connected: boolean) => void;
|
||||
setCurrentConversation: (conversationId: string | null) => void;
|
||||
setLoading: (loading: boolean) => void;
|
||||
@@ -95,6 +99,7 @@ const initialState: MessageState = {
|
||||
messagesMap: new Map(),
|
||||
totalUnreadCount: 0,
|
||||
systemUnreadCount: 0,
|
||||
lastSystemMessageAt: null,
|
||||
isWSConnected: false,
|
||||
currentConversationId: null,
|
||||
isLoadingConversations: false,
|
||||
@@ -160,6 +165,7 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
|
||||
messagesMap: state.messagesMap,
|
||||
totalUnreadCount: state.totalUnreadCount,
|
||||
systemUnreadCount: state.systemUnreadCount,
|
||||
lastSystemMessageAt: state.lastSystemMessageAt,
|
||||
isWSConnected: state.isWSConnected,
|
||||
currentConversationId: state.currentConversationId,
|
||||
isLoadingConversations: state.isLoadingConversations,
|
||||
@@ -314,6 +320,10 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
|
||||
set({ totalUnreadCount: total, systemUnreadCount: system });
|
||||
},
|
||||
|
||||
setLastSystemMessageAt: (time: string | null) => {
|
||||
set({ lastSystemMessageAt: time });
|
||||
},
|
||||
|
||||
setSSEConnected: (connected: boolean) => {
|
||||
set({ isWSConnected: connected });
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user