ssq页面
Change-Id: I11f58d72d9e33eae9ec84f46473fa6144b480501
diff --git a/front/src/UserProfile.js b/front/src/UserProfile.js
index 4737033..0269723 100644
--- a/front/src/UserProfile.js
+++ b/front/src/UserProfile.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { useNavigate } from "react-router-dom";
import "./App.css";
@@ -6,109 +6,21 @@
export default function UserProfile() {
const navigate = useNavigate();
const [userInfo, setUserInfo] = useState({
- avatar_url: "",
username: "示例用户",
email: "user@example.com",
- invite_left: "",
+ company: "",
school: "",
- account_status: "",
- gender: "",
+ birthday: "",
});
const [tempUserInfo, setTempUserInfo] = useState({ ...userInfo });
- const [userSeeds, setUserSeeds] = useState([]);
- const [userStats, setUserStats] = useState({
- magic: 0,
- upload: 0,
- download: 0,
- ratio: 0,
- });
-
- // 新增：根据userid从后端获取用户信息
- useEffect(() => {
- const fetchUserInfo = async () => {
- // 假设userid存储在localStorage或其他地方
- // const userid = localStorage.getItem("userid");
- const userid = "550e8400-e29b-41d4-a716-446655440000"; // 示例userid
- if (!userid) return;
- try {
- const res = await fetch(`/api/user-profile?userid=${userid}`);
- if (res.ok) {
- const data = await res.json();
- setUserInfo(data);
- setTempUserInfo(data);
- }
- } catch (err) {
- // 可以根据需要处理错误
- console.error("获取用户信息失败", err);
- }
- };
- fetchUserInfo();
- }, []);
-
- // 动态加载用户上传种子列表
- useEffect(() => {
- const fetchUserSeeds = async () => {
- // const userid = localStorage.getItem("userid");
- const userid = "550e8400-e29b-41d4-a716-446655440000"; // 示例userid
- if (!userid) return;
- try {
- const res = await fetch(`/api/user-seeds?userid=${userid}`);
- if (res.ok) {
- const data = await res.json();
- setUserSeeds(data);
- }
- } catch (err) {
- console.error("获取种子列表失败", err);
- }
- };
- fetchUserSeeds();
- }, []);
-
- // 动态加载用户活跃度信息
- useEffect(() => {
- const fetchUserStats = async () => {
- // const userid = localStorage.getItem("userid");
- const userid = "550e8400-e29b-41d4-a716-446655440000"; // 示例userid
- if (!userid) return;
- try {
- const res = await fetch(`/api/user-stats?userid=${userid}`);
- if (res.ok) {
- const data = await res.json();
- setUserStats(data);
- }
- } catch (err) {
- console.error("获取活跃度信息失败", err);
- }
- };
- fetchUserStats();
- }, []);
const handleInputChange = (field, value) => {
setTempUserInfo({ ...tempUserInfo, [field]: value });
};
- const handleSave = async () => {
+ const handleSave = () => {
setUserInfo({ ...tempUserInfo });
- // 获取userid
- // const userid = localStorage.getItem("userid");
- const userid = "550e8400-e29b-41d4-a716-446655440000"; // 示例userid
- try {
- const res = await fetch('/api/change-profile', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ userid, ...tempUserInfo }),
- });
- if (res.ok) {
- alert("信息已保存！");
- } else {
- alert("保存失败，请重试。");
- }
- } catch (err) {
- alert("保存失败，请检查网络连接。");
- console.error("保存用户信息失败", err);
- }
+ alert("信息已保存！");
};
const handleAvatarClick = () => {
@@ -127,7 +39,7 @@
<AccountCircleIcon style={{ fontSize: 90, color: '#1a237e', marginBottom: 12 }} />
{tempUserInfo.avatar && (
<img
- src={tempUserInfo.avatar_url}
+ src={tempUserInfo.avatar}
alt="用户头像"
style={{
position: 'absolute',
@@ -155,19 +67,21 @@
</div>
<div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
<b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邮箱：</b>
- <span
- style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15, backgroundColor: '#f5f5f5', color: '#888' }}
- >
- {tempUserInfo.email}
- </span>
+ <input
+ type="email"
+ value={tempUserInfo.email}
+ onChange={(e) => handleInputChange("email", e.target.value)}
+ style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
+ />
</div>
<div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
- <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邀请剩余：</b>
- <span
- style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15, backgroundColor: '#f5f5f5', color: '#888' }}
- >
- {tempUserInfo.invite_left}
- </span>
+ <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>公司：</b>
+ <input
+ type="text"
+ value={tempUserInfo.company}
+ onChange={(e) => handleInputChange("company", e.target.value)}
+ style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
+ />
</div>
<div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
<b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>学校：</b>
@@ -179,21 +93,22 @@
/>
</div>
<div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
- <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>账号状态：</b>
- <span
- style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15, backgroundColor: '#f5f5f5', color: '#888' }}
- >
- {tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? "封禁" : "正常"}
- <span style={{
- display: 'inline-block',
- width: 12,
- height: 12,
- borderRadius: '50%',
- backgroundColor: tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? '#e53935' : '#43a047',
- marginLeft: 10,
- border: '1px solid #b2b2b2',
- }} />
- </span>
+ <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>生日：</b>
+ <input
+ type="date"
+ value={tempUserInfo.birthday}
+ onChange={(e) => handleInputChange("birthday", e.target.value)}
+ style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
+ />
+ </div>
+ <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
+ <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>密码：</b>
+ <input
+ type="password"
+ value={tempUserInfo.password || ""}
+ onChange={(e) => handleInputChange("password", e.target.value)}
+ style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid #b2b2b2', minWidth: 0, fontSize: 15 }}
+ />
</div>
<div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
<b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>性别：</b>
@@ -272,61 +187,15 @@
{/* 上传种子列表 */}
<div style={{ gridColumn: '2 / 3', gridRow: '1 / 2', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', padding: '20px' }}>
<h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18 }}>个人上传种子列表</h3>
- <div style={{ border: '1px dashed #b2b2b2', borderRadius: 12, minHeight: 60, padding: 12 }}>
- {userSeeds.length === 0 ? (
- <div style={{ color: '#b2b2b2', fontSize: 18, textAlign: 'center' }}>（暂无上传种子）</div>
- ) : (
- <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
- {userSeeds.map((seed, idx) => (
- <li
- key={seed.seed_id || idx}
- style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid #e0e7ff', cursor: 'pointer' }}
- onClick={e => {
- // 阻止点击删除按钮时跳转
- if (e.target.classList.contains('delete-btn')) return;
- navigate(`/torrent/${seed.seed_id}`);
- }}
- >
- <span style={{ flex: 2, fontWeight: 500, color: '#1a237e', textDecoration: 'underline' }}>{seed.title}</span>
- <span style={{ flex: 1, color: '#5c6bc0' }}>{seed.tags}</span>
- <span style={{ flex: 1, color: '#ff9800', textAlign: 'right' }}>人气: {seed.popularity}</span>
- <button
- className="delete-btn"
- style={{ marginLeft: 18, background: '#e53935', color: '#fff', border: 'none', borderRadius: 6, padding: '4px 14px', cursor: 'pointer', fontSize: 14 }}
- onClick={async (e) => {
- e.stopPropagation();
- // const userid = localStorage.getItem("userid");
- const userid = "550e8400-e29b-41d4-a716-446655440000"; // 示例userid
- try {
- const res = await fetch('/api/delete-seed', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ seed_id: seed.seed_id, userid }),
- });
- if (res.ok) {
- setUserSeeds(userSeeds.filter((s, i) => (s.seed_id || i) !== (seed.seed_id || idx)));
- } else {
- alert('删除失败，请重试');
- }
- } catch (err) {
- alert('删除失败，请检查网络');
- }
- }}
- >删除</button>
- </li>
- ))}
- </ul>
- )}
+ <div style={{ border: '1px dashed #b2b2b2', borderRadius: 12, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b2b2b2', fontSize: 18 }}>
+ （此处显示上传种子列表）
</div>
</div>
{/* 活跃度模块 */}
<div style={{ gridColumn: '2 / 3', gridRow: '2 / 3', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', padding: '20px' }}>
<h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18 }}>活跃度</h3>
- <div style={{ border: '1px dashed #b2b2b2', borderRadius: 12, minHeight: 60, padding: 18, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 18 }}>
- <div>魔力值：<b style={{ color: '#1976d2' }}>{userStats.magic}</b></div>
- <div>上传量：<b style={{ color: '#43a047' }}>{userStats.upload} GB</b></div>
- <div>下载量：<b style={{ color: '#e53935' }}>{userStats.download} GB</b></div>
- <div>上传/下载值：<b style={{ color: '#ff9800' }}>{userStats.ratio}</b></div>
+ <div style={{ border: '1px dashed #b2b2b2', borderRadius: 12, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b2b2b2', fontSize: 18 }}>
+ （此处显示活跃度信息）
</div>
</div>
</div>