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