diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index 9187c56..50ff72f 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -229,3 +229,176 @@
   border-radius: 8px;
   margin-bottom: 12px;
 }
+ .friend-moments {
+    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;
+  }
+  
diff --git a/src/pages/SeedList/SeedList.jsx b/src/pages/SeedList/SeedList.jsx
index f32224e..8ffecb3 100644
--- a/src/pages/SeedList/SeedList.jsx
+++ b/src/pages/SeedList/SeedList.jsx
@@ -1,3 +1,246 @@
+// import React, { useState, useEffect } from 'react';
+// import { Link } from 'wouter';
+// import axios from 'axios';
+// import logo from '../../assets/logo.png';
+// import Recommend from './Recommend/Recommend';
+// import './SeedList.css';
+
+// const API_BASE = process.env.REACT_APP_API_BASE;
+
+// const SeedList = () => {
+//     const [seeds, setSeeds] = useState([]);
+//     const [filteredSeeds, setFilteredSeeds] = useState([]);
+//     const [loading, setLoading] = useState(true);
+//     const [searchTerm, setSearchTerm] = useState('');
+//     const [sortOption, setSortOption] = useState('最新');
+//     const [activeTab, setActiveTab] = useState('种子列表');
+
+//     const [filters, setFilters] = useState({});
+//     const [selectedFilters, setSelectedFilters] = useState({});
+
+//     const TAGS = ['猜你喜欢', '电影', '电视剧', '动漫', '音乐', '游戏', '综艺', '软件', '体育', '学习', '纪录片', '其他'];
+
+//     const CATEGORY_MAP = {
+//         '电影': 'movie',
+//         '电视剧': 'tv',
+//         '动漫': 'anime',
+//         '音乐': 'music',
+//         '游戏': 'game',
+//         '综艺': 'variety',
+//         '软件': 'software',
+//         '体育': 'sports',
+//         '学习': 'study',
+//         '纪录片': 'documentary',
+//         '其他': 'other'
+//     };
+
+//     const buildQueryParams = () => {
+//         const category = CATEGORY_MAP[activeTab];
+
+//         const params = {
+//             category,
+//             sort_by: sortOption === '最新' ? 'newest'
+//                     : sortOption === '最热' ? 'downloads'
+//                     : undefined,
+//             page: 1,
+//             limit: 20,
+//         };
+
+//         const tags = Object.entries(selectedFilters)
+//             .filter(([_, value]) => value !== '不限')
+//             .map(([_, value]) => value);
+
+//         if (tags.length > 0) params.tags = tags.join(',');
+
+//         return params;
+//     };
+
+//     const fetchSeeds = async () => {
+//         setLoading(true);
+//         try {
+//             const params = buildQueryParams();
+//             const queryString = new URLSearchParams(params).toString();
+//             const response = await fetch(`${API_BASE}/echo/seeds?${queryString}`);
+//             const data = await response.json();
+//             const seeds = data?.seeds || [];
+//             setSeeds(seeds);
+//             setFilteredSeeds(seeds);
+//         } catch (error) {
+//             console.error('获取种子列表失败:', error);
+//         } finally {
+//             setLoading(false);
+//         }
+//     };
+
+//     const fetchFilterOptions = async () => {
+//         if (activeTab === '猜你喜欢') return;
+//         const category = CATEGORY_MAP[activeTab];
+//         try {
+//             const res = await axios.get(`${API_BASE}/echo/seed-filters?category=${category}`);
+//             setFilters(res.data || {});
+//             const defaultSelections = {};
+//             for (const key in res.data) {
+//                 defaultSelections[key] = '不限';
+//             }
+//             setSelectedFilters(defaultSelections);
+//         } catch (err) {
+//             console.error('获取筛选项失败:', err);
+//             setFilters({});
+//             setSelectedFilters({});
+//         }
+//     };
+
+//     useEffect(() => {
+//         if (activeTab !== '猜你喜欢') {
+//             fetchFilterOptions();
+//         }
+//     }, [activeTab]);
+
+//     useEffect(() => {
+//         if (activeTab !== '猜你喜欢') {
+//             fetchSeeds();
+//         }
+//     }, [activeTab, sortOption, selectedFilters]);
+
+//     const handleDownload = async (seedId) => {
+//         const peer_id = 'echo-' + Math.random().toString(36).substring(2, 10);
+//         const ip = '127.0.0.1';
+//         const port = 6881;
+//         const uploaded = 0;
+//         const downloaded = 0;
+//         const left = 0;
+
+//         try {
+//             const response = await axios.get(`${API_BASE}/echo/seeds/${seedId}/download`, {
+//                 params: {
+//                     peer_id,
+//                     ip,
+//                     port,
+//                     uploaded,
+//                     downloaded,
+//                     left,
+//                 },
+//                 responseType: 'blob'
+//             });
+
+//             const blob = new Blob([response.data], { type: 'application/x-bittorrent' });
+//             const downloadUrl = URL.createObjectURL(blob);
+//             const a = document.createElement('a');
+//             a.href = downloadUrl;
+//             a.download = `${seedId}.torrent`;
+//             a.click();
+//             URL.revokeObjectURL(downloadUrl);
+//         } catch (error) {
+//             console.error('下载失败:', error);
+//             alert('下载失败，请稍后再试。');
+//         }
+//     };
+
+//     return (
+//         <div className="friend-moments">
+//             <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>
+
+//             <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>
+//                 </select>
+//             </div>
+
+//             <div className="tag-filters">
+//                 {TAGS.map((tag) => (
+//                     <button
+//                         key={tag}
+//                         className={`tag-button ${activeTab === tag ? 'active-tag' : ''}`}
+//                         onClick={() => {
+//                             setActiveTab(tag);
+//                             setFilters({});
+//                             setSelectedFilters({});
+//                         }}
+//                     >
+//                         {tag}
+//                     </button>
+//                 ))}
+//             </div>
+
+//             {activeTab !== '猜你喜欢' && Object.keys(filters).length > 0 && (
+//                 <div className="filter-bar">
+//                     {Object.entries(filters).map(([key, options]) => (
+//                         <div className="filter-group" key={key}>
+//                             <label>{key}:</label>
+//                             <select
+//                                 value={selectedFilters[key]}
+//                                 onChange={(e) =>
+//                                     setSelectedFilters({ ...selectedFilters, [key]: e.target.value })
+//                                 }
+//                             >
+//                                 {options.map((opt) => (
+//                                     <option key={opt} value={opt}>{opt}</option>
+//                                 ))}
+//                             </select>
+//                         </div>
+//                     ))}
+//                 </div>
+//             )}
+
+//             <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.title}</h3>
+//                                 </div>
+//                                 <div className="seed-card-body">
+//                                     <p><strong>大小:</strong> {seed.size || '未知'} GB</p>
+//                                     <p><strong>时间:</strong> {seed.upload_time?.split('T')[0] || '未知'}</p>
+//                                     <p><strong>下载数:</strong> {seed.downloads ?? 0}</p>
+//                                 </div>
+//                                 <div className="seed-card-actions">
+//                                     <button className="btn-primary" onClick={() => handleDownload(seed.seed_id)}>下载</button>
+//                                     <Link href={`/seed/${seed.seed_id}`} className="btn-secondary">详情</Link>
+//                                     <button className="btn-outline">收藏</button>
+//                                 </div>
+//                             </div>
+//                         ))}
+//                     </div>
+//                 )}
+//             </div>
+//         </div>
+//     );
+// };
+
+// export default SeedList;
 import React, { useState, useEffect } from 'react';
 import { Link } from 'wouter';
 import axios from 'axios';
@@ -156,7 +399,7 @@
     };
 
     return (
-        <div className="main-page">
+        <div className="friend-moments">
             <header className="header">
                 <div className="logo-and-name">
                     <img src={logo} alt="网站logo" className="logo" />