主页及相关页面
Change-Id: I588797f986de01217147f16f3c9727b67992fb8f
diff --git a/src/pages/Home.css b/src/pages/Home.css
new file mode 100644
index 0000000..8510372
--- /dev/null
+++ b/src/pages/Home.css
@@ -0,0 +1,20 @@
+.home-layout {
+ min-height: 100vh;
+ background-color: #f0f2f5;
+}
+
+.home-header {
+ background-color: #001529;
+ padding: 0 24px;
+ height: 64px;
+}
+
+.home-content {
+ padding: 24px 0;
+}
+
+.post-card {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..437feda
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,74 @@
+// pages/Home.js
+import React, { useState, useEffect } from 'react';
+import { getActivityPreviews, getFullActivities } from '../api/activity';
+import RecommendAll from '../components/RecommendAll'; // 假设你有一个推荐预览组件
+import RecommendPreview from '../components/RecommendPreview';
+import Navbar from '../components/Navbar'; // 导航栏组件
+
+const Home = () => {
+ const [activityPreviews, setActivityPreviews] = useState([]);
+ const [fullActivities, setFullActivities] = useState([]);
+ const [selectedActivityId, setSelectedActivityId] = useState(null);
+
+ useEffect(() => {
+ getActivityPreviews().then(res => setActivityPreviews(res.data));
+ getFullActivities().then(res => setFullActivities(res.data));
+ }, []);
+
+ const selectedActivity = fullActivities.find(
+ activity => activity.activityid === selectedActivityId
+ );
+
+ return (
+ <div>
+ <Navbar className="fixed top-0 left-0 w-full z-50" /> {/* 导航栏组件 */}
+ <h1 className="text-3xl font-bold text-center mb-4">社交互动平台 - 首页</h1>
+
+ {/* 活动区域 */}
+ <div className="bg-white p-4 rounded shadow mb-8">
+ <h2 className="text-xl font-semibold mb-4">活动预览</h2>
+ {!selectedActivity ? (
+ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+ {activityPreviews.map(activity => (
+ <div key={activity.activityid} className="border p-3 rounded shadow">
+ <h3 className="text-lg font-medium mb-2">{activity.title}</h3>
+ <img
+ src={activity.photo}
+ alt={activity.title}
+ className="w-full h-40 object-cover mb-2 rounded"
+ />
+ <button
+ className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
+ onClick={() => setSelectedActivityId(activity.activityid)}
+ >
+ 查看详情
+ </button>
+ </div>
+ ))}
+ </div>
+ ) : (
+ <div className="p-4 border rounded shadow">
+ <button
+ className="mb-4 text-blue-600 underline"
+ onClick={() => setSelectedActivityId(null)}
+ >
+ ← 返回列表
+ </button>
+ <h3 className="text-2xl font-bold mb-2">{selectedActivity.title}</h3>
+ <img
+ src={selectedActivity.photo}
+ alt={selectedActivity.title}
+ className="w-full h-60 object-cover rounded mb-4"
+ />
+ <p className="mb-2"><strong>内容：</strong>{selectedActivity.content}</p>
+ <p className="mb-2"><strong>时间：</strong>{selectedActivity.time}</p>
+ <p className="mb-2"><strong>奖励：</strong>{selectedActivity.award}</p>
+ </div>
+ )}
+ </div>
+ <RecommendPreview />
+ </div>
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/MainPage.css b/src/pages/MainPage.css
new file mode 100644
index 0000000..91325c9
--- /dev/null
+++ b/src/pages/MainPage.css
@@ -0,0 +1,63 @@
+/* src/pages/MainPage.css */
+
+.main-page-wrapper {
+ min-height: 100vh;
+ background-color: #f0f2f5;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.main-page-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 32px 16px;
+}
+
+/* 欢迎区 */
+.main-page-header {
+ margin-bottom: 32px;
+ text-align: center;
+}
+
+.main-page-header h1 {
+ font-size: 32px;
+ color: #333;
+ margin-bottom: 8px;
+}
+
+.main-page-subtitle {
+ font-size: 16px;
+ color: #666;
+}
+
+/* 卡片样式通用区 */
+.card-section {
+ background: #fff;
+ padding: 24px;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+ margin-bottom: 32px;
+}
+
+.section-title {
+ font-size: 22px;
+ font-weight: 600;
+ margin-bottom: 20px;
+ border-bottom: 1px solid #eaeaea;
+ padding-bottom: 10px;
+}
+
+/* 推荐资源占位样式 */
+.placeholder-box {
+ height: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 2px dashed #ccc;
+ border-radius: 8px;
+ background-color: #fafafa;
+}
+
+.placeholder-text {
+ color: #999;
+ font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
new file mode 100644
index 0000000..bf82c2e
--- /dev/null
+++ b/src/pages/MainPage.jsx
@@ -0,0 +1,41 @@
+// src/pages/MainPage.jsx
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import ActivityBoard from '../components/ActivityBoard';
+import './MainPage.css';
+import RecommendPreview from'../components/RecommendPreview'; // 引入推荐预览样式
+
+const MainPage = () => {
+ const navigate = useNavigate();
+ const currentUser = {
+ id: 2,
+ username: '测试用户',
+ };
+
+ return (
+ <div className="main-page-wrapper">
+ {/* 顶部导航栏 */}
+ <Navbar />
+
+ <main className="main-page-content">
+
+ {/* 公告区域 */}
+ <section className="card-section">
+ <ActivityBoard />
+ </section>
+
+ {/* 推荐下载资源预留区域 */}
+ <section className="card-section">
+ {/* <h2 className="section-title">📥 推荐下载资源</h2>
+ <div className="placeholder-box"> */}
+ {/* <p className="placeholder-text">这里将展示为你推荐的种子资源，敬请期待～</p> */}
+ <RecommendPreview/>
+ {/* </div> */}
+ </section>
+ </main>
+ </div>
+ );
+};
+
+export default MainPage;