2
0
Эх сурвалжийг харах

✨ feat(follow): 添加关注/粉丝页面模拟数据

- 添加MOCK_FOLLOWING和MOCK_FOLLOWERS模拟数据,包含不同领域用户信息
- 实现API返回空数据时自动切换到模拟数据的逻辑
- 优化模拟数据类型定义,添加as User[]类型断言

💄 style(home): 修复首页模拟数据类型断言

- 为MOCK_FEATURED_POSTS添加as Post[]类型断言,确保类型一致性
yourname 5 сар өмнө
parent
commit
a0c52ca9e6

+ 90 - 2
src/client/home/pages/FollowPage.tsx

@@ -5,6 +5,92 @@ import { userClient } from '@/client/api';
 import { useAuth } from '@/client/home/hooks/AuthProvider';
 import { useAuth } from '@/client/home/hooks/AuthProvider';
 import type { User } from '@/client/home/hooks/AuthProvider';
 import type { User } from '@/client/home/hooks/AuthProvider';
 
 
+// Mock数据
+const MOCK_FOLLOWING: User[] = [
+  {
+    id: 2,
+    username: "traveler",
+    nickname: "旅行爱好者",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png",
+    bio: "探索世界的每个角落,分享旅途的美好瞬间",
+    followingCount: 128,
+    followerCount: 2543,
+    isFollowing: true
+  },
+  {
+    id: 3,
+    username: "coder_li",
+    nickname: "程序员小李",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png",
+    bio: "前端开发 | React | TypeScript | 技术分享",
+    followingCount: 89,
+    followerCount: 1250,
+    isFollowing: true
+  },
+  {
+    id: 4,
+    username: "foodie_wang",
+    nickname: "美食家小王",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png",
+    bio: "美食探店 | 家常菜分享 | 烘焙爱好者",
+    followingCount: 215,
+    followerCount: 3876,
+    isFollowing: true
+  },
+  {
+    id: 5,
+    username: "photographer_zhang",
+    nickname: "摄影师小张",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+    bio: "风光摄影 | 城市夜景 | 人文纪实",
+    followingCount: 156,
+    followerCount: 5231,
+    isFollowing: true
+  }
+] as User[];
+
+const MOCK_FOLLOWERS: User[] = [
+  {
+    id: 6,
+    username: "music_lover",
+    nickname: "音乐爱好者",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png",
+    bio: "古典音乐 | 爵士乐 | 钢琴演奏",
+    followingCount: 45,
+    followerCount: 128,
+    isFollowing: false
+  },
+  {
+    id: 7,
+    username: "book_reader",
+    nickname: "书虫",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
+    bio: "文学爱好者 | 读书分享 | 书评",
+    followingCount: 120,
+    followerCount: 356,
+    isFollowing: false
+  },
+  {
+    id: 8,
+    username: "fitness_trainer",
+    nickname: "健身教练",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png",
+    bio: "健身指导 | 营养规划 | 健康生活方式",
+    followingCount: 320,
+    followerCount: 2876,
+    isFollowing: false
+  },
+  {
+    id: 9,
+    username: "tech_reporter",
+    nickname: "科技记者",
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/GxqBpPqiaYWqCzevC3jK.png",
+    bio: "科技新闻 | 产品评测 | 行业观察",
+    followingCount: 256,
+    followerCount: 4210,
+    isFollowing: false
+  }
+] as User[];
 type FollowType = 'following' | 'followers';
 type FollowType = 'following' | 'followers';
 
 
 const FollowPage: React.FC = () => {
 const FollowPage: React.FC = () => {
@@ -47,8 +133,10 @@ const FollowPage: React.FC = () => {
       if (!response.ok) throw new Error('获取列表失败');
       if (!response.ok) throw new Error('获取列表失败');
       
       
       const data = await response.json();
       const data = await response.json();
-      setUsers(data.data);
-      setTotalCount(data.pagination.total);
+      // 如果API返回数据为空,则使用mock数据
+      const useMockData = data.data.length === 0;
+      setUsers(useMockData ? (type === 'following' ? MOCK_FOLLOWING : MOCK_FOLLOWERS) : data.data);
+      setTotalCount(useMockData ? (type === 'following' ? MOCK_FOLLOWING.length : MOCK_FOLLOWERS.length) : data.pagination.total);
     } catch (error) {
     } catch (error) {
       console.error(`Error fetching ${type} list:`, error);
       console.error(`Error fetching ${type} list:`, error);
     } finally {
     } finally {

+ 1 - 1
src/client/home/pages/HomePage.tsx

@@ -44,7 +44,7 @@ const MOCK_FEATURED_POSTS: Post[] = [
       avatar: "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"
       avatar: "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"
     }
     }
   }
   }
-];
+] as Post[];
 type Post = InferResponseType<typeof postClient.$get, 200>['data'][0];
 type Post = InferResponseType<typeof postClient.$get, 200>['data'][0];
 
 
 const HomePage: React.FC = () => {
 const HomePage: React.FC = () => {