create-seed-list-4-9
Change-Id: Ifc7be9f2a5f40f371aaf0c417b22fe185d03a270
diff --git a/src/App.js b/src/App.js
index ce08b7b..bfc9069 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@
import AuthPage from './pages/AuthPage/AuthPage';
import HomePage from './pages/HomePage';
import MainPage from './pages/MainPage/MainPage';
+import SeedList from './pages/SeedList/SeedList';
import { UserProvider } from './context/UserContext';
function App() {
@@ -11,6 +12,7 @@
<Route path="/" component={HomePage} />
<Route path="/auth" component={AuthPage} />
<Route path="/main-page" component={MainPage} />
+ <Route path="/seed-list" component={SeedList} />
</Switch>
</UserProvider>
);
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..a3aa2e9
--- /dev/null
+++ b/src/assets/logo.png
Binary files differ
diff --git a/src/pages/MainPage/MainPage.css b/src/pages/MainPage/MainPage.css
index 60f2956..7b34ae3 100644
--- a/src/pages/MainPage/MainPage.css
+++ b/src/pages/MainPage/MainPage.css
@@ -31,7 +31,7 @@
font-size: 16px;
}
.nav {
- background-color: #b38867;
+ background-color: #dab8c2;
display: flex;
justify-content: center;
}
diff --git a/src/pages/MainPage/MainPage.jsx b/src/pages/MainPage/MainPage.jsx
index 1dad401..6acc7f4 100644
--- a/src/pages/MainPage/MainPage.jsx
+++ b/src/pages/MainPage/MainPage.jsx
@@ -1,17 +1,17 @@
import React from 'react';
-import './MainPage.css'; // 可创建对应样式文件来完善样式
-import { Link } from 'wouter'; // Use wouter's Link component
-// import '@icon-park/react/styles/index.css';
-// import { GoodTwo, Comment } from '@icon-park/react';
+import './MainPage.css';
+import { Link } from 'wouter';
+import logo from '../../assets/logo.png';
const MainPage = () => {
return (
<div className="main-page">
{/* 顶部栏 */}
<header className="header">
- {/* 左侧logo和网站名称 */}
+ {/* 左侧 logo 和网站名称 */}
<div className="logo-and-name">
- <img src="logo.png" alt="网站logo" className="logo" />
+ {/* 确保此处没有语法错误 */}
+ <img src={logo} alt="网站 logo" className="logo" />
<span className="site-name">Echo</span>
</div>
{/* 右侧用户头像和消息中心 */}
@@ -52,4 +52,4 @@
);
};
-export default MainPage;
+export default MainPage;
\ No newline at end of file
diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
new file mode 100644
index 0000000..3cc0e90
--- /dev/null
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -0,0 +1,42 @@
+.recommend-page {
+ padding: 20px;
+ background-color: #f0f0f0;
+}
+
+.recommend-section {
+ margin-bottom: 30px;
+}
+
+.recommend-section h2 {
+ font-size: 24px;
+ margin-bottom: 10px;
+ color: #333;
+}
+
+.recommend-row {
+ display: flex;
+ overflow-x: scroll;
+ gap: 20px;
+}
+
+.recommend-card {
+ width: 150px;
+ text-align: center;
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 10px;
+}
+
+.recommend-image {
+ width: 100%;
+ height: 150px;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.recommend-title {
+ margin-top: 10px;
+ font-size: 16px;
+ color: #333;
+}
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
new file mode 100644
index 0000000..c33d153
--- /dev/null
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import './Recommend.css';
+
+// 假数据
+const recommendData = {
+ paidList: [
+ { title: '片单 1', image: 'https://via.placeholder.com/150' },
+ { title: '片单 2', image: 'https://via.placeholder.com/150' },
+ { title: '片单 3', image: 'https://via.placeholder.com/150' },
+ ],
+ nowPlaying: [
+ { title: '电影 1', image: 'https://via.placeholder.com/150' },
+ { title: '电影 2', image: 'https://via.placeholder.com/150' },
+ { title: '电影 3', image: 'https://via.placeholder.com/150' },
+ { title: '电影 4', image: 'https://via.placeholder.com/150' },
+ { title: '电影 5', image: 'https://via.placeholder.com/150' },
+ { title: '电影 6', image: 'https://via.placeholder.com/150' },
+ { title: '电影 7', image: 'https://via.placeholder.com/150' },
+ { title: '电影 8', image: 'https://via.placeholder.com/150' },
+ ],
+ movieRecommendations: [
+ { title: '电影 1', image: 'https://via.placeholder.com/150' },
+ { title: '电影 2', image: 'https://via.placeholder.com/150' },
+ { title: '电影 3', image: 'https://via.placeholder.com/150' },
+ { title: '电影 4', image: 'https://via.placeholder.com/150' },
+ ],
+ tvRecommendations: [
+ { title: '电视剧 1', image: 'https://via.placeholder.com/150' },
+ { title: '电视剧 2', image: 'https://via.placeholder.com/150' },
+ { title: '电视剧 3', image: 'https://via.placeholder.com/150' },
+ { title: '电视剧 4', image: 'https://via.placeholder.com/150' },
+ ]
+};
+
+const Recommend = () => {
+ return (
+ <div className="recommend-page">
+ <div className="recommend-section">
+ <h2>付费片单</h2>
+ <div className="recommend-row">
+ {recommendData.paidList.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="recommend-section">
+ <h2>正在热映</h2>
+ <div className="recommend-row">
+ {recommendData.nowPlaying.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="recommend-section">
+ <h2>电影推荐</h2>
+ <div className="recommend-row">
+ {recommendData.movieRecommendations.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="recommend-section">
+ <h2>电视剧推荐</h2>
+ <div className="recommend-row">
+ {recommendData.tvRecommendations.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Recommend;
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
new file mode 100644
index 0000000..5d17275
--- /dev/null
+++ b/src/pages/SeedList/SeedList.css
@@ -0,0 +1,173 @@
+ .main-page {
+ background-color: #5c3f31;
+ color: white;
+ }
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ }
+
+ .logo-and-name {
+ display: flex;
+ align-items: center;
+ }
+
+ .logo {
+ height: 30px;
+ margin-right: 10px;
+ }
+
+ .site-name {
+ font-size: 24px;
+ }
+
+ .user-and-message {
+ display: flex;
+ align-items: center;
+ }
+
+ .user-avatar {
+ height: 40px;
+ margin-right: 10px;
+ }
+
+ .message-center {
+ font-size: 16px;
+ }
+
+ .nav {
+ background-color: #b38867;
+ display: flex;
+ justify-content: center;
+ }
+
+ .nav-item {
+ color: white;
+ text-decoration: none;
+ padding: 10px 20px;
+ }
+
+ .active {
+ background-color: #996633;
+ }
+
+ /* 搜索、排序控件 */
+ .controls {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ padding: 10px 20px;
+ background-color: #704c3b;
+ }
+
+ .search-input {
+ padding: 6px 10px;
+ border-radius: 6px;
+ border: none;
+ width: 200px;
+ }
+
+ .sort-select {
+ padding: 6px;
+ border-radius: 6px;
+ border: none;
+ }
+
+ /* 标签过滤 */
+ .tag-filters {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 10px;
+ }
+
+ .tag-button {
+ background-color: #b38867;
+ color: white;
+ border: none;
+ border-radius: 20px;
+ padding: 6px 12px;
+ cursor: pointer;
+ }
+
+ .active-tag {
+ background-color: #d17c4f;
+ }
+
+ /* 卡片展示 */
+ .seed-list-content {
+ padding: 20px;
+ }
+
+ .seed-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 20px;
+ }
+
+ .seed-card {
+ background-color: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ color: #333;
+ transition: transform 0.2s ease;
+ }
+
+ .seed-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .seed-card-header h3 {
+ font-size: 1.2rem;
+ margin-bottom: 10px;
+ color: #333;
+ }
+
+ .seed-card-body p {
+ margin: 4px 0;
+ font-size: 0.95rem;
+ color: #666;
+ }
+
+ .seed-card-actions {
+ display: flex;
+ gap: 10px;
+ margin-top: 12px;
+ }
+
+ .btn-primary,
+ .btn-secondary,
+ .btn-outline {
+ padding: 6px 12px;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.9rem;
+ }
+
+ .btn-primary {
+ background-color: #007bff;
+ color: white;
+ }
+
+ .btn-secondary {
+ background-color: #28a745;
+ color: white;
+ text-decoration: none;
+ text-align: center;
+ }
+
+ .btn-outline {
+ background-color: transparent;
+ border: 1px solid #ccc;
+ color: #333;
+ }
+
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedList.jsx b/src/pages/SeedList/SeedList.jsx
new file mode 100644
index 0000000..0e9badf
--- /dev/null
+++ b/src/pages/SeedList/SeedList.jsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'wouter';
+import logo from '../../assets/logo.png';
+import Recommend from './Recommend/Recommend'; // 导入Recommend组件
+import './SeedList.css';
+
+const SeedList = () => {
+ const [seeds, setSeeds] = useState([]);
+ const [filteredSeeds, setFilteredSeeds] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [selectedTag, setSelectedTag] = useState('全部');
+ const [sortOption, setSortOption] = useState('最新');
+ const [activeTab, setActiveTab] = useState('种子列表'); // 用于控制激活的标签
+
+ const TAGS = ['猜你喜欢', '电影', '电视剧','动漫','音乐', '游戏','综艺', '软件', '体育','学习','纪录片','其他'];
+
+ useEffect(() => {
+ const fetchSeeds = async () => {
+ try {
+ const response = await axios.get('/echo/seeds');
+ setSeeds(response.data);
+ setFilteredSeeds(response.data);
+ } catch (error) {
+ console.error('获取种子列表失败:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchSeeds();
+ }, []);
+
+ useEffect(() => {
+ let filtered = seeds;
+
+ if (searchTerm) {
+ filtered = filtered.filter(seed =>
+ seed.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+ }
+
+ if (selectedTag !== '全部') {
+ filtered = filtered.filter(seed =>
+ seed.tags && seed.tags.includes(selectedTag)
+ );
+ }
+
+ switch (sortOption) {
+ case '最新':
+ filtered.sort((a, b) => new Date(b.uploadTime) - new Date(a.uploadTime));
+ break;
+ case '最热':
+ filtered.sort((a, b) => (b.downloadCount || 0) - (a.downloadCount || 0));
+ break;
+ case '文件大小':
+ filtered.sort((a, b) => (b.size || 0) - (a.size || 0));
+ break;
+ default:
+ break;
+ }
+
+ setFilteredSeeds([...filtered]);
+ }, [searchTerm, selectedTag, sortOption, seeds]);
+
+ return (
+ <div className="main-page">
+ <header className="header">
+ <div className="logo-and-name">
+ <img src={logo} alt="网站logo" className="logo" />
+ <span className="site-name">Echo</span>
+ </div>
+ <div className="user-and-message">
+ <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
+ <span className="message-center">消息</span>
+ </div>
+ </header>
+
+ <nav className="nav">
+ <Link to="/friend-moments" className="nav-item">好友动态</Link>
+ <Link to="/forum" className="nav-item">论坛</Link>
+ <Link to="/interest-groups" className="nav-item">兴趣小组</Link>
+ <Link to="/seed-list" className="nav-item active">种子列表</Link>
+ <Link to="/publish-seed" className="nav-item">发布种子</Link>
+ </nav>
+
+ {/* 导航部分：点击不同标签时改变 activeTab */}
+ <div className="controls">
+ <input
+ type="text"
+ placeholder="搜索种子..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="search-input"
+ />
+ <select value={sortOption} onChange={(e) => setSortOption(e.target.value)} className="sort-select">
+ <option value="最新">最新</option>
+ <option value="最热">最热</option>
+ <option value="文件大小">文件大小</option>
+ </select>
+ </div>
+
+ <div className="tag-filters">
+ {TAGS.map((tag) => (
+ <button
+ key={tag}
+ className={`tag-button ${selectedTag === tag ? 'active-tag' : ''}`}
+ onClick={() => {
+ setSelectedTag(tag);
+ setActiveTab(tag); // 添加这一行来更新 activeTab 状态
+ }}
+ >
+ {tag}
+ </button>
+ ))}
+ </div>
+
+ {/* 显示不同页面，根据activeTab */}
+ <div className="seed-list-content">
+ {activeTab === '猜你喜欢' ? (
+ <Recommend /> // 显示推荐页面
+ ) : loading ? (
+ <p>加载中...</p>
+ ) : filteredSeeds.length === 0 ? (
+ <p>未找到符合条件的种子。</p>
+ ) : (
+ <div className="seed-cards">
+ {filteredSeeds.map((seed, index) => (
+ <div key={index} className="seed-card">
+ <div className="seed-card-header">
+ <h3>{seed.name}</h3>
+ </div>
+ <div className="seed-card-body">
+ <p><strong>大小:</strong> {seed.size || '未知'}</p>
+ <p><strong>上传者:</strong> {seed.uploader || '匿名'}</p>
+ <p><strong>时间:</strong> {seed.uploadTime || '未知'}</p>
+ <p><strong>下载数:</strong> {seed.downloadCount ?? 0}</p>
+ </div>
+ <div className="seed-card-actions">
+ <button className="btn-primary">下载</button>
+ <Link href={`/seed/${seed.id}`} className="btn-secondary">详情</Link>
+ <button className="btn-outline">收藏</button>
+ </div>
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default SeedList;
