Explorar o código

✨ feat(home): 添加帖子列表mock数据支持

- 在HomePage添加MOCK_FEATURED_POSTS模拟热门帖子数据
- 在MemberPage添加MOCK_POSTS模拟用户帖子数据
- 实现API返回空数据时自动切换到mock数据的逻辑
- 增强前端开发体验,无需等待后端API完成即可查看页面效果
yourname hai 5 meses
pai
achega
81a9e572f1
Modificáronse 2 ficheiros con 96 adicións e 2 borrados
  1. 42 1
      src/client/home/pages/HomePage.tsx
  2. 54 1
      src/client/home/pages/MemberPage.tsx

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

@@ -5,6 +5,46 @@ import { postClient } from '@/client/api';
 import { InferResponseType } from 'hono/client';
 
 // 定义帖子类型
+// Mock数据
+const MOCK_FEATURED_POSTS: Post[] = [
+  {
+    id: 1,
+    content: "欢迎使用我们的社交平台!这是一条示例动态,帮助您了解平台功能。",
+    likesCount: 24,
+    commentsCount: 5,
+    createdAt: new Date(Date.now() - 3600000 * 2).toISOString(),
+    user: {
+      id: 1,
+      username: "系统公告",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+    }
+  },
+  {
+    id: 2,
+    content: "分享一张我今天拍摄的风景照片,希望大家喜欢!#自然风光 #摄影",
+    likesCount: 156,
+    commentsCount: 23,
+    createdAt: new Date(Date.now() - 3600000 * 12).toISOString(),
+    user: {
+      id: 2,
+      username: "旅行爱好者",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png"
+    },
+    images: ["https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"]
+  },
+  {
+    id: 3,
+    content: "刚刚完成了一个重要项目,感谢团队的支持!#工作日常 #团队合作",
+    likesCount: 89,
+    commentsCount: 12,
+    createdAt: new Date(Date.now() - 3600000 * 24).toISOString(),
+    user: {
+      id: 3,
+      username: "程序员小李",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"
+    }
+  }
+];
 type Post = InferResponseType<typeof postClient.$get, 200>['data'][0];
 
 const HomePage: React.FC = () => {
@@ -27,7 +67,8 @@ const HomePage: React.FC = () => {
         if (!response.ok) throw new Error('获取热门内容失败');
         
         const data = await response.json();
-        setFeaturedPosts(data.data);
+        // 如果API返回数据为空,则使用mock数据
+        setFeaturedPosts(data.data.length > 0 ? data.data : MOCK_FEATURED_POSTS);
       } catch (error) {
         console.error('Error fetching featured posts:', error);
       } finally {

+ 54 - 1
src/client/home/pages/MemberPage.tsx

@@ -6,6 +6,58 @@ import { postClient } from '@/client/api';
 import { InferResponseType } from 'hono/client';
 
 // 定义帖子类型
+// Mock数据
+const MOCK_POSTS: Post[] = [
+  {
+    id: 1,
+    content: "欢迎加入社交媒体平台!这是一条系统推荐的示例动态。",
+    likesCount: 42,
+    commentsCount: 8,
+    createdAt: new Date(Date.now() - 3600000 * 2).toISOString(),
+    user: {
+      id: 1,
+      username: "系统推荐",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+    }
+  },
+  {
+    id: 2,
+    content: "刚刚完成了一个重要项目,感谢团队的支持!#工作日常 #团队合作",
+    likesCount: 89,
+    commentsCount: 12,
+    createdAt: new Date(Date.now() - 3600000 * 8).toISOString(),
+    user: {
+      id: 3,
+      username: "程序员小李",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"
+    }
+  },
+  {
+    id: 3,
+    content: "分享一张我今天拍摄的风景照片,希望大家喜欢!#自然风光 #摄影",
+    likesCount: 156,
+    commentsCount: 23,
+    createdAt: new Date(Date.now() - 3600000 * 16).toISOString(),
+    user: {
+      id: 2,
+      username: "旅行爱好者",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png"
+    },
+    images: ["https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"]
+  },
+  {
+    id: 4,
+    content: "今天尝试了新的咖啡配方,味道很不错!#美食分享 #咖啡",
+    likesCount: 67,
+    commentsCount: 9,
+    createdAt: new Date(Date.now() - 3600000 * 24).toISOString(),
+    user: {
+      id: 4,
+      username: "美食家小王",
+      avatar: "https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png"
+    }
+  }
+];
 type Post = InferResponseType<typeof postClient.$get, 200>['data'][0];
 
 const MemberPage: React.FC = () => {
@@ -29,7 +81,8 @@ const MemberPage: React.FC = () => {
       if (!response.ok) throw new Error('获取内容失败');
       
       const data = await response.json();
-      setPosts(data.data);
+      // 如果API返回数据为空,则使用mock数据
+      setPosts(data.data.length > 0 ? data.data : MOCK_POSTS);
     } catch (error) {
       console.error('Error fetching posts:', error);
     } finally {