|
|
@@ -4,6 +4,8 @@ import { useNavigate } from 'react-router-dom';
|
|
|
import { userPreferenceClient } from '@/client/api';
|
|
|
import { FontSizeType } from '@/server/modules/silver-users/user-preference.entity';
|
|
|
import { App, Card, Button } from 'antd';
|
|
|
+import { useHomeData } from '../hooks/useHomeData';
|
|
|
+import { UserStatsCard } from '../components/UserStatsCard';
|
|
|
|
|
|
const fontSizeOptions = [
|
|
|
{ value: FontSizeType.SMALL, label: '小' },
|
|
|
@@ -20,6 +22,9 @@ const ProfilePage: React.FC = () => {
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
const [preferenceId, setPreferenceId] = useState<number | null>(null);
|
|
|
|
|
|
+ // 获取首页数据用于显示用户统计
|
|
|
+ const { data: homeData, isLoading } = useHomeData();
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
if (user) {
|
|
|
loadUserPreference();
|
|
|
@@ -27,6 +32,8 @@ const ProfilePage: React.FC = () => {
|
|
|
}, [user]);
|
|
|
|
|
|
const loadUserPreference = async () => {
|
|
|
+ if (!user) return;
|
|
|
+
|
|
|
try {
|
|
|
const response = await (userPreferenceClient as any).$get({
|
|
|
query: { filters: JSON.stringify({ userId: user.id }) }
|
|
|
@@ -114,8 +121,41 @@ const ProfilePage: React.FC = () => {
|
|
|
);
|
|
|
}
|
|
|
|
|
|
+ if (isLoading) {
|
|
|
+ return (
|
|
|
+ <div className="min-h-screen bg-gray-50 p-4">
|
|
|
+ <div className="bg-white rounded-lg shadow p-6 mb-4 animate-pulse">
|
|
|
+ <div className="flex items-center">
|
|
|
+ <div className="w-16 h-16 bg-gray-300 rounded-full"></div>
|
|
|
+ <div className="ml-4 flex-1">
|
|
|
+ <div className="h-6 bg-gray-300 rounded w-32 mb-2"></div>
|
|
|
+ <div className="h-4 bg-gray-300 rounded w-48"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="bg-white rounded-lg shadow p-6 mb-4">
|
|
|
+ <div className="h-6 bg-gray-300 rounded w-24 mb-4"></div>
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ {Array.from({ length: 4 }).map((_, i) => (
|
|
|
+ <div key={i} className="text-center">
|
|
|
+ <div className="w-12 h-12 bg-gray-300 rounded-full mx-auto mb-2"></div>
|
|
|
+ <div className="h-8 bg-gray-300 rounded w-16 mx-auto mb-1"></div>
|
|
|
+ <div className="h-4 bg-gray-300 rounded w-12 mx-auto"></div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<div className="min-h-screen bg-gray-50 p-4">
|
|
|
+ {/* 用户数据 - 最前面显示 */}
|
|
|
+ {user && homeData?.userStats && (
|
|
|
+ <UserStatsCard stats={homeData.userStats} />
|
|
|
+ )}
|
|
|
+
|
|
|
{/* 用户信息卡片 */}
|
|
|
<div className="bg-white rounded-lg shadow p-6 mb-4">
|
|
|
<div className="flex items-center">
|