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/UserManagement.jsx b/src/components/UserManagement.jsx
new file mode 100644
index 0000000..c0ede42
--- /dev/null
+++ b/src/components/UserManagement.jsx
@@ -0,0 +1,418 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Table, 
+  Button, 
+  Modal, 
+  Image, 
+  message, 
+  Spin, 
+  Input, 
+  Select,
+  Pagination,
+  Space
+} from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import axios from 'axios';
+
+const { confirm } = Modal;
+const { Option } = Select;
+
+const UserManagement = () => {
+  // 状态管理
+  const [users, setUsers] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [currentUserId, setCurrentUserId] = useState(null);
+  const [applyExamLoading, setApplyExamLoading] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  // 获取当前用户ID
+  useEffect(() => {
+    const userId = 1; // 示例，实际从认证系统获取
+    setCurrentUserId(userId ? parseInt(userId) : null);
+  }, []);
+
+  // 获取所有用户数据
+  useEffect(() => {
+    fetchAllUsers();
+  }, [searchKeyword]);
+
+  // 获取所有用户的函数
+  const fetchAllUsers = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await axios.get('http://localhost:8080/user/alluser');
+      setUsers(res.data.data);
+      setCurrentPage(1); // 重置为第一页
+    } catch (err) {
+      console.error('获取用户失败', err);
+      setError('获取用户列表失败，请稍后重试');
+      message.error('获取用户列表失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  console.log('当前用户列表:', users);
+
+  // 删除用户
+  const handleDeleteUser = async (username) => {
+    confirm({
+      title: '确认删除',
+      icon: <ExclamationCircleOutlined />,
+      content: '确定要删除这个用户吗？此操作不可恢复！',
+      onOk: async () => {
+        try {
+          await axios.delete(`http://localhost:8080/user/DeleteUser`, {
+            params: { username: username }
+          });
+          setUsers(users.filter(user => user.username !== username));
+          message.success('用户删除成功');
+        } catch (err) {
+          console.error('用户删除失败', err);
+          if (err.response && err.response.status === 403) {
+            message.error('无权删除此用户');
+          } else {
+            message.error('删除用户失败');
+          }
+        }
+      }
+    });
+  };
+
+  // 搜索种子
+  const handleSearch = async () => {
+    if (!searchKeyword.trim()) {
+      fetchAllUsers();
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await axios.get(`http://localhost:8080/user/finduser`, {
+        params: { keyword: searchKeyword },
+      });
+      setUsers(res.data.data);
+      setCurrentPage(1); // 搜索后重置为第一页
+    } catch (err) {
+      console.error('搜索失败', err);
+      setError('搜索失败，请稍后重试');
+      message.error('搜索失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 月度下载量考核
+  const handleMonthExam = async () => {
+    if (!currentUserId) {
+      message.warning('请先登录');
+      return;
+    }
+    
+    setApplyExamLoading(true);
+    try {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补零
+      const day = String(now.getDate()).padStart(2, '0');        // 日期补零
+      const formattedDate = `${year}-${month}-${day}`;
+
+      const currentDate = new Date();
+        const lastMonthDate = new Date(
+            currentDate.getFullYear(),
+            currentDate.getMonth() - 1,  // 月份减1
+            currentDate.getDate()       // 保持相同的日
+        );
+
+        if (lastMonthDate.getDate() !== currentDate.getDate()) {
+            lastMonthDate.setDate(0); // 设置为上个月的最后一天
+        }
+        const year1 = lastMonthDate.getFullYear();
+        const month1 = String(lastMonthDate.getMonth() + 1).padStart(2, '0');
+        const day1 = String(lastMonthDate.getDate()).padStart(2, '0');
+        const formattedDate1 = `${year1}-${month1}-${day1}`;
+
+
+
+      const res = await axios.post('http://localhost:8080/exam/MonthDownload', null, {
+        params: { startDate: formattedDate1,endDate: formattedDate }
+      });
+      
+      if (res.data.success) {
+        message.success(res.data.message);
+        fetchAllUsers(); // 刷新种子列表
+      }
+    } catch (err) {
+      console.error('月度考核失败', err);
+      if (err.response && err.response.status === 403) {
+        message.error('无权执行此操作');
+      } else {
+        message.error('月度考核失败');
+      }
+    } finally {
+      setApplyExamLoading(false);
+    }
+  };
+
+  // 季度上传量考核
+  const handleQuarterExam = async () => {
+    if (!currentUserId) {
+      message.warning('请先登录');
+      return;
+    }
+    
+    setApplyExamLoading(true);
+    try {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补零
+      const day = String(now.getDate()).padStart(2, '0');        // 日期补零
+      const formattedDate = `${year}-${month}-${day}`;
+
+      const currentDate = new Date();
+
+        const lastMonthDate = new Date(
+            currentDate.getFullYear(),
+            currentDate.getMonth() - 3,  // 月份减1
+            currentDate.getDate()       // 保持相同的日
+        );
+
+        if (lastMonthDate.getDate() !== currentDate.getDate()) {
+            lastMonthDate.setDate(0); // 设置为上个月的最后一天
+        }
+        const year1 = lastMonthDate.getFullYear();
+        const month1 = String(lastMonthDate.getMonth() + 1).padStart(2, '0');
+        const day1 = String(lastMonthDate.getDate()).padStart(2, '0');
+        const formattedDate1 = `${year1}-${month1}-${day1}`;
+
+
+
+      const res = await axios.post('http://localhost:8080/exam/QuarterUpload', null, {
+        params: { startDate: formattedDate1,endDate: formattedDate }
+      });
+      
+      if (res.data.success) {
+        message.success(res.data.message);
+        fetchAllUsers(); // 刷新种子列表
+      }
+    } catch (err) {
+      console.error('季度考核失败', err);
+      if (err.response && err.response.status === 403) {
+        message.error('无权执行此操作');
+      } else {
+        message.error('月度考核失败');
+      }
+    } finally {
+      setApplyExamLoading(false);
+    }
+  };
+
+  // 分页数据计算
+  const getCurrentPageData = () => {
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return users;//.slice(start, end);
+  };
+
+  // 页码变化处理
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  // 每页条数变化处理
+  const handlePageSizeChange = (current, size) => {
+    setPageSize(size);
+    setCurrentPage(1); // 重置为第一页
+  };
+
+  // 格式化文件大小
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  ////////////////////////////////////////////////////////////////////////////
+  return (
+    <div className="p-4 max-w-7xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">用户管理</h1>
+
+      {/* 搜索框 */}
+      <div className="mb-4 flex items-center">
+        <Input
+          placeholder="搜索用户..."
+          value={searchKeyword}
+          onChange={(e) => setSearchKeyword(e.target.value)}
+          style={{ width: 300 }}
+          onPressEnter={handleSearch}
+        />
+        <Button 
+          type="primary" 
+          onClick={handleSearch}
+          style={{ marginLeft: 8 }}
+        >
+          搜索
+        </Button>
+      </div>
+
+      {/* 右上角按钮 */}
+      <Space>
+        <Button
+            type="primary"
+            loading={applyExamLoading}
+            onClick={handleMonthExam}
+        >
+            月度下载量检查
+        </Button>
+        <Button
+            type="primary"
+            loading={applyExamLoading}
+            onClick={handleQuarterExam}
+        >
+            季度上传量检查
+        </Button>
+    </Space>
+
+      {/* 加载状态 */}
+      {isLoading && <Spin size="large" style={{ display: 'block', margin: '100px auto' }} />}
+
+      {/* 错误提示 */}
+      {error && <div className="mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-200">{error}</div>}
+
+      {/* 种子列表表格 */}
+      {!isLoading && !error && (
+        <>
+          <Table
+            columns={[
+              {
+                title: '用户名',
+                dataIndex: 'username',
+                key: 'username'
+              },
+              {
+                title: '密码',
+                dataIndex: 'password',
+                key: 'password'
+              },
+              {
+                title: '上传量',
+                dataIndex: 'user_upload',
+                key: 'user_upload',
+                render: (size) => formatFileSize(size)
+              },
+              {
+                title: '下载量',
+                dataIndex: 'user_download',
+                key: 'user_download',
+                render: (size) => formatFileSize(size)
+              },
+              {
+                title: '保种积分',
+                dataIndex: 'credit',
+                key: 'credit',
+              },
+              {
+                              title: '头像',
+                              dataIndex: 'image',
+                              key: 'image',
+                              render: (text) => text ? (
+                                <Image 
+                                  src={text} 
+                                  width={50} 
+                                  height={50} 
+                                  preview={{ maskClosable: true }}
+                                />
+                              ) : (
+                                <div className="w-16 h-16 bg-gray-200 flex items-center justify-center">无头像</div>
+                              )
+                            },
+              {
+                title: '性别',
+                dataIndex: 'sex',
+                key: 'sex',
+              },
+              {
+                title: '用户id',
+                dataIndex: 'userid',
+                key: 'userid'
+              },
+              {
+                title: '用户等级',
+                dataIndex: 'grade_id',
+                key: 'grade_id'
+              },
+              {
+                title: 'passkey',
+                dataIndex: 'passkey',
+                key: 'passkey'
+              },
+              {
+                title: '分享率',
+                dataIndex: 'ratio',
+                key: 'ratio'
+              },
+              {
+                title: '年龄',
+                dataIndex: 'age',
+                key: 'age'
+              },
+              {
+                title: '邮箱',
+                dataIndex: 'email',
+                key: 'email'
+              },
+              {
+                title: '用户权限',
+                dataIndex: 'permission',
+                key: 'permission'
+              },
+              {
+                title: '操作',
+                key: 'action',
+                render: (_, record) => (
+                  <Space>
+                    <Button 
+                      danger 
+                      onClick={() => handleDeleteUser(record.username)}
+                      loading={isLoading}
+                    >
+                      删除
+                    </Button>
+                  </Space>
+                )
+              }
+            ]}
+            dataSource={getCurrentPageData()}
+            rowKey="userid"
+            pagination={false}
+            loading={isLoading}
+          />
+
+          {/* 分页控件 */}
+          {users.length > 0 && (
+            <div style={{ marginTop: 16, textAlign: 'center' }}>
+              <Pagination
+                current={currentPage}
+                pageSize={pageSize}
+                total={users.length}
+                onChange={handlePageChange}
+                onShowSizeChange={handlePageSizeChange}
+                showSizeChanger
+                showTotal={(total) => `共 ${total} 条记录`}
+                pageSizeOptions={['10', '20', '50']}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default UserManagement;
\ 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/introGuide.js b/src/introGuide.js
new file mode 100644
index 0000000..bcfe58e
--- /dev/null
+++ b/src/introGuide.js
@@ -0,0 +1,43 @@
+import introJs from 'intro.js';
+
+export const startIntroGuide = () => {
+  introJs().setOptions({
+    steps: [
+      {
+        intro: '欢迎加入我们，这是一个优质的种子资源分享社区。让我们快速了解一下主要功能，帮助您更好地使用我们的平台。'
+      },
+     {
+        element: document.querySelector('#torrent-activity'),
+        intro: '这里是首页，包括近期活动速递，资源推荐，您可以浏览最新活动，参加领取奖励，提升您的等级！'
+      },
+      {
+        element: document.querySelector('#community-posts'),
+        intro: '这里是社区交流中心，您可以发布帖子、评论互动、发布需求贴悬赏求助，还能查看我的帖子！'
+      },
+      {
+        element: document.querySelector('#torrent-list'),
+        intro: '这里是全站种子列表，您可以按分类浏览、搜索特定资源、查看详细信息和下载种子文件。所有优质资源都在这里！'
+      },
+      {
+        element: document.querySelector('#torrent-upload'),
+        intro: '这是快速上传种子入口，操作简单易上手，快来上传你的第一个资源！'
+      },
+      {
+        element: document.querySelector('#community-friends'),
+        intro: '这里是好友聊天区，您可以添加和管理好友、畅聊分享！'
+      },
+      {
+        element: document.querySelector('#torrent-shop'),
+        intro: '用您的积分兑换个人装饰、上传量和邀请码，提升使用体验，邀请更多好友。'
+      },
+      {
+        element: document.querySelector('#help-button'),
+        intro: '小贴士：您可以随时点击右上角的帮助按钮重新查看引导和查看文档。祝您使用愉快！'
+      }
+    ],
+    nextLabel: '下一步',
+    prevLabel: '上一步',
+    skipLabel: '跳过',
+    doneLabel: '完成'
+  }).start();
+};
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/HelpPage.css b/src/pages/HelpPage.css
new file mode 100644
index 0000000..6809108
--- /dev/null
+++ b/src/pages/HelpPage.css
@@ -0,0 +1,78 @@
+.help-page-wrapper {
+  min-height: 100vh;
+  background-color: #fff7e6; /* 淡橙色背景 */
+  padding: 3rem 1rem; /* 上下3rem，左右1rem */
+  box-sizing: border-box;
+}
+
+.help-container {
+  max-width: 960px; /* 大约是4xl宽度 */
+  margin: 0 auto;
+  background: white;
+  border: 4px solid black;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.help-title {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid black;
+  padding-bottom: 1rem;
+}
+
+.help-content {
+  max-width: none; /* 让内容最大宽度不限制 */
+  margin: 0 auto;
+  padding: 0 2rem; /* 左右边距2rem */
+  box-sizing: border-box;
+}
+
+/* markdown 内容排版，配合 rehype-highlight 样式 */
+.help-content p {
+  margin: 1rem 0;
+  line-height: 1.6;
+}
+
+.help-content h1 {
+  font-size: 1.5rem;
+  margin: 2rem 0 1rem;
+  font-weight: 700;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 0.5rem;
+}
+
+.help-content h2 {
+  font-size: 1.25rem;
+  margin: 1.5rem 0 1rem;
+  font-weight: 600;
+}
+
+.help-content code {
+  background-color: #f3f4f6;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+.help-content pre {
+  background-color: #f3f4f6;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+  border: 1px solid #d1d5db;
+}
+
+.help-content blockquote {
+  border-left: 4px solid #9ca3af;
+  padding-left: 1rem;
+  font-style: italic;
+  color: #6b7280;
+  margin: 1rem 0;
+}
diff --git a/src/pages/HelpPage.jsx b/src/pages/HelpPage.jsx
new file mode 100644
index 0000000..ec5161b
--- /dev/null
+++ b/src/pages/HelpPage.jsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import './HelpPage.css'; // 引入样式
+import Navbar from '../components/Navbar'; // 导航栏组件
+
+export default function HelpPage() {
+  const [markdown, setMarkdown] = useState('');
+
+  useEffect(() => {
+    fetch('/help.md')
+      .then(res => {
+        if (!res.ok) throw new Error('Markdown 文件加载失败');
+        return res.text();
+      })
+      .then(text => setMarkdown(text))
+      .catch(() => setMarkdown('# 帮助文档加载失败，请稍后再试。'));
+  }, []);
+
+   return (
+     <div>
+      <Navbar />
+      <div className="help-page-wrapper">
+        <div className="help-container">
+          <h1 className="help-title">📚 帮助文档</h1>
+          <div className="help-content">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeHighlight]}
+              components={{
+                h1: ({ node, ...props }) => <h1 {...props} />,
+                h2: ({ node, ...props }) => <h2 {...props} />,
+                p: ({ node, ...props }) => <p {...props} />,
+                code: ({ node, ...props }) => <code {...props} />,
+                pre: ({ node, ...props }) => <pre {...props} />,
+                blockquote: ({ node, ...props }) => <blockquote {...props} />,
+              }}
+            >
+              {markdown}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
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