修改种子列表
Change-Id: I1f9d57092ca3ae2381da2b8dd137e2743782642d
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index 028ef55..94c70aa 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,185 +1,239 @@
-.main-page {
- background-color: #5c3f31;
- color: white;
-}
+
+ .main-page {
+ background-color: #5c3f31;
+ color: white;
+ }
+
+ /* 搜索、排序控件 */
+ .controls {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ padding: 10px 20px;
+ background-color: #5c3f31;
+ }
+
+ .search-input {
+ padding: 6px 10px;
+ border-radius: 6px;
+ border: none;
+ width: 200px;
+ }
+
+ .sort-select {
+ padding: 6px;
+ border-radius: 6px;
+ border: none;
+ }
+
+ /* 标签过滤 */
+ .tag-filters {
+ background-color: #5c3f31;
+ 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;
+ }
+
+ /* 去除 Link 组件默认的下划线和文字颜色变化 */
+ .seed-item-link {
+ text-decoration: none;
+ color: inherit;
+ display: block; /* 确保整个卡片可点击 */
+ }
+
+ .clear-filter-btn:hover {
+ color: red;
+ }
+
+ /* 卡片展示 */
+ .seed-list-content {
+ padding: 20px;
+ background-color: #5c3f31;
+ }
+
+ .seed-list-card {
+ background-color: #e9ded2;
+ color: #333;
+ border-radius: 8px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ }
+
+ .seed-list-header {
+ display: grid;
+ grid-template-columns: 180px 2fr 1fr 1fr 1fr 1fr;
+ align-items: center;
+ justify-items: center; /* 新增：水平居中 */
+ padding: 12px 16px;
+ background-color: #BA929A;
+ font-weight: bold;
+ }
+
+ .seed-list-body {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .seed-item {
+ display: grid;
+ grid-template-columns: 180px 2fr 1fr 1fr 1fr 1fr;
+ align-items: center;
+ justify-items: center; /* 新增：水平居中 */
+ padding: 12px 16px;
+ border-top: 1px solid #ccc;
+ }
+
+ .seed-item-cover {
+ margin-left: -50px;
+ width: 100px;
+ height: 140px;
+ object-fit: cover;
+ border-radius: 6px;
+ flex-shrink: 0;
+ }
+
+ .seed-item-title {
+ width: 100%;
+ margin-left: -100px;
+ text-align: center;
+ }
+
+ .seed-title-row {
+ display: flex;
+ flex-direction: column;
+ align-items: center; /* 新增：垂直居中 */
+ gap: 8px;
+ }
+
+ .seed-title {
+ font-size: 1.1rem;
+ margin: 0;
+ font-weight: bold;
+ }
+
+ .seed-tags {
+ margin-top: 4px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ justify-content: center; /* 标签水平居中 */
+ max-width: 100%; /* 限制最大宽度以触发换行 */
+ word-break: break-word; /* 避免长标签溢出 */
+ }
+
+
+ .seed-item-actions {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: center; /* 新增：操作按钮水平居中 */
+ }
+
+ .seed-header-cover {
+ width: 180px;
+ flex-shrink: 0;
+ text-align: center;
+ }
+
+ .seed-header-title {
+ margin-left: -100px;
+ }
-/* 搜索、排序控件 */
-.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;
-}
- .friend-moments {
- background-color: #5c3f31;
- color: white;
- }
-
+ .seed-header-size,
+ .seed-header-upload-time,
+ .seed-header-downloads,
+ .seed-header-actions {
+ text-align: center; /* 新增：文字居中 */
+ }
+
+ .seed-info {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ color: #666;
+ margin-bottom: 8px;
+ }
+
+ .tag-label {
+ background-color: #eee;
+ border-radius: 4px;
+ padding: 2px 6px;
+ font-size: 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;
+ }
+ .friend-moments {
+ background-color: #5c3f31;
+ color: white;
+ }
+
\ No newline at end of file
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;
+