diff --git a/src/components/AvatarWithFrame.css b/src/components/AvatarWithFrame.css
new file mode 100644
index 0000000..ffea91b
--- /dev/null
+++ b/src/components/AvatarWithFrame.css
@@ -0,0 +1,25 @@
+.avatar-container {
+  position: relative;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+}
+
+.user-avatar {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  top: 10px;
+  left: 10px;
+  z-index: 1;
+}
+
+.avatar-frame-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/src/components/AvatarWithFrame.jsx b/src/components/AvatarWithFrame.jsx
new file mode 100644
index 0000000..15be459
--- /dev/null
+++ b/src/components/AvatarWithFrame.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Avatar } from 'antd';
+import frameImage from './avatar-frame.png'; // 头像框图片素材
+import './AvatarWithFrame.css';
+
+const AvatarWithFrame = () => {
+  // 从localStorage获取用户数据
+  const userData = JSON.parse(localStorage.getItem('user')) || {};
+  const { image, decoration = '' } = userData;
+
+  // 检查是否包含头像框
+  const hasFrame = decoration.includes('头像框');
+
+  return (
+    <div className="avatar-container">
+      {/* 头像 */}
+      <Avatar 
+        src={image} 
+        size={80}
+        className={`user-avatar ${hasFrame ? 'with-frame' : ''}`}
+      />
+      
+      {/* 头像框图片 - 根据decoration显示 */}
+      {hasFrame && (
+        <img 
+          src={frameImage} 
+          alt="头像框" 
+          className="avatar-frame-image"
+        />
+      )}
+    </div>
+  );
+};
+
+export default AvatarWithFrame;
\ No newline at end of file
diff --git a/src/components/avatar-frame.png b/src/components/avatar-frame.png
new file mode 100644
index 0000000..16ad8f0
--- /dev/null
+++ b/src/components/avatar-frame.png
Binary files differ
diff --git a/src/pages/AuthStyle.css b/src/pages/AuthStyle.css
new file mode 100644
index 0000000..820c596
--- /dev/null
+++ b/src/pages/AuthStyle.css
@@ -0,0 +1,240 @@
+/* AuthStyle.css - 仅针对auth页面的样式，不影响其他页面 */
+
+/* 限定在.auth-wrapper内的样式才会生效 */
+.auth-wrapper {
+  /* 基础样式 */
+  --primary-color: #f9952f;
+  --primary-hover: #e08527;
+  --white: #ffffff;
+  --light-gray: #f5f5f5;
+  --dark-gray: #333333;
+  --error-color: #ff4d4f;
+
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  
+  /* 页面背景（仅影响.auth-wrapper内部） */
+  background-color: var(--light-gray);
+  background-image: linear-gradient(135deg, var(--primary-color) 0%, #f9c22f 100%);
+  background-size: 400% 400%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  animation: gradientBG 15s ease infinite;
+}
+
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* 容器样式 */
+.auth-wrapper .auth-container {
+  width: 100%;
+  max-width: 500px;
+  animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.auth-wrapper .auth-header {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: var(--white);
+}
+
+.auth-wrapper .auth-header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.auth-wrapper .auth-header p {
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+/* 卡片样式 */
+.auth-wrapper .auth-card {
+  background-color: var(--white);
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  padding: 2rem;
+  transition: all 0.3s ease;
+}
+
+.auth-wrapper .auth-card:hover {
+  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+}
+
+/* 标签页样式 */
+.auth-wrapper .tabs {
+  display: flex;
+  position: relative;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #eee;
+}
+
+.auth-wrapper .tab-btn {
+  flex: 1;
+  padding: 0.75rem;
+  text-align: center;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--dark-gray);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.auth-wrapper .tab-btn.active {
+  color: var(--primary-color);
+}
+
+.auth-wrapper .tab-indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 3px;
+  width: 50%;
+  background-color: var(--primary-color);
+  transition: all 0.3s ease;
+}
+
+/* 表单样式 */
+.auth-wrapper .auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.auth-wrapper .form-group {
+  position: relative;
+}
+
+.auth-wrapper .form-group input {
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+}
+
+.auth-wrapper .form-group input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(249, 149, 47, 0.2);
+  outline: none;
+}
+
+.auth-wrapper .form-group.with-button {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.auth-wrapper .form-group.with-button input {
+  flex: 1;
+}
+
+/* 按钮样式 */
+.auth-wrapper .submit-btn {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 1rem;
+  border-radius: 5px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.auth-wrapper .submit-btn:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-2px);
+}
+
+.auth-wrapper .submit-btn:active {
+  transform: translateY(0);
+}
+
+.auth-wrapper .code-btn {
+  background-color: var(--light-gray);
+  color: var(--dark-gray);
+  border: none;
+  padding: 0 1rem;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.auth-wrapper .code-btn:hover:not(:disabled) {
+  background-color: #e0e0e0;
+}
+
+.auth-wrapper .code-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* 消息样式 */
+.auth-wrapper .message {
+  padding: 0.75rem 1rem;
+  border-radius: 5px;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.auth-wrapper .message.error {
+  background-color: #fff2f0;
+  border: 1px solid var(--error-color);
+  color: var(--error-color);
+}
+
+/* 加载动画 */
+.auth-wrapper .spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255,255,255,0.3);
+  border-radius: 50%;
+  border-top-color: var(--white);
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 页脚样式 */
+.auth-wrapper .auth-footer {
+  text-align: center;
+  margin-top: 2rem;
+  color: var(--white);
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* 响应式设计 */
+@media (max-width: 600px) {
+  .auth-wrapper {
+    padding: 1rem;
+  }
+  
+  .auth-wrapper .auth-card {
+    padding: 1.5rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/ShopPage.jsx b/src/pages/ShopPage.jsx
new file mode 100644
index 0000000..bb7d989
--- /dev/null
+++ b/src/pages/ShopPage.jsx
@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { message, Button } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+
+const ShopPage = () => {
+  const navigate = useNavigate();
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [shopItems, setShopItems] = useState([
+    {
+      id: 1,
+      type: 'decoration',
+      name: '头像框',
+      description: '好看的头像框可以让别人更好地记住你',
+      price: 100,
+      image: 'https://img.icons8.com/?size=100&id=11730&format=png&color=000000'
+    },
+    {
+      id: 2,
+      type: 'decoration',
+      name: '对话框',
+      description: '闪亮的对话框，让您的消息更醒目',
+      price: 150,
+      image: 'https://img.icons8.com/?size=100&id=143&format=png&color=000000'
+    },
+    {
+      id: 3,
+      type: 'upload',
+      name: '上传量+100MB',
+      description: '增加100MB的上传量',
+      price: 50,
+      image: 'https://img.icons8.com/?size=100&id=368&format=png&color=000000'
+    },
+    {
+      id: 4,
+      type: 'invite',
+      name: '邀请码',
+      description: '一个邀请码，用于邀请好友加入',
+      price: 200,
+      image: 'https://img.icons8.com/?size=100&id=5465&format=png&color=000000'
+    }
+  ]);
+
+  useEffect(() => {
+    // 从localStorage获取用户信息
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      setUser(JSON.parse(userData));
+    }
+  }, []);
+
+  const handlePurchase = async (item) => {
+    if (!user) {
+      message.error('请先登录');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      let response;
+      const username = user.username;
+
+      switch (item.type) {
+        case 'decoration':
+          response = await axios.post('http://localhost:8080/shop/soldDecoration', null, {
+            params: {
+              buyername: username,
+              decoration: item.name,
+              price: item.price
+            }
+          });
+          break;
+        case 'upload':
+          response = await axios.post('http://localhost:8080/shop/soldUpload', null, {
+            params: {
+              buyername: username,
+              price: item.price,
+              upload: 100 // 假设每次购买增加100MB
+            }
+          });
+          break;
+        case 'invite':
+          response = await axios.post('http://localhost:8080/shop/soldInvite', null, {
+            params: {
+              buyername: username,
+              price: item.price
+            }
+          });
+          break;
+        default:
+          throw new Error('未知的商品类型');
+      }
+
+      if (response.data && response.data.success) {
+        message.success('购买成功！');
+        // 更新用户信息
+        user.credit -= item.price;
+        if(item.type=='decoration'){
+            user.decoration= user.decoration+" "+item.name;
+        }
+        localStorage.setItem('user', JSON.stringify(user));
+        setUser(user);
+      } else {
+        message.error(response.data.message || '购买失败');
+      }
+    } catch (error) {
+      console.error('购买出错:', error);
+      message.error(error.response?.data?.message || '购买过程中出错');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!user) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center' }}>
+        <h2>请先登录后再访问商城</h2>
+      </div>
+    );
+  }
+
+  return (
+    <div className="shop-container" style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
+      {/* 添加返回按钮 */}
+      <Button 
+        type="text" 
+        icon={<ArrowLeftOutlined />} 
+        onClick={() => navigate(-1)}
+        style={{ marginBottom: '20px', paddingLeft: 0 }}
+      >
+        返回
+      </Button>
+
+      <h1 style={{ textAlign: 'center', marginBottom: '30px' }}>商城</h1>
+      <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+          <h3>当前用户: {user.username}</h3>
+          <p>余额: {user.credit || 0} 积分</p>
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '20px' }}>
+        {shopItems.map((item) => (
+          <div key={item.id} style={{
+            border: '1px solid #ddd',
+            borderRadius: '8px',
+            padding: '15px',
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+          }}>
+            <div style={{ height: '150px', backgroundColor: '#f5f5f5', display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '15px' }}>
+              {item.image ? (
+                <img src={item.image} alt={item.name} style={{ maxWidth: '100%', maxHeight: '100%' }} />
+              ) : (
+                <span>商品图片</span>
+              )}
+            </div>
+            <h3 style={{ margin: '0 0 10px 0' }}>{item.name}</h3>
+            <p style={{ color: '#666', flexGrow: 1 }}>{item.description}</p>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '15px' }}>
+              <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#f56c6c' }}>{item.price} 积分</span>
+              <button
+                onClick={() => handlePurchase(item)}
+                disabled={loading || (user.credit < item.price)}
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: user.credit >= item.price ? '#1890ff' : '#ccc',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: user.credit >= item.price ? 'pointer' : 'not-allowed'
+                }}
+              >
+                {loading ? '处理中...' : '购买'}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ShopPage;
\ No newline at end of file
diff --git a/src/pages/UserAuth.jsx b/src/pages/UserAuth.jsx
new file mode 100644
index 0000000..2982270
--- /dev/null
+++ b/src/pages/UserAuth.jsx
@@ -0,0 +1,274 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import './AuthStyle.css'; // 引入样式文件
+
+const UserAuth = () => {
+  // 状态管理
+  const [registerData, setRegisterData] = useState({
+    username: '',
+    password: '',
+    code: '',
+    email: '',
+    emailcode: ''
+  });
+  const [loginData, setLoginData] = useState({
+    username: '',
+    password: ''
+  });
+  const [activeTab, setActiveTab] = useState('login');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [countdown, setCountdown] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 倒计时效果
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  // 输入处理
+  const handleChange = (e, formType) => {
+    const { name, value } = e.target;
+    formType === 'register' 
+      ? setRegisterData(prev => ({ ...prev, [name]: value }))
+      : setLoginData(prev => ({ ...prev, [name]: value }));
+  };
+
+  // 发送验证码
+  const handleSendCode = async () => {
+    if (!registerData.email) {
+      setError('请输入邮箱地址');
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      const response = await axios.post('http://localhost:8080/user/sendCode', null, {
+        params: { email: registerData.email }
+      });
+      
+      if (response.data?.success) {
+        setMessage('验证码已发送');
+        setError('');
+        setCountdown(60);
+      } else {
+        setError(response.data?.message || '发送失败');
+      }
+    } catch (err) {
+      setError(err.response?.data?.message || '发送出错');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 注册提交
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    if (Object.values(registerData).some(v => !v)) {
+      setError('请填写所有字段');
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      const response = await axios.post('http://localhost:8080/user/register', {
+        username: registerData.username,
+        password: registerData.password,
+        email: registerData.email
+      }, {
+        params: {
+          code: registerData.code,
+          emailcode: registerData.emailcode
+        }
+      });
+      
+      if (response.data?.success) {
+        setMessage('注册成功');
+        setActiveTab('login');
+        setRegisterData({
+          username: '',
+          password: '',
+          code: '',
+          email: '',
+          emailcode: ''
+        });
+      } else {
+        setError(response.data?.message || '注册失败');
+      }
+    } catch (err) {
+      setError(err.response?.data?.message || '注册出错');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 登录提交
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    if (!loginData.username || !loginData.password) {
+      setError('请输入用户名和密码');
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      const response = await axios.post('http://localhost:8080/user/login', null, {
+        params: {
+          username: loginData.username,
+          password: loginData.password
+        }
+      });
+      
+      if (response.data?.success) {
+        localStorage.setItem('user', JSON.stringify(response.data.user));
+        if(response.data.user.permission==0)
+        window.location.href = '/';
+        else
+        window.location.href = '/';
+      } else {
+        setError(response.data?.message || '登录失败');
+      }
+    } catch (err) {
+      setError(err.response?.data?.message || '登录出错');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-wrapper">
+    <div className="auth-container">
+      <div className="auth-header">
+        <h1>PT Share</h1>
+        <p>专业资源分享平台</p>
+      </div>
+      
+      <div className="auth-card">
+        <div className="tabs">
+          <button 
+            className={`tab-btn ${activeTab === 'login' ? 'active' : ''}`}
+            onClick={() => setActiveTab('login')}
+          >
+            登录
+          </button>
+          <button 
+            className={`tab-btn ${activeTab === 'register' ? 'active' : ''}`}
+            onClick={() => setActiveTab('register')}
+          >
+            注册
+          </button>
+          <div 
+            className="tab-indicator" 
+            style={{ left: activeTab === 'login' ? '0' : '50%' }}
+          />
+        </div>
+        
+        <div className={`message ${error ? 'error' : ''}`}>
+          {error || message}
+        </div>
+        
+        {activeTab === 'login' ? (
+          <form onSubmit={handleLogin} className="auth-form">
+            <div className="form-group">
+              <input
+                type="text"
+                name="username"
+                value={loginData.username}
+                onChange={(e) => handleChange(e, 'login')}
+                placeholder="用户名"
+                required
+              />
+            </div>
+            <div className="form-group">
+              <input
+                type="password"
+                name="password"
+                value={loginData.password}
+                onChange={(e) => handleChange(e, 'login')}
+                placeholder="密码"
+                required
+              />
+            </div>
+            <button type="submit" className="submit-btn" disabled={isLoading}>
+              {isLoading ? <div className="spinner"></div> : '登 录'}
+            </button>
+          </form>
+        ) : (
+          <form onSubmit={handleRegister} className="auth-form">
+            <div className="form-group">
+              <input
+                type="text"
+                name="username"
+                value={registerData.username}
+                onChange={(e) => handleChange(e, 'register')}
+                placeholder="用户名"
+                required
+              />
+            </div>
+            <div className="form-group">
+              <input
+                type="password"
+                name="password"
+                value={registerData.password}
+                onChange={(e) => handleChange(e, 'register')}
+                placeholder="密码"
+                required
+              />
+            </div>
+            <div className="form-group">
+              <input
+                type="text"
+                name="code"
+                value={registerData.code}
+                onChange={(e) => handleChange(e, 'register')}
+                placeholder="邀请码"
+                required
+              />
+            </div>
+            <div className="form-group">
+              <input
+                type="email"
+                name="email"
+                value={registerData.email}
+                onChange={(e) => handleChange(e, 'register')}
+                placeholder="邮箱"
+                required
+              />
+            </div>
+            <div className="form-group with-button">
+              <input
+                type="text"
+                name="emailcode"
+                value={registerData.emailcode}
+                onChange={(e) => handleChange(e, 'register')}
+                placeholder="验证码"
+                required
+              />
+              <button 
+                type="button" 
+                onClick={handleSendCode}
+                disabled={countdown > 0 || isLoading}
+                className="code-btn"
+              >
+                {countdown > 0 ? `${countdown}s` : '获取验证码'}
+              </button>
+            </div>
+            <button type="submit" className="submit-btn" disabled={isLoading}>
+              {isLoading ? <div className="spinner"></div> : '注 册'}
+            </button>
+          </form>
+        )}
+      </div>
+      
+      <div className="auth-footer">
+        <p>© {new Date().getFullYear()} PT Share - 专业资源分享平台</p>
+      </div>
+    </div>
+    </div>
+  );
+};
+
+export default UserAuth;
\ No newline at end of file
diff --git a/src/pages/UserCenter.jsx b/src/pages/UserCenter.jsx
new file mode 100644
index 0000000..2b71e65
--- /dev/null
+++ b/src/pages/UserCenter.jsx
@@ -0,0 +1,599 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { message, Button, Form, Input, Radio, Upload, Avatar, Modal, Card, Statistic, Row, Col } from 'antd';
+import { UserOutlined, LockOutlined, LogoutOutlined, UploadOutlined, DownloadOutlined, StarOutlined, MoneyCollectOutlined, ArrowLeftOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import AvatarWithFrame from '../components/AvatarWithFrame.jsx';
+
+const UserCenter = () => {
+  const [user, setUser] = useState(null);
+  const [form] = Form.useForm();
+  const [avatarForm] = Form.useForm();
+  const [passwordForm] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [avatarLoading, setAvatarLoading] = useState(false);
+  const [passwordLoading, setPasswordLoading] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [fadeAnimation, setFadeAnimation] = useState(false);
+  const navigate = useNavigate();
+
+  // Add fade-in animation when component mounts
+  useEffect(() => {
+    setFadeAnimation(true);
+  }, []);
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      const parsedUser = JSON.parse(userData);
+      setUser(parsedUser);
+      form.setFieldsValue({ sex: parsedUser.sex || '男' });
+    } else {
+      message.error('请先登录');
+      navigate('/login');
+    }
+  }, [form, navigate]);
+
+  const handleGoBack = () => {
+    navigate(-1); // 返回上一页
+  };
+
+  const handleSexChange = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      const response = await axios.post('http://localhost:8080/user/changesex', null, {
+        params: {
+          username: user.username,
+          sex: values.sex
+        }
+      });
+
+      if (response.data && response.data.success) {
+        message.success('性别修改成功');
+        const updatedUser = { ...user, sex: values.sex };
+        localStorage.setItem('user', JSON.stringify(updatedUser));
+        setUser(updatedUser);
+
+        // Add a subtle success animation effect
+        message.config({
+          duration: 2,
+          maxCount: 1,
+        });
+      } else {
+        message.error(response.data.message || '性别修改失败');
+      }
+    } catch (error) {
+      console.error('修改性别出错:', error);
+      message.error(error.response?.data?.message || '修改性别过程中出错');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAvatarChange = async (info) => {
+    if (info.file.status === 'uploading') {
+      setAvatarLoading(true);
+      return;
+    }
+
+    if (info.file.status === 'done') {
+      try {
+        const uploadRes = info.file.response;
+        if (!uploadRes?.success) {
+          throw new Error(uploadRes?.message || '上传失败');
+        }
+
+        const updateRes = await axios.post('http://localhost:8080/user/changeimage', null, {
+          params: {
+            username: user.username,
+            image: uploadRes.url
+          }
+        });
+
+        if (updateRes.data?.success) {
+          message.success('头像更新成功');
+          const updatedUser = {
+            ...user,
+            image: uploadRes.url,
+            ...updateRes.data.user
+          };
+          localStorage.setItem('user', JSON.stringify(updatedUser));
+          setUser(updatedUser);
+
+          // Add a subtle animation when avatar updates
+          message.config({
+            duration: 2,
+            maxCount: 1,
+          });
+        } else {
+          throw new Error(updateRes.data?.message || '更新失败');
+        }
+      } catch (err) {
+        message.error(err.message);
+      } finally {
+        setAvatarLoading(false);
+      }
+    }
+
+    if (info.file.status === 'error') {
+      message.error(info.file.response?.message || '上传出错');
+      setAvatarLoading(false);
+    }
+  };
+
+  const handlePasswordChange = async () => {
+    try {
+      const values = await passwordForm.validateFields();
+      setPasswordLoading(true);
+      const response = await axios.post('http://localhost:8080/user/changePassword', null, {
+        params: {
+          username: user.username,
+          oldpassword: values.oldPassword,
+          newpassword: values.newPassword
+        }
+      });
+
+      if (response.data && response.data.success) {
+        message.success('密码修改成功');
+        passwordForm.resetFields();
+        setIsModalVisible(false);
+
+        // Add a subtle success animation effect
+        message.config({
+          duration: 2,
+          maxCount: 1,
+        });
+      } else {
+        message.error(response.data.message || '密码修改失败');
+      }
+    } catch (error) {
+      console.error('修改密码出错:', error);
+      message.error(error.response?.data?.message || '修改密码过程中出错');
+    } finally {
+      setPasswordLoading(false);
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('user');
+    message.success('已退出登录');
+    navigate('/'); // 退出后跳转到登录页
+  };
+
+  const uploadProps = {
+    name: 'avatar',
+    action: 'http://localhost:8080/user/uploadimage',
+    showUploadList: false,
+    onChange: handleAvatarChange,
+    beforeUpload: (file) => {
+      const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type);
+      if (!isImage) {
+        message.error('只能上传JPG/PNG/GIF图片!');
+        return false;
+      }
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        message.error('图片必须小于10MB!');
+        return false;
+      }
+      return true;
+    },
+    transformResponse: (data) => {
+      try {
+        return JSON.parse(data);
+      } catch {
+        return { success: false, message: '解析响应失败' };
+      }
+    }
+  };
+
+  if (!user) {
+    return <div style={{ padding: '20px', textAlign: 'center' }}>加载中...</div>;
+  }
+
+  const calculateRatio = () => {
+    if (user.user_download === 0) return '∞';
+    return (user.user_upload / user.user_download).toFixed(2);
+  };
+
+  // Dynamic styles with the primary color #ffbd19
+  const primaryColor = '#ffbd19';
+  const secondaryColor = '#ffffff'; // White for contrast
+  const cardBackgroundColor = '#ffffff';
+  const cardShadow = '0 4px 12px rgba(255, 189, 25, 0.1)';
+  const textColor = '#333333';
+  const borderColor = '#ffbd19';
+
+  return (
+    <div style={{
+      maxWidth: '1000px',
+      margin: '0 auto',
+      padding: '20px',
+      animation: fadeAnimation ? 'fadeIn 0.5s ease-in' : 'none'
+    }}>
+      {/* CSS animations */}
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .stat-card:hover {
+          transform: translateY(-5px);
+          transition: transform 0.3s ease;
+          box-shadow: 0 6px 16px rgba(255, 189, 25, 0.2);
+        }
+        
+        .section-title {
+          position: relative;
+          padding-bottom: 10px;
+          margin-bottom: 20px;
+        }
+        
+        .section-title::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 50px;
+          height: 3px;
+          background-color: ${primaryColor};
+          border-radius: 3px;
+        }
+        
+        .avatar-upload-hint {
+          transition: all 0.3s ease;
+        }
+        
+        .avatar-upload-hint:hover {
+          background-color: rgba(255, 189, 25, 0.2);
+        }
+      `}</style>
+
+      {/* 添加返回按钮 */}
+      <Button
+        type="text"
+        icon={<ArrowLeftOutlined />}
+        onClick={handleGoBack}
+        style={{
+          marginBottom: '20px',
+          color: textColor,
+          transition: 'all 0.3s'
+        }}
+        onMouseOver={(e) => e.currentTarget.style.color = primaryColor}
+        onMouseOut={(e) => e.currentTarget.style.color = textColor}
+      >
+        返回
+      </Button>
+
+      <h1 style={{
+        textAlign: 'center',
+        marginBottom: '30px',
+        color: textColor,
+        fontWeight: 'bold'
+      }}>
+        用户中心
+      </h1>
+
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '30px'
+      }}>
+        {/* 基本信息展示 */}
+        <div style={{
+          backgroundColor: cardBackgroundColor,
+          padding: '20px',
+          borderRadius: '8px',
+          boxShadow: cardShadow
+        }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: '20px'
+          }}>
+            <Upload {...uploadProps}>
+              <div style={{ position: 'relative', cursor: 'pointer' }}>
+                <AvatarWithFrame user={user} />
+                <div style={{
+                  position: 'absolute',
+                  bottom: -25,
+                  right: 20,
+                  backgroundColor: 'rgba(0,0,0,0.5)',
+                  color: 'white',
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  fontSize: '12px'
+                }}>
+                  <UploadOutlined /> 修改
+                </div>
+              </div>
+            </Upload>
+            <div style={{
+              marginLeft: '20px', // Adjusted position
+              flex: 1
+            }}>
+              <h2 style={{ margin: '0', color: textColor }}>{user.username}</h2>
+              <p style={{ margin: '5px 0 0', color: '#666' }}>用户等级: Lv {user.grade_id}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 数据统计展示区 */}
+        <Card
+          title={
+            <div className="section-title">
+              数据统计
+            </div>
+          }
+          bordered={false}
+          style={{
+            borderRadius: '8px',
+            boxShadow: cardShadow
+          }}
+        >
+          <Row gutter={16}>
+            <Col span={6}>
+              <Card
+                className="stat-card"
+                hoverable
+                style={{
+                  borderRadius: '8px',
+                  textAlign: 'center',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <Statistic
+                  title="积分"
+                  value={user.credit || 0}
+                  prefix={<MoneyCollectOutlined style={{ color: primaryColor }} />}
+                  valueStyle={{ color: '#3f8600' }}
+                />
+              </Card>
+            </Col>
+            <Col span={6}>
+              <Card
+                className="stat-card"
+                hoverable
+                style={{
+                  borderRadius: '8px',
+                  textAlign: 'center',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <Statistic
+                  title="上传量 (MB)"
+                  value={(user.user_upload / (1024 * 1024)).toFixed(2) || 0}
+                  prefix={<UploadOutlined style={{ color: primaryColor }} />}
+                  valueStyle={{ color: '#1890ff' }}
+                />
+              </Card>
+            </Col>
+            <Col span={6}>
+              <Card
+                className="stat-card"
+                hoverable
+                style={{
+                  borderRadius: '8px',
+                  textAlign: 'center',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <Statistic
+                  title="下载量 (MB)"
+                  value={(user.user_download / (1024 * 1024)).toFixed(2) || 0}
+                  prefix={<DownloadOutlined style={{ color: primaryColor }} />}
+                  valueStyle={{ color: '#722ed1' }}
+                />
+              </Card>
+            </Col>
+            <Col span={6}>
+              <Card
+                className="stat-card"
+                hoverable
+                style={{
+                  borderRadius: '8px',
+                  textAlign: 'center',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <Statistic
+                  title="分享率"
+                  value={calculateRatio()}
+                  prefix={<StarOutlined style={{ color: primaryColor }} />}
+                  valueStyle={{ color: '#faad14' }}
+                />
+              </Card>
+            </Col>
+          </Row>
+        </Card>
+
+        {/* 性别设置 */}
+        <div style={{
+          backgroundColor: cardBackgroundColor,
+          padding: '20px',
+          borderRadius: '8px',
+          boxShadow: cardShadow
+        }}>
+          <h3 className="section-title">性别设置</h3>
+          <Form form={form} layout="inline">
+            <Form.Item name="sex">
+              <Radio.Group>
+                <Radio value="男">男</Radio>
+                <Radio value="女">女</Radio>
+                <Radio value="保密">保密</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item>
+              <Button
+                type="primary"
+                onClick={handleSexChange}
+                loading={loading}
+                style={{
+                  backgroundColor: primaryColor,
+                  borderColor: primaryColor,
+                  transition: 'all 0.3s'
+                }}
+                onMouseOver={(e) => {
+                  e.currentTarget.style.backgroundColor = '#ffc940';
+                  e.currentTarget.style.borderColor = '#ffc940';
+                }}
+                onMouseOut={(e) => {
+                  e.currentTarget.style.backgroundColor = primaryColor;
+                  e.currentTarget.style.borderColor = primaryColor;
+                }}
+              >
+                确认修改
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+
+        {/* 修改密码 */}
+        <div style={{
+          backgroundColor: cardBackgroundColor,
+          padding: '20px',
+          borderRadius: '8px',
+          boxShadow: cardShadow
+        }}>
+          <h3 className="section-title">修改密码</h3>
+          <Button
+            type="primary"
+            onClick={() => setIsModalVisible(true)}
+            icon={<LockOutlined />}
+            style={{
+              backgroundColor: primaryColor,
+              borderColor: primaryColor,
+              transition: 'all 0.3s'
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.backgroundColor = '#ffc940';
+              e.currentTarget.style.borderColor = '#ffc940';
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.backgroundColor = primaryColor;
+              e.currentTarget.style.borderColor = primaryColor;
+            }}
+          >
+            修改密码
+          </Button>
+        </div>
+
+        {/* 退出登录 */}
+        <div style={{ textAlign: 'center' }}>
+          <Button
+            danger
+            onClick={handleLogout}
+            icon={<LogoutOutlined />}
+            style={{
+              transition: 'all 0.3s'
+            }}
+            onMouseOver={(e) => e.currentTarget.style.opacity = '0.8'}
+            onMouseOut={(e) => e.currentTarget.style.opacity = '1'}
+          >
+            退出登录
+          </Button>
+        </div>
+      </div>
+
+      {/* 修改密码模态框 */}
+      <Modal
+        title={
+          <div style={{
+            color: primaryColor,
+            fontWeight: 'bold'
+          }}>
+            修改密码
+          </div>
+        }
+        open={isModalVisible}
+        onCancel={() => setIsModalVisible(false)}
+        footer={null}
+        centered
+        width={400}
+        className="modal-content"
+        style={{
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+        }}
+      >
+        <Form
+          form={passwordForm}
+          layout="vertical"
+          onFinish={handlePasswordChange}
+        >
+          <Form.Item
+            name="oldPassword"
+            label="旧密码"
+            rules={[{ required: true, message: '请输入旧密码' }]}
+          >
+            <Input.Password
+              placeholder="请输入当前密码"
+              style={{ borderRadius: '4px' }}
+            />
+          </Form.Item>
+          <Form.Item
+            name="newPassword"
+            label="新密码"
+            rules={[
+              { required: true, message: '请输入新密码' },
+              { min: 3, message: '密码长度不能少于3位' }
+            ]}
+          >
+            <Input.Password
+              placeholder="请输入新密码"
+              style={{ borderRadius: '4px' }}
+            />
+          </Form.Item>
+          <Form.Item
+            name="confirmPassword"
+            label="确认新密码"
+            dependencies={['newPassword']}
+            rules={[
+              { required: true, message: '请确认新密码' },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (!value || getFieldValue('newPassword') === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error('两次输入的密码不一致!'));
+                },
+              }),
+            ]}
+          >
+            <Input.Password
+              placeholder="请再次输入新密码"
+              style={{ borderRadius: '4px' }}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              loading={passwordLoading}
+              style={{
+                width: '100%',
+                backgroundColor: primaryColor,
+                borderColor: primaryColor,
+                transition: 'all 0.3s'
+              }}
+              onMouseOver={(e) => {
+                e.currentTarget.style.backgroundColor = '#ffc940';
+                e.currentTarget.style.borderColor = '#ffc940';
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.backgroundColor = primaryColor;
+                e.currentTarget.style.borderColor = primaryColor;
+              }}
+            >
+              确认修改
+            </Button>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default UserCenter;
\ No newline at end of file