diff --git a/src/App.js b/src/App.js
index bfc9069..90db851 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,11 @@
-import { Route, Switch } from 'wouter'; // Import from wouter
+import { Route, Switch } from 'wouter';
 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';
+import PublishSeed from './pages/PublishSeed/PublishSeed';
+import SeedDetail from './pages/SeedList/SeedDetail/SeedDetail'; // 引入 SeedDetail 页面
 
 function App() {
   return (
@@ -13,6 +15,8 @@
         <Route path="/auth" component={AuthPage} />
         <Route path="/main-page" component={MainPage} />
         <Route path="/seed-list" component={SeedList} />
+        <Route path="/publish-seed" component={PublishSeed} />
+        <Route path="/seed/:seed_id" component={SeedDetail} /> {/* 新增路由 */}
       </Switch>
     </UserProvider>
   );
diff --git a/src/components/Header.css b/src/components/Header.css
new file mode 100644
index 0000000..5d60638
--- /dev/null
+++ b/src/components/Header.css
@@ -0,0 +1,42 @@
+.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: #dab8c2;
+    display: flex;
+    justify-content: center;
+  }
+  .nav-item {
+    color: white;
+    text-decoration: none;
+    padding: 10px 20px;
+  }
+  .active {
+    background-color: #996633;
+  }
+                    
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..79a3086
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom'; // 引入 useLocation 钩子
+import './Header.css'; // 导入 Header.css 文件
+import logo from '../assets/logo.png';
+
+const Header = () => {
+  const location = useLocation(); // 获取当前路径
+
+  // 判断路径是否是种子列表相关
+  const isSeedListActive = location.pathname.startsWith('/seed-list') || location.pathname.startsWith('/seed/');
+
+  return (
+    <div className="main-page">
+      {/* 顶部栏 */}
+      <header className="header">
+        {/* 左侧 logo 和网站名称 */}
+        <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 ${isSeedListActive ? 'active' : ''}`}>种子列表</Link> {/* 动态添加 active 类 */}
+        <Link to="/publish-seed" className="nav-item">发布种子</Link>
+      </nav>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/index.js b/src/index.js
index d563c0f..2bbdcf6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,15 +3,15 @@
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom'; 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter> 
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/src/pages/PublishSeed/PublishSeed.css b/src/pages/PublishSeed/PublishSeed.css
index e69de29..61b1405 100644
--- a/src/pages/PublishSeed/PublishSeed.css
+++ b/src/pages/PublishSeed/PublishSeed.css
@@ -0,0 +1,145 @@
+.publish-seed-container {
+    background-color: #5c3f31;
+    color: white;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  h2 {
+    text-align: center;
+    font-size: 1.8rem;
+    margin-bottom: 20px;
+    color: #fff;
+  }
+  
+  .message {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #ff6f61;
+    font-weight: bold;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    font-size: 1rem;
+    margin-bottom: 8px;
+    display: block;
+  }
+  
+  input[type="text"],
+  textarea,
+  select,
+  input[type="url"],
+  input[type="file"] {
+    width: 100%;
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    background-color: #f9f9f9;
+    color: #333;
+    font-size: 1rem;
+  }
+  
+  textarea {
+    height: 100px;
+    resize: none;
+  }
+  
+  input[type="file"] {
+    padding: 6px;
+  }
+  
+  input[type="url"] {
+    padding: 8px 12px;
+  }
+  
+  input[type="text"]:focus,
+  textarea:focus,
+  select:focus,
+  input[type="url"]:focus,
+  input[type="file"]:focus {
+    outline: none;
+    border-color: #b38867;
+  }
+  
+  button[type="submit"] {
+    padding: 12px 20px;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    font-size: 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.2s ease;
+  }
+  
+  button[type="submit"]:disabled {
+    background-color: #d6d6d6;
+    cursor: not-allowed;
+  }
+  
+  button[type="submit"]:hover {
+    background-color: #0056b3;
+  }
+  
+  input[type="text"],
+  input[type="url"],
+  select {
+    margin-bottom: 10px;
+  }
+  
+  input[type="file"] {
+    margin-bottom: 10px;
+  }
+  
+  .publish-seed-container .form-group:last-child {
+    margin-bottom: 0;
+  }
+  
+  .publish-seed-container .form-group label {
+    color: #ddd;
+    font-size: 1rem;
+  }
+  
+  .publish-seed-container .form-group input,
+  .publish-seed-container .form-group select,
+  .publish-seed-container .form-group textarea {
+    background-color: #4e3b30;
+    color: white;
+  }
+  
+  .publish-seed-container .form-group input:focus,
+  .publish-seed-container .form-group select:focus,
+  .publish-seed-container .form-group textarea:focus {
+    border-color: #b38867;
+    outline: none;
+  }
+  
+  input[type="file"] {
+    border: none;
+    background-color: #4e3b30;
+  }
+  
+  input[type="file"]:focus {
+    outline: none;
+  }
+  
+  .form-group button {
+    background-color: #5c3f31;
+    color: #fff;
+    padding: 12px;
+    font-size: 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    width: 100%;
+  }
+  
+  .form-group button:hover {
+    background-color: #b38867;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/PublishSeed/PublishSeed.jsx b/src/pages/PublishSeed/PublishSeed.jsx
index e69de29..7ead11d 100644
--- a/src/pages/PublishSeed/PublishSeed.jsx
+++ b/src/pages/PublishSeed/PublishSeed.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import Header from '../../components/Header'; // 导入 Header 组件
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const PublishSeed = () => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [tags, setTags] = useState([]);
+  const [category, setCategory] = useState('movie');
+  const [file, setFile] = useState(null);
+  const [imageUrl, setImageUrl] = useState('');
+  const [message, setMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleTagsChange = (e) => {
+    setTags(e.target.value.split(',').map(tag => tag.trim()));
+  };
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setMessage('');
+
+    const formData = new FormData();
+    formData.append('title', title);
+    formData.append('description', description);
+    formData.append('tags', JSON.stringify(tags)); // Tags as JSON array
+    formData.append('category', category);
+    formData.append('file', file);
+    formData.append('image_url', imageUrl);
+
+    try {
+      const response = await axios.post(`${API_BASE}/echo/seeds/upload`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      if (response.data.status === 'success') {
+        setMessage('种子上传成功');
+      } else {
+        setMessage('上传失败，请稍后再试');
+      }
+    } catch (error) {
+      console.error(error);
+      setMessage('上传失败，发生了错误');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="publish-seed-container">
+      <Header /> {/* 在这里插入导航栏 */}
+      {message && <div className="message">{message}</div>}
+      <form onSubmit={handleSubmit} encType="multipart/form-data">
+        <div className="form-group">
+          <label>标题</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label>描述</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label>标签 (逗号分隔)</label>
+          <input
+            type="text"
+            value={tags.join(', ')}
+            onChange={handleTagsChange}
+            placeholder="例如：科幻, 动作"
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label>分类</label>
+          <select
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            required
+          >
+            <option value="movie">电影</option>
+            <option value="tv">电视剧</option>
+            <option value="music">音乐</option>
+          </select>
+        </div>
+
+        <div className="form-group">
+          <label>种子文件</label>
+          <input
+            type="file"
+            onChange={handleFileChange}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label>封面图URL</label>
+          <input
+            type="url"
+            value={imageUrl}
+            onChange={(e) => setImageUrl(e.target.value)}
+            placeholder="例如：http://example.com/images/cover.jpg"
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <button type="submit" disabled={isLoading}>
+            {isLoading ? '正在上传...' : '上传种子'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default PublishSeed;
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.css b/src/pages/SeedList/SeedDetail/SeedDetail.css
new file mode 100644
index 0000000..ce4d70e
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.css
@@ -0,0 +1,30 @@
+.seed-detail-container {
+    padding: 20px;
+  }
+  
+  .seed-header {
+    display: flex;
+  }
+  
+  .cover-image {
+    width: 200px;
+    height: auto;
+    margin-right: 20px;
+    border-radius: 8px;
+  }
+  
+  .seed-basic-info p, .seed-media-info p {
+    margin: 6px 0;
+  }
+  
+  .uploader-info {
+    margin-top: 30px;
+    border-top: 1px solid #ccc;
+    padding-top: 10px;
+  }
+  
+  .uploader-info .avatar {
+    width: 60px;
+    border-radius: 50%;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.jsx b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
new file mode 100644
index 0000000..464da3d
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+import Header from '../../../components/Header';
+import './SeedDetail.css';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const SeedDetail = () => {
+  const { seed_id } = useParams();
+  const [seed, setSeed] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    axios
+      .get(`${API_BASE}/echo/seeds/${seed_id}`)
+      .then((res) => {
+        if (res.data.status === 'success') {
+          setSeed(res.data.seed);
+        } else {
+          setError('未能获取种子信息');
+        }
+      })
+      .catch(() => {
+        setError('获取种子详情失败');
+      });
+  }, [seed_id]);
+
+  if (error) {
+    return (
+      <div>
+        <Header />
+        <div className="seed-detail-container">
+          <p className="error">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!seed) {
+    return (
+      <div>
+        <Header />
+        <div className="seed-detail-container">
+          <p>加载中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Header />
+      <div className="seed-detail-container">
+        <div className="seed-header">
+          <img src={seed.cover_url} alt={seed.title} className="cover-image" />
+          <div className="seed-basic-info">
+            <h1>{seed.title}</h1>
+            <p><strong>分类：</strong>{seed.category}</p>
+            <p><strong>标签：</strong>{seed.tags.join(' / ')}</p>
+            <p><strong>简介：</strong>{seed.description}</p>
+            <p><strong>大小：</strong>{seed.size} GB</p>
+            <p><strong>分辨率：</strong>{seed.resolution}</p>
+            <p><strong>片长：</strong>{seed.duration}</p>
+            <p><strong>地区：</strong>{seed.region}</p>
+            <p><strong>发布时间：</strong>{new Date(seed.upload_time).toLocaleString()}</p>
+            <p><strong>下载次数：</strong>{seed.downloads}</p>
+          </div>
+        </div>
+
+        {(seed.category === '电影' || seed.category === '电视剧') && (
+          <div className="seed-media-info">
+            <p><strong>导演：</strong>{seed.director}</p>
+            <p><strong>编剧：</strong>{seed.writer}</p>
+            <p><strong>主演：</strong>{seed.actors.join(' / ')}</p>
+          </div>
+        )}
+
+        <div className="uploader-info">
+          <h3>发种人</h3>
+          <img src={seed.user.avatar_url} alt={seed.user.username} className="avatar" />
+          <p>{seed.user.username}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SeedDetail;
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index 5d17275..9187c56 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,173 +1,231 @@
- .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
+.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;
+}
+
+.clear-filter-btn {
+  background: transparent;
+  border: none;
+  color: #888;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-left: 4px;
+}
+
+.clear-filter-btn:hover {
+  color: red;
+}
+
+/* 卡片展示 */
+.seed-list-content {
+  padding: 20px;
+}
+
+.seed-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+  padding: 20px 0;
+}
+
+.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;
+  word-break: break-word;
+}
+
+.seed-card-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.seed-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.seed-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.tag-label {
+  background-color: #f0f0f0;
+  color: #555;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  border-radius: 12px;
+  white-space: nowrap;
+}
+
+.seed-card-actions {
+  display: flex;
+  justify-content: space-between;
+  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;
+  text-align: center;
+  white-space: nowrap;
+  transition: background-color 0.2s ease;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
+.btn-secondary {
+  background-color: #28a745;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #218838;
+}
+
+.btn-outline {
+  background-color: transparent;
+  border: 1px solid #ccc;
+  color: #333;
+}
+
+.btn-outline:hover {
+  background-color: #f8f9fa;
+}
+.seed-cover {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
diff --git a/src/pages/SeedList/SeedList.jsx b/src/pages/SeedList/SeedList.jsx
index 3519f17..f32224e 100644
--- a/src/pages/SeedList/SeedList.jsx
+++ b/src/pages/SeedList/SeedList.jsx
@@ -1,246 +1,3 @@
-// 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="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>
-
-//             <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';
@@ -259,7 +16,7 @@
     const [activeTab, setActiveTab] = useState('种子列表');
     const [filters, setFilters] = useState({});
     const [selectedFilters, setSelectedFilters] = useState({});
-    const [tagMode, setTagMode] = useState('all'); // 支持 tag_mode 参数
+    const [tagMode, setTagMode] = useState('all');
     const [errorMsg, setErrorMsg] = useState('');
 
     const TAGS = ['猜你喜欢', '电影', '电视剧', '动漫', '音乐', '游戏', '综艺', '软件', '体育', '学习', '纪录片', '其他'];
@@ -285,12 +42,10 @@
             sort_by: sortOption === '最新' ? 'newest' : sortOption === '最热' ? 'downloads' : undefined,
             page: 1,
             limit: 20,
-            include_fields: 'seed_id,title,category,tags,size,upload_time,downloads',
+            include_fields: 'seed_id,title,category,tags,size,upload_time,downloads,image_url',
         };
 
-        if (searchTerm.trim()) {
-            params.search = searchTerm.trim();
-        }
+        if (searchTerm.trim()) params.search = searchTerm.trim();
 
         const tags = Object.entries(selectedFilters)
             .filter(([_, value]) => value !== '不限')
@@ -332,9 +87,11 @@
         const category = CATEGORY_MAP[activeTab];
         try {
             const res = await axios.get(`${API_BASE}/echo/seed-filters?category=${category}`);
-            setFilters(res.data || {});
+            const filterData = res.data || {};
+            setFilters(filterData);
+
             const defaultSelections = {};
-            for (const key in res.data) {
+            for (const key in filterData) {
                 defaultSelections[key] = '不限';
             }
             setSelectedFilters(defaultSelections);
@@ -384,6 +141,20 @@
         }
     };
 
+    const handleFilterChange = (key, value) => {
+        setSelectedFilters((prev) => ({
+            ...prev,
+            [key]: value
+        }));
+    };
+
+    const clearFilter = (key) => {
+        setSelectedFilters((prev) => ({
+            ...prev,
+            [key]: '不限'
+        }));
+    };
+
     return (
         <div className="main-page">
             <header className="header">
@@ -446,14 +217,15 @@
                             <label>{key}:</label>
                             <select
                                 value={selectedFilters[key]}
-                                onChange={(e) =>
-                                    setSelectedFilters({ ...selectedFilters, [key]: e.target.value })
-                                }
+                                onChange={(e) => handleFilterChange(key, e.target.value)}
                             >
                                 {options.map((opt) => (
                                     <option key={opt} value={opt}>{opt}</option>
                                 ))}
                             </select>
+                            {selectedFilters[key] !== '不限' && (
+                                <button className="clear-filter-btn" onClick={() => clearFilter(key)}>✕</button>
+                            )}
                         </div>
                     ))}
                 </div>
@@ -472,14 +244,28 @@
                     <div className="seed-cards">
                         {filteredSeeds.map((seed, index) => (
                             <div key={index} className="seed-card">
+                                {seed.image_url && (
+                                    <img src={seed.image_url} alt={seed.title} className="seed-cover" />
+                                )}
                                 <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 className="seed-info">
+                                        <span>{seed.size || '未知'} GB</span>
+                                        <span>{seed.upload_time?.split('T')[0] || '未知'}</span>
+                                        <span>{seed.downloads ?? 0} 次下载</span>
+                                    </div>
+                                    {seed.tags && seed.tags.length > 0 && (
+                                        <div className="seed-card-tags">
+                                            {seed.tags.map((tag, i) => (
+                                                <span key={i} className="tag-label">{tag}</span>
+                                            ))}
+                                        </div>
+                                    )}
                                 </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>