feat(user): 实现 useUser Hook 并更新相关组件

- 新增 useUser Hook 用于全局用户状态管理
- 更新 UserCard 和 UserCell 组件,集成 useUser 功能
- 添加 UserProfile 组件示例
- 更新 API 引用,统一使用 useUser
This commit is contained in:
2025-08-14 18:08:00 +08:00
parent 2c864ce770
commit 745040d254
6 changed files with 666 additions and 31 deletions

View File

@@ -0,0 +1,99 @@
import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import { Button, Avatar } from '@nutui/nutui-react-taro';
import { useUser } from '@/hooks/useUser';
import navTo from '@/utils/common';
// 用户资料组件示例
const UserProfile: React.FC = () => {
const {
user,
isLoggedIn,
loading,
logoutUser,
fetchUserInfo,
getAvatarUrl,
getDisplayName,
isCertified,
getBalance,
getPoints
} = useUser();
// 处理登录跳转
const handleLogin = () => {
navTo('/pages/login/index');
};
// 处理退出登录
const handleLogout = () => {
logoutUser();
navTo('/pages/index/index');
};
// 刷新用户信息
const handleRefresh = async () => {
await fetchUserInfo();
};
if (loading) {
return (
<View className="user-profile loading">
<Text>...</Text>
</View>
);
}
if (!isLoggedIn) {
return (
<View className="user-profile not-logged-in">
<View className="login-prompt">
<Text></Text>
<Button type="primary" onClick={handleLogin}>
</Button>
</View>
</View>
);
}
return (
<View className="user-profile">
<View className="user-header">
<Avatar
size="large"
src={getAvatarUrl()}
alt={getDisplayName()}
/>
<View className="user-info">
<Text className="username">{getDisplayName()}</Text>
<Text className="user-id">ID: {user?.userId}</Text>
{isCertified() && (
<Text className="certified"></Text>
)}
</View>
</View>
<View className="user-stats">
<View className="stat-item">
<Text className="stat-value">¥{getBalance()}</Text>
<Text className="stat-label"></Text>
</View>
<View className="stat-item">
<Text className="stat-value">{getPoints()}</Text>
<Text className="stat-label"></Text>
</View>
</View>
<View className="user-actions">
<Button onClick={handleRefresh}>
</Button>
<Button type="danger" onClick={handleLogout}>
退
</Button>
</View>
</View>
);
};
export default UserProfile;