修改种子列表
Change-Id: I1f9d57092ca3ae2381da2b8dd137e2743782642d
diff --git a/src/pages/SeedList/SeedList.jsx b/src/pages/SeedList/SeedList.jsx
index 39a7615..2831434 100644
--- a/src/pages/SeedList/SeedList.jsx
+++ b/src/pages/SeedList/SeedList.jsx
@@ -1,4 +1,3 @@
-
import React, { useState, useEffect } from 'react';
import { Link } from 'wouter';
import axios from 'axios';
@@ -50,8 +49,8 @@
if (searchTerm.trim()) params.search = searchTerm.trim();
const tags = Object.entries(selectedFilters)
- .filter(([_, value]) => value !== '不限')
- .map(([_, value]) => value);
+ .filter(([_, value]) => value!== '不限')
+ .map(([_, value]) => value);
if (tags.length > 0) {
params.tags = tags.join(',');
@@ -70,7 +69,7 @@
const response = await fetch(`${API_BASE}/echo/seeds?${queryString}`);
const data = await response.json();
- if (data.status !== 'success') throw new Error(data.message || '获取失败');
+ if (data.status!== 'success') throw new Error(data.message || '获取失败');
const seeds = data.seeds || [];
setSeeds(seeds);
setFilteredSeeds(seeds);
@@ -105,13 +104,13 @@
};
useEffect(() => {
- if (activeTab !== '猜你喜欢') {
+ if (activeTab!== '猜你喜欢') {
fetchFilterOptions();
}
}, [activeTab]);
useEffect(() => {
- if (activeTab !== '猜你喜欢') {
+ if (activeTab!== '猜你喜欢') {
fetchSeeds();
}
}, [activeTab, sortOption, selectedFilters, tagMode, searchTerm]);
@@ -145,14 +144,14 @@
const handleFilterChange = (key, value) => {
setSelectedFilters((prev) => ({
- ...prev,
+ ...prev,
[key]: value
}));
};
const clearFilter = (key) => {
setSelectedFilters((prev) => ({
- ...prev,
+ ...prev,
[key]: '不限'
}));
};
@@ -183,7 +182,7 @@
{TAGS.map((tag) => (
<button
key={tag}
- className={`tag-button ${activeTab === tag ? 'active-tag' : ''}`}
+ className={`tag-button ${activeTab === tag? 'active-tag' : ''}`}
onClick={() => {
setActiveTab(tag);
setFilters({});
@@ -195,7 +194,7 @@
))}
</div>
- {activeTab !== '猜你喜欢' && Object.keys(filters).length > 0 && (
+ {activeTab!== '猜你喜欢' && Object.keys(filters).length > 0 && (
<div className="filter-bar">
{Object.entries(filters).map(([key, options]) => (
<div className="filter-group" key={key}>
@@ -208,7 +207,7 @@
<option key={opt} value={opt}>{opt}</option>
))}
</select>
- {selectedFilters[key] !== '不限' && (
+ {selectedFilters[key]!== '不限' && (
<button className="clear-filter-btn" onClick={() => clearFilter(key)}>✕</button>
)}
</div>
@@ -217,47 +216,73 @@
)}
<div className="seed-list-content">
- {activeTab === '猜你喜欢' ? (
+ {activeTab === '猜你喜欢'? (
<Recommend />
- ) : loading ? (
+ ) : loading? (
<p>加载中...</p>
- ) : errorMsg ? (
+ ) : errorMsg? (
<p className="error-text">{errorMsg}</p>
- ) : filteredSeeds.length === 0 ? (
+ ) : filteredSeeds.length === 0? (
<p>未找到符合条件的种子。</p>
) : (
- <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">
- <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 className="seed-list-card">
+ <div className="seed-list-header">
+ <div className="seed-header-cover"></div>
+ <div className="seed-header-title">种子名称</div>
+ <div className="seed-header-size">大小</div>
+ <div className="seed-header-upload-time">上传时间</div>
+ <div className="seed-header-downloads">下载次数</div>
+ <div className="seed-header-actions">操作</div>
+ </div>
+ <div className="seed-list-body">
+ {filteredSeeds.map((seed, index) => (
+ <Link href={`/seed/${seed.seed_id}`} key={index} className="seed-item-link">
+ <div className="seed-item">
+ {seed.image_url && (
+ <img src={seed.image_url} alt={seed.title} className="seed-item-cover" />
+ )}
+ <div className="seed-item-title">
+ <div className="seed-title-row">
+ <h3 className="seed-title">{seed.title}</h3>
+ <div className="seed-tags">
+ {seed.tags && seed.tags.map((tag, i) => (
+ <span key={i} className="tag-label">{tag}</span>
+ ))}
+ </div>
+ </div>
</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>
- <button className="btn-outline">收藏</button>
- </div>
- </div>
- ))}
+ <div className="seed-item-size">{seed.size || '未知'}</div>
+ <div className="seed-item-upload-time">{seed.upload_time?.split('T')[0] || '未知'}</div>
+ <div className="seed-item-downloads">{seed.downloads?? 0} 次下载</div>
+ <div
+ className="seed-item-actions"
+ onClick={(e) => e.stopPropagation()} // 阻止事件冒泡，避免跳转
+ >
+ <button
+ className="btn-primary"
+ onClick={(e) => {
+ e.preventDefault(); // 阻止跳转
+ e.stopPropagation();
+ handleDownload(seed.seed_id);
+ }}
+ >
+ 下载
+ </button>
+ <button
+ className="btn-outline"
+ onClick={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ // TODO: 收藏操作
+ }}
+ >
+ 收藏
+ </button>
+ </div>
+ </div>
+ </Link>
+ ))}
+ </div>
</div>
)}
</div>
@@ -266,3 +291,4 @@
};
export default SeedList;
+