前端页面提交
Change-Id: I096c8538ded26791a94a46d8f27b0307dbfb8300
diff --git a/front/src/UserProfile.js b/front/src/UserProfile.js
new file mode 100644
index 0000000..0269723
--- /dev/null
+++ b/front/src/UserProfile.js
@@ -0,0 +1,203 @@
+import React, { useState } from "react";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { useNavigate } from "react-router-dom";
+import "./App.css";
+
+export default function UserProfile() {
+ const navigate = useNavigate();
+ const [userInfo, setUserInfo] = useState({
+ username: "示例用户",
+ email: "user@example.com",
+ company: "",
+ school: "",
+ birthday: "",
+ });
+ const [tempUserInfo, setTempUserInfo] = useState({ ...userInfo });
+
+ const handleInputChange = (field, value) => {
+ setTempUserInfo({ ...tempUserInfo, [field]: value });
+ };
+
+ const handleSave = () => {
+ setUserInfo({ ...tempUserInfo });
+ alert("信息已保存！");
+ };
+
+ const handleAvatarClick = () => {
+ const avatarUrl = prompt("请输入头像的URL：");
+ if (avatarUrl) {
+ setTempUserInfo({ ...tempUserInfo, avatar: avatarUrl });
+ }
+ };
+
+ return (
+ <div className="container" style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%)', display: 'grid', gridTemplateColumns: '1fr 2fr', gridTemplateRows: 'auto 1fr', gap: '20px', padding: '40px' }}>
+ {/* 左侧：用户资料 */}
+ <div style={{ gridColumn: '1 / 2', gridRow: '1 / 3', display: 'flex', flexDirection: 'column', alignItems: 'center', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', padding: '20px' }}>
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 16 }}>
+ <div onClick={handleAvatarClick} style={{ cursor: 'pointer', position: 'relative' }}>
+ <AccountCircleIcon style={{ fontSize: 90, color: '#1a237e', marginBottom: 12 }} />
+ {tempUserInfo.avatar && (
+ <img
+ src={tempUserInfo.avatar}
+ alt="用户头像"
+ style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: 90,
+ height: 90,
+ borderRadius: '50%',
+ objectFit: 'cover',
+ }}
+ />
+ )}
+ </div>
+ <h2 style={{ color: '#1a237e', marginBottom: 0, fontSize: 24 }}>用户个人资料</h2>
+ </div>
+ <div className="card" style={{ padding: 28, width: '100%', background: '#fff', borderRadius: 18, boxShadow: '0 4px 24px #e0e7ff', flex: 1 }}>
+ <div style={{ marginBottom: 18, display: 'flex', alignItems: 'center' }}>
+ <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>用户名：</b>
+ <input
+ type="text"
+ value={tempUserInfo.username}
+ onChange={(e) => handleInputChange("username", 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="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>
+ <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>
+ <input
+ type="text"
+ value={tempUserInfo.school}
+ onChange={(e) => handleInputChange("school", 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="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>
+ <div style={{ position: 'relative', flex: 1 }}>
+ <button
+ onClick={() => setTempUserInfo({ ...tempUserInfo, showGenderOptions: !tempUserInfo.showGenderOptions })}
+ style={{
+ width: '100%',
+ padding: '6px 10px',
+ borderRadius: 7,
+ border: '1px solid #b2b2b2',
+ textAlign: 'left',
+ backgroundColor: '#fff',
+ fontSize: 15,
+ cursor: 'pointer',
+ }}
+ >
+ {tempUserInfo.gender || "性别"}
+ </button>
+ {tempUserInfo.showGenderOptions && (
+ <ul
+ style={{
+ position: 'absolute',
+ top: '100%',
+ left: 0,
+ right: 0,
+ backgroundColor: '#fff',
+ border: '1px solid #b2b2b2',
+ borderRadius: 7,
+ listStyle: 'none',
+ margin: 0,
+ padding: 0,
+ zIndex: 10,
+ }}
+ >
+ {["男", "女", "跨性别男", "跨性别女", "无性别"].map((option) => (
+ <li
+ key={option}
+ onClick={() => {
+ setTempUserInfo({ ...tempUserInfo, gender: option, showGenderOptions: false });
+ }}
+ style={{
+ padding: '6px 10px',
+ cursor: 'pointer',
+ borderBottom: '1px solid #e0e0e0',
+ backgroundColor: option === tempUserInfo.gender ? '#f0f0f0' : '#fff',
+ }}
+ >
+ {option}
+ </li>
+ ))}
+ </ul>
+ )}
+ </div>
+ </div>
+ <button
+ onClick={handleSave}
+ style={{
+ marginTop: 20,
+ padding: '10px 20px',
+ backgroundColor: '#1a237e',
+ color: '#fff',
+ border: 'none',
+ borderRadius: 7,
+ cursor: 'pointer',
+ fontSize: 16,
+ alignSelf: 'center', // Center the button horizontally
+ }}
+ onMouseOver={(e) => (e.target.style.backgroundColor = '#0d1b5e')}
+ onMouseOut={(e) => (e.target.style.backgroundColor = '#1a237e')}
+ >
+ 保存
+ </button>
+ </div>
+ </div>
+ {/* 上传种子列表 */}
+ <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, 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, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b2b2b2', fontSize: 18 }}>
+ （此处显示活跃度信息）
+ </div>
+ </div>
+ </div>
+ );
+}
\ No newline at end of file