个人中心全部，模糊乱序搜索，类型筛选
Change-Id: Id635654fccccaea80bfbf4d1480abd55f7d12046
diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
index 033952d..8c60baf 100644
--- a/src/components/Personal/Personal.jsx
+++ b/src/components/Personal/Personal.jsx
@@ -1,34 +1,91 @@
-import React from 'react';
-import { useNavigate,useLocation, Outlet } from 'react-router-dom';
+// Personal.jsx
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation, Outlet } from 'react-router-dom';
+import { getUserInfo, getDownloadQuota, getDownloadProgress } from '../../api/personal';
import './Personal.css';
import ActionCard from './ActionCard';
const Personal = () => {
const navigate = useNavigate();
- const location = useLocation(); // 获取路由信息
-
- // 模拟用户数据
- const userData = {
- username: 'PT爱好者',
- avatar: 'https://via.placeholder.com/150',
- joinDate: '2023-01-15',
- level: '中级会员',
- points: 1250,
- upload: '3.2TB',
- download: '1.5TB',
- ratio: '2.13',
- downloadQuota: {
- total: 10, // 10GB
- used: 3.7, // 已使用3.7GB
- remaining: 6.3 // 剩余6.3GB
+ const location = useLocation();
+ const [userData, setUserData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [downloadProgress, setDownloadProgress] = useState({});
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ // 并行获取用户信息和下载额度
+ const [userInfo, downloadQuota] = await Promise.all([
+ getUserInfo(),
+ getDownloadQuota()
+ ]);
+
+ setUserData({
+ username: userInfo.username,
+ avatar: 'https://via.placeholder.com/150',
+ joinDate: userInfo.registTime,
+ level: userInfo.level, // 可以根据userInfo.level设置不同等级
+ points: userInfo.magicPoints,
+ upload: userInfo.upload,
+ download: userInfo.download,
+ ratio: userInfo.shareRate,
+ downloadQuota: {
+ total: downloadQuota.total,
+ used: downloadQuota.used,
+ remaining: downloadQuota.remaining
+ }
+ });
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ // 获取下载进度数据
+ const fetchDownloadProgress = async () => {
+ try {
+ const progressData = await getDownloadProgress();
+ setDownloadProgress(progressData);
+ } catch (err) {
+ console.error('获取下载进度失败:', err);
}
};
+ useEffect(() => {
+ // 初始获取下载进度
+ fetchDownloadProgress();
+
+ // 设置定时器，每10秒获取一次下载进度
+ const intervalId = setInterval(fetchDownloadProgress, 10000);
+
+ // 组件卸载时清除定时器
+ return () => clearInterval(intervalId);
+ }, []);
+
+
+ if (loading) {
+ return <div className="loading">加载中...</div>;
+ }
+
+ if (error) {
+ return <div className="error">错误: {error}</div>;
+ }
+
+ if (!userData) {
+ return <div className="error">未获取到用户数据</div>;
+ }
+
const features = [
{
- title: '我的收藏',
- description: '查看收藏的资源',
- path: '/personal/Favorite' // 相对路径
+ title: '兑换区',
+ description: '下载量/邀请码',
+ path: '/personal/Exchange' // 相对路径
},
{
title: '上传记录',
@@ -63,6 +120,23 @@
}
};
+ const formatSize = (bytes) => {
+ if (bytes < 1024) return `${bytes} B`;
+ const kb = bytes / 1024;
+ if (kb < 1024) return `${kb.toFixed(2)} KB`;
+ const mb = kb / 1024;
+ if (mb < 1024) return `${mb.toFixed(2)} MB`;
+ const gb = mb / 1024;
+ return `${gb.toFixed(2)} GB`;
+ };
+
+ // 添加进度条颜色函数
+ const getProgressColor = (percentage) => {
+ if (percentage < 0.3) return '#4CAF50'; // 绿色
+ if (percentage < 0.7) return '#FFC107'; // 黄色
+ return '#F44336'; // 红色
+ };
+
return (
<div className="personal-container">
{/* 返回按钮 */}
@@ -82,7 +156,7 @@
<h2 className="username">{userData.username}</h2>
<div className="user-meta">
<span>加入时间: {userData.joinDate}</span>
- <span>等级: {userData.level}</span>
+ <span>会员等级: Lv.{userData.level}</span>
</div>
</div>
</div>
@@ -90,16 +164,16 @@
{/* 用户数据统计 */}
<div className="stats-grid">
<div className="stat-item">
- <div className="stat-label">积分</div>
+ <div className="stat-label">保种积分</div>
<div className="stat-value">{userData.points}</div>
</div>
<div className="stat-item">
<div className="stat-label">上传量</div>
- <div className="stat-value">{userData.upload}</div>
+ <div className="stat-value">{formatSize(userData.upload)}</div>
</div>
<div className="stat-item">
<div className="stat-label">下载量</div>
- <div className="stat-value">{userData.download}</div>
+ <div className="stat-value">{formatSize(userData.download)}</div>
</div>
<div className="stat-item">
<div className="stat-label">分享率</div>
@@ -112,17 +186,46 @@
<div className="quota-card">
<h3>下载额度</h3>
<div className="quota-info">
- <span className="quota-used">{userData.downloadQuota.used}GB 已使用</span>
- <span className="quota-remaining">{userData.downloadQuota.remaining}GB 剩余</span>
+ <span className="quota-used">
+ {formatSize(userData.downloadQuota.used)} 已使用
+ </span>
+ <span className="quota-remaining">
+ {formatSize(userData.downloadQuota.remaining)} 剩余
+ </span>
</div>
<div className="progress-bar">
<div
className="progress-fill"
- style={{ width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%` }}
+ style={{
+ width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%`,
+ backgroundColor: getProgressColor(userData.downloadQuota.used / userData.downloadQuota.total)
+ }}
></div>
</div>
- <div className="quota-total">总额度: {userData.downloadQuota.total}GB</div>
+ <div className="quota-total">
+ 总额度: {formatSize(userData.downloadQuota.total)}
+ </div>
</div>
+
+ {Object.keys(downloadProgress).length > 0 && (
+ <div className="progress-card">
+ <h3>当前下载进度</h3>
+ {Object.entries(downloadProgress).map(([taskId, progress]) => (
+ <div key={taskId} className="download-task">
+ <div className="task-info">
+ <span className="task-id">任务: {taskId.substring(0, 8)}...</span>
+ <span className="task-progress">{Math.round(progress * 100)}%</span>
+ </div>
+ <div className="progress-bar">
+ <div
+ className="progress-fill"
+ style={{ width: `${progress * 100}%` }}
+ ></div>
+ </div>
+ </div>
+ ))}
+ </div>
+ )}
{/* 功能卡片区 */}
<div className="action-cards">