个人中心全部,模糊乱序搜索,类型筛选

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>

   );

 };