前段
Change-Id: I718d4d07ea03c6d2b6bcbd4d426c5d1af2201bf4
diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
new file mode 100644
index 0000000..033952d
--- /dev/null
+++ b/src/components/Personal/Personal.jsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { useNavigate,useLocation, Outlet } from 'react-router-dom';
+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 features = [
+ {
+ title: '我的收藏',
+ description: '查看收藏的资源',
+ path: '/personal/Favorite' // 相对路径
+ },
+ {
+ title: '上传记录',
+ description: '管理上传的资源',
+ path: '/personal/Upload'
+ },
+ {
+ title: '消息通知',
+ description: '查看系统消息',
+ path: '/personal/Notice'
+ },
+ {
+ title: '设置',
+ description: '修改个人资料',
+ path: '/personal/Setting'
+ }
+ ];
+
+ const handleCardClick = (path) => {
+ navigate(path); // 相对导航
+ };
+
+ const handleBack = () => {
+ if (location.state?.fromSubpage) {
+ // 如果是从子页面返回，则继续返回到Dashboard
+ navigate(`/dashboard/${location.state.dashboardTab || ''}`, {
+ replace: true
+ });
+ } else {
+ // 普通返回逻辑
+ navigate(-1);
+ }
+ };
+
+ return (
+ <div className="personal-container">
+ {/* 返回按钮 */}
+ <button className="back-button" onClick={handleBack}>
+ ← 返回
+ </button>
+
+ {/* 用户基本信息卡片 */}
+ <div className="profile-card">
+ <div className="profile-header">
+ <img
+ src={userData.avatar}
+ alt={userData.username}
+ className="profile-avatar"
+ />
+ <div className="profile-info">
+ <h2 className="username">{userData.username}</h2>
+ <div className="user-meta">
+ <span>加入时间: {userData.joinDate}</span>
+ <span>等级: {userData.level}</span>
+ </div>
+ </div>
+ </div>
+
+ {/* 用户数据统计 */}
+ <div className="stats-grid">
+ <div className="stat-item">
+ <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>
+ <div className="stat-item">
+ <div className="stat-label">下载量</div>
+ <div className="stat-value">{userData.download}</div>
+ </div>
+ <div className="stat-item">
+ <div className="stat-label">分享率</div>
+ <div className="stat-value">{userData.ratio}</div>
+ </div>
+ </div>
+ </div>
+
+ {/* 下载额度卡片 */}
+ <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>
+ </div>
+ <div className="progress-bar">
+ <div
+ className="progress-fill"
+ style={{ width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%` }}
+ ></div>
+ </div>
+ <div className="quota-total">总额度: {userData.downloadQuota.total}GB</div>
+ </div>
+
+ {/* 功能卡片区 */}
+ <div className="action-cards">
+ {features.map((feature) => (
+ <div
+ key={feature.path}
+ className="action-card"
+ onClick={() => handleCardClick(feature.path)}
+ >
+ <h3>{feature.title}</h3>
+ <p>{feature.description}</p>
+ </div>
+ ))}
+ </div>
+
+ {/* 子路由出口 */}
+ <div className="subpage-container">
+ <Outlet />
+ </div>
+ </div>
+ );
+};
+
+export default Personal;
\ No newline at end of file