个人中心全部,模糊乱序搜索,类型筛选
Change-Id: Id635654fccccaea80bfbf4d1480abd55f7d12046
diff --git a/src/components/Personal/Upload.jsx b/src/components/Personal/Upload.jsx
index 4d6e934..2d91b30 100644
--- a/src/components/Personal/Upload.jsx
+++ b/src/components/Personal/Upload.jsx
@@ -1,28 +1,117 @@
-import React from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { getUserTorrents, deleteTorrent } from '../../api/personal';
import './personalSubpage.css';
const Upload = ({ onLogout }) => {
const navigate = useNavigate();
const location = useLocation();
- const [uploads] = React.useState([
- { id: 1, name: '星际穿越', status: '已发布', date: '2023-10-15', size: '15.2GB' },
- { id: 2, name: '黑暗骑士', status: '审核中', date: '2023-10-18', size: '12.7GB' }
- ]);
+ const [torrents, setTorrents] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [pagination, setPagination] = useState({
+ page: 1,
+ size: 5,
+ total: 0
+ });
+
+
+
+ // 格式化日期
+ const formatDate = (dateString) => {
+ const date = new Date(dateString);
+ return date.toLocaleString();
+ };
+
+ // 获取上传记录
+ const fetchTorrents = async () => {
+ try {
+ setLoading(true);
+ const { records, total } = await getUserTorrents(pagination.page, pagination.size);
+ setTorrents(records);
+ setPagination(prev => ({ ...prev, total }));
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+
+
+ // 删除种子
+ const handleDelete = async (id) => {
+ if (window.confirm('确定要删除这个种子吗?此操作不可撤销!')) {
+ try {
+ await deleteTorrent(id);
+ // 删除成功后刷新列表
+ fetchTorrents();
+ } catch (err) {
+ alert('删除失败: ' + err.message);
+ }
+ }
+ };
+
+ // 计算总页数
+ const totalPages = Math.ceil(pagination.total / pagination.size);
+
+ // 生成页码数组
+ const getPageNumbers = () => {
+ const pages = [];
+ const maxVisiblePages = 5; // 最多显示5个页码
+
+ let startPage = Math.max(1, pagination.page - Math.floor(maxVisiblePages / 2));
+ let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+ // 调整起始页码,确保始终显示 maxVisiblePages 个页码(如果总页数足够)
+ if (endPage - startPage + 1 < maxVisiblePages) {
+ startPage = Math.max(1, endPage - maxVisiblePages + 1);
+ }
+
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i);
+ }
+
+ return pages;
+ };
+
+ // 直接跳转到指定页码
+ const jumpToPage = (page) => {
+ if (page >= 1 && page <= totalPages && page !== pagination.page) {
+ setPagination(prev => ({ ...prev, page }));
+ }
+ };
+
+ // 分页改变
+ const handlePageChange = (newPage) => {
+ setPagination(prev => ({ ...prev, page: newPage }));
+ };
+
+ useEffect(() => {
+ fetchTorrents();
+ }, [pagination.page]);
const handleBack = () => {
- // 返回个人中心,并携带来源标记
navigate('/personal', {
state: {
- fromSubpage: true, // 标记来自子页面
- dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+ fromSubpage: true,
+ dashboardTab: location.state?.dashboardTab
},
- replace: true // 替换当前历史记录
+ replace: true
});
};
+
+ if (loading) {
+ return <div className="subpage-container">加载中...</div>;
+ }
+
+ if (error) {
+ return <div className="subpage-container">错误: {error}</div>;
+ }
+
return (
<div className="subpage-container">
- <button className="back-button" onClick={(handleBack)}>
+ <button className="back-button" onClick={handleBack}>
← 返回个人中心
</button>
@@ -33,31 +122,99 @@
<tr>
<th>资源名称</th>
<th>大小</th>
- <th>状态</th>
<th>上传时间</th>
+ <th>下载次数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
- {uploads.map(item => (
- <tr key={item.id} className="list-item">
- <td>{item.name}</td>
- <td>{item.size}</td>
+ {torrents.map(torrent => (
+ <tr key={torrent.id} className="list-item">
+ <td>{torrent.torrentName}</td>
+ <td>{torrent.formattedSize}</td>
+ <td>{formatDate(torrent.createTime)}</td>
+ <td>{torrent.downloadCount || 0}</td>
<td>
- <span className={`status-badge ${
- item.status === '已发布' ? 'published' : 'pending'
- }`}>
- {item.status}
- </span>
- </td>
- <td>{item.date}</td>
- <td>
- <button className="action-btn">详情</button>
+ <button
+ className="action-btn delete-btn"
+ onClick={() => handleDelete(torrent.id)}
+ >
+ 删除
+ </button>
</td>
</tr>
))}
</tbody>
</table>
+
+ {/* 修改后的分页控件 */}
+ <div className="pagination">
+ <button
+ disabled={pagination.page <= 1}
+ onClick={() => jumpToPage(1)}
+ className="page-nav"
+ >
+ 首页
+ </button>
+ <button
+ disabled={pagination.page <= 1}
+ onClick={() => jumpToPage(pagination.page - 1)}
+ className="page-nav"
+ >
+ 上一页
+ </button>
+
+ {/* 显示页码 */}
+ {getPageNumbers().map(number => (
+ <button
+ key={number}
+ onClick={() => jumpToPage(number)}
+ className={`page-number ${pagination.page === number ? 'active' : ''}`}
+ >
+ {number}
+ </button>
+ ))}
+
+ {/* 显示省略号(如果有更多页) */}
+ {totalPages > getPageNumbers()[getPageNumbers().length - 1] && (
+ <span className="ellipsis">...</span>
+ )}
+
+ <button
+ disabled={pagination.page >= totalPages}
+ onClick={() => jumpToPage(pagination.page + 1)}
+ className="page-nav"
+ >
+ 下一页
+ </button>
+ <button
+ disabled={pagination.page >= totalPages}
+ onClick={() => jumpToPage(totalPages)}
+ className="page-nav"
+ >
+ 末页
+ </button>
+
+ <div className="page-info">
+ <span>共 {totalPages} 页</span>
+ <span>跳至</span>
+ <input
+ type="number"
+ min="1"
+ max={totalPages}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ const page = parseInt(e.target.value);
+ if (!isNaN(page)) {
+ jumpToPage(Math.max(1, Math.min(page, totalPages)));
+ e.target.value = '';
+ }
+ }
+ }}
+ />
+ <span>页</span>
+ </div>
+ </div>
</div>
);
};