diff --git a/front/src/AdminPage.css b/front/src/AdminPage.css
new file mode 100644
index 0000000..3da371c
--- /dev/null
+++ b/front/src/AdminPage.css
@@ -0,0 +1,447 @@
+/* AdminPage 特定样式 - 翡翠园林风格 */
+@import './SharedStyles.css';
+
+/* 管理员页面容器 */
+.admin-page-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 20%, #8fbc8f 40%, #98fb98 60%, #f0fff0 100%);
+  position: relative;
+  font-family: 'Lora', serif;
+  overflow-x: hidden;
+}
+
+/* 背景装饰元素 */
+.admin-page-container::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(144, 238, 144, 0.08) 0%, transparent 50%);
+  animation: backgroundShift 25s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 主内容区域 */
+.admin-main-content {
+  position: relative;
+  z-index: 10;
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* 页面标题 */
+.admin-title {
+  text-align: center;
+  margin: 30px 0 40px 0;
+  color: #fff;
+  font-family: 'Playfair Display', serif;
+  font-size: 3rem;
+  font-weight: 700;
+  text-shadow: 
+    0 4px 12px rgba(45, 80, 22, 0.4),
+    0 2px 8px rgba(0, 0, 0, 0.3);
+  letter-spacing: 2px;
+  position: relative;
+}
+
+.admin-title::after {
+  content: '';
+  position: absolute;
+  bottom: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 120px;
+  height: 4px;
+  background: linear-gradient(90deg, transparent, #90ee90, transparent);
+  border-radius: 2px;
+  box-shadow: 0 0 15px rgba(144, 238, 144, 0.6);
+}
+
+/* 系统参数卡片 */
+.admin-config-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 25px 35px;
+  margin-bottom: 40px;
+  box-shadow: 
+    0 20px 60px rgba(45, 80, 22, 0.12),
+    0 8px 25px rgba(144, 238, 144, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.admin-config-card::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #f0fff0 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 27px;
+  z-index: -1;
+  animation: borderGlow 4s ease-in-out infinite;
+}
+
+.admin-config-label {
+  font-weight: 700;
+  color: #2d5016;
+  font-size: 18px;
+  letter-spacing: 1px;
+}
+
+.admin-config-item {
+  color: #4a7c59;
+  font-weight: 600;
+  font-size: 16px;
+  padding: 8px 16px;
+  background: rgba(144, 238, 144, 0.1);
+  border-radius: 12px;
+  border: 1px solid rgba(144, 238, 144, 0.3);
+  transition: all 0.3s ease;
+}
+
+.admin-config-item:hover {
+  background: rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(144, 238, 144, 0.3);
+}
+
+/* 用户列表区域 */
+.admin-section {
+  margin-bottom: 40px;
+}
+
+.admin-section-title {
+  color: #fff;
+  font-family: 'Playfair Display', serif;
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  letter-spacing: 1px;
+}
+
+.admin-section-title.cheat {
+  color: #ffcdd2;
+}
+
+.admin-section-title.suspicious {
+  color: #fff3e0;
+}
+
+/* 表格容器 - 使用与HomePage一致的样式 */
+.admin-table-container {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 0;
+  margin: 30px 0;
+  box-shadow: 
+    0 20px 60px rgba(45, 80, 22, 0.12),
+    0 8px 25px rgba(144, 238, 144, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.admin-table-container::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #f0fff0 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 27px;
+  z-index: -1;
+  animation: borderGlow 4s ease-in-out infinite;
+}
+
+/* 表格样式 */
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'Lora', serif;
+  background: transparent;
+}
+
+.admin-table thead {
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
+}
+
+.admin-table th {
+  padding: 18px 24px;
+  text-align: left;
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: 1px;
+  border-bottom: 3px solid #90ee90;
+  position: relative;
+}
+
+.admin-table th:first-child {
+  border-radius: 23px 0 0 0;
+}
+
+.admin-table th:last-child {
+  border-radius: 0 23px 0 0;
+}
+
+.admin-table tbody tr {
+  transition: all 0.3s ease;
+  border-bottom: 1px solid rgba(144, 238, 144, 0.2);
+}
+
+.admin-table tbody tr:hover {
+  background: rgba(144, 238, 144, 0.1);
+  transform: translateX(5px);
+  box-shadow: 0 4px 15px rgba(144, 238, 144, 0.15);
+}
+
+.admin-table tbody tr:last-child:hover td:first-child {
+  border-radius: 0 0 0 23px;
+}
+
+.admin-table tbody tr:last-child:hover td:last-child {
+  border-radius: 0 0 23px 0;
+}
+
+.admin-table td {
+  padding: 16px 24px;
+  color: #2d5016;
+  font-size: 15px;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+}
+
+.admin-table tbody tr:hover td {
+  color: #1a5c1a;
+}
+
+/* 状态文本样式 */
+.status-banned {
+  color: #e53935 !important;
+  font-weight: 600;
+}
+
+.status-normal {
+  color: #43a047 !important;
+  font-weight: 600;
+}
+
+.status-warning {
+  color: #ff9800 !important;
+  font-weight: 600;
+}
+
+/* 按钮样式 */
+.admin-btn {
+  border: none;
+  border-radius: 12px;
+  padding: 8px 18px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: 'Lora', serif;
+  letter-spacing: 0.5px;
+  position: relative;
+  overflow: hidden;
+}
+
+.admin-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  transform: translate(-50%, -50%);
+}
+
+.admin-btn:hover::before {
+  width: 100px;
+  height: 100px;
+}
+
+.admin-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+
+.admin-btn-unban {
+  background: linear-gradient(135deg, #13F31E, #43a047);
+  color: white;
+}
+
+.admin-btn-ban {
+  background: linear-gradient(135deg, #e53935, #c62828);
+  color: white;
+}
+
+/* 导航按钮区域 */
+.admin-nav-buttons {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  margin-top: 50px;
+  flex-wrap: wrap;
+}
+
+.admin-nav-btn {
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
+  color: white;
+  border: none;
+  border-radius: 15px;
+  padding: 15px 35px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: 'Lora', serif;
+  letter-spacing: 1px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(45, 80, 22, 0.3);
+}
+
+.admin-nav-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(144, 238, 144, 0.3);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  transform: translate(-50%, -50%);
+}
+
+.admin-nav-btn:hover::before {
+  width: 200px;
+  height: 200px;
+}
+
+.admin-nav-btn:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 40px rgba(45, 80, 22, 0.4);
+}
+
+.admin-nav-btn.appeal {
+  background: linear-gradient(135deg, #1976d2, #1565c0);
+}
+
+.admin-nav-btn.migration {
+  background: linear-gradient(135deg, #43a047, #388e3c);
+}
+
+.admin-nav-btn.promotion {
+  background: linear-gradient(135deg, #ff9800, #f57c00);
+}
+
+/* 动画效果 */
+@keyframes backgroundShift {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.1) rotate(1deg); }
+}
+
+@keyframes borderGlow {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .admin-main-content {
+    padding: 0 15px;
+  }
+  
+  .admin-title {
+    font-size: 2.2rem;
+  }
+  
+  .admin-config-card {
+    padding: 20px 25px;
+    gap: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .admin-table-container {
+    margin: 20px 0;
+    border-radius: 20px;
+  }
+  
+  .admin-table th,
+  .admin-table td {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  
+  .admin-nav-buttons {
+    gap: 20px;
+  }
+  
+  .admin-nav-btn {
+    padding: 12px 28px;
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .admin-title {
+    font-size: 1.8rem;
+  }
+  
+  .admin-config-card {
+    padding: 15px 20px;
+  }
+  
+  .admin-table th,
+  .admin-table td {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+  
+  .admin-nav-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .admin-nav-btn {
+    width: 100%;
+    max-width: 300px;
+  }
+}
diff --git a/front/src/AdminPage.js b/front/src/AdminPage.js
index f063c09..218bc9a 100644
--- a/front/src/AdminPage.js
+++ b/front/src/AdminPage.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import "./AdminPage.css";
 
 // 示例数据
 const initialConfig = {
@@ -117,106 +118,108 @@
     }, []);
 
     return (
-        <div style={{ padding: 40, maxWidth: 900, margin: "0 auto" }}>
-            <h1 style={{ textAlign: "center", marginBottom: 32 }}>管理员页面</h1>
-            {/* 参数设置 */}
-            <div style={{ marginBottom: 32, padding: 18, background: "#f7faff", borderRadius: 12, display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between" }}>
-                <b>系统参数：</b>
-                <span>FarmNumber: {config.FarmNumber}</span>
-                <span>FakeTime: {config.FakeTime}</span>
-                <span>BegVote: {config.BegVote}</span>
-                <span>CheatTime: {config.CheatTime}</span>
-            </div>
-            {/* 作弊用户 */}
-            <div style={{ marginBottom: 32 }}>
-                <h2 style={{ color: "#e53935" }}>作弊用户</h2>
-                <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 18 }}>
-                    <thead>
-                        <tr style={{ background: "#f5f5f5" }}>
-                            {/* <th>user_id</th> */}
-                            <th>email</th>
-                            <th>username</th>
-                            <th>account_status</th>
-                            <th>操作</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {cheatUsers.map((u) => (
-                            <tr key={u.userid}>
-                                {/* <td>{u.userid}</td> */}
-                                <td>{u.email}</td>
-                                <td>{u.username}</td>
-                                <td style={{ color: "#e53935" }}>
-                                    {"封禁"}
-                                </td>
-                                <td>
-                                    <button
-                                        style={{ background: "#13F31E", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
-                                        onClick={() => handleUnban(u)}
-                                    >
-                                        解封
-                                    </button>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-            {/* 可疑用户 */}
-            <div style={{ marginBottom: 32 }}>
-                <h2 style={{ color: "#ff9800" }}>可疑用户</h2>
-                <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff" }}>
-                    <thead>
-                        <tr style={{ background: "#f5f5f5" }}>
-                            {/* <th>user_id</th> */}
-                            <th>email</th>
-                            <th>username</th>
-                            <th>account_status</th>
-                            <th>操作</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {suspiciousUsers.map((u) => (
-                            <tr key={u.user_id}>
-                                {/* <td>{u.user_id}</td> */}
-                                <td>{u.email}</td>
-                                <td>{u.username}</td>
-                                <td style={{ color: u.account_status === 1 ? "#e53935" : "#43a047" }}>
-                                    {u.account_status === 1 ? "封禁" : "正常"}
-                                </td>
-                                <td>
-                                    <button
-                                        style={{ background: "#e53935", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
-                                        onClick={() => handleBan(u)}
-                                    >
-                                        封禁
-                                    </button>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-            {/* 跳转按钮 */}
-            <div style={{ display: "flex", gap: 24, justifyContent: "center" }}>
-                <button
-                    style={{ background: "#1976d2", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
-                    onClick={() => navigate("/appeal-review")}
-                >
-                    用户申诉
-                </button>
-                <button
-                    style={{ background: "#43a047", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
-                    onClick={() => navigate("/migration-review")}
-                >
-                    用户迁移
-                </button>
-                <button
-                    style={{ background: "#ff9800", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
-                    onClick={() => navigate("/seed-promotion")}
-                >
-                    促销管理
-                </button>
+        <div className="admin-page-container">
+            <div className="admin-main-content">
+                <h1 className="admin-title">管理员页面</h1>
+                {/* 参数设置 */}
+                <div className="admin-config-card">
+                    <span className="admin-config-label">系统参数：</span>
+                    <span className="admin-config-item">FarmNumber: {config.FarmNumber}</span>
+                    <span className="admin-config-item">FakeTime: {config.FakeTime}</span>
+                    <span className="admin-config-item">BegVote: {config.BegVote}</span>
+                    <span className="admin-config-item">CheatTime: {config.CheatTime}</span>
+                </div>
+                {/* 作弊用户 */}
+                <div className="admin-section">
+                    <h2 className="admin-section-title cheat">作弊用户</h2>
+                    <div className="admin-table-container">
+                        <table className="admin-table">
+                            <thead>
+                                <tr>
+                                    <th>邮箱</th>
+                                    <th>用户名</th>
+                                    <th>账户状态</th>
+                                    <th>操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {cheatUsers.map((u) => (
+                                    <tr key={u.userid}>
+                                        <td>{u.email}</td>
+                                        <td>{u.username}</td>
+                                        <td className="status-banned">
+                                            封禁
+                                        </td>
+                                        <td>
+                                            <button
+                                                className="admin-btn admin-btn-unban"
+                                                onClick={() => handleUnban(u)}
+                                            >
+                                                解封
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                {/* 可疑用户 */}
+                <div className="admin-section">
+                    <h2 className="admin-section-title suspicious">可疑用户</h2>
+                    <div className="admin-table-container">
+                        <table className="admin-table">
+                            <thead>
+                                <tr>
+                                    <th>邮箱</th>
+                                    <th>用户名</th>
+                                    <th>账户状态</th>
+                                    <th>操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {suspiciousUsers.map((u) => (
+                                    <tr key={u.user_id}>
+                                        <td>{u.email}</td>
+                                        <td>{u.username}</td>
+                                        <td className={u.account_status === 1 ? "status-banned" : "status-normal"}>
+                                            {u.account_status === 1 ? "封禁" : "正常"}
+                                        </td>
+                                        <td>
+                                            <button
+                                                className="admin-btn admin-btn-ban"
+                                                onClick={() => handleBan(u)}
+                                            >
+                                                封禁
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                {/* 跳转按钮 */}
+                <div className="admin-nav-buttons">
+                    <button
+                        className="admin-nav-btn appeal"
+                        onClick={() => navigate("/appeal-review")}
+                    >
+                        用户申诉
+                    </button>
+                    <button
+                        className="admin-nav-btn migration"
+                        onClick={() => navigate("/migration-review")}
+                    >
+                        用户迁移
+                    </button>
+                    <button
+                        className="admin-nav-btn promotion"
+                        onClick={() => navigate("/seed-promotion")}
+                    >
+                        促销管理
+                    </button>
+                </div>
             </div>
         </div>
     );
diff --git a/front/src/AppealPage.css b/front/src/AppealPage.css
new file mode 100644
index 0000000..44cbc5d
--- /dev/null
+++ b/front/src/AppealPage.css
@@ -0,0 +1,456 @@
+/* AppealPage 特定样式 - 翡翠园林风格 */
+@import './SharedStyles.css';
+
+/* 申诉页面容器 */
+.appeal-page-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 20%, #8fbc8f 40%, #98fb98 60%, #f0fff0 100%);
+  position: relative;
+  font-family: 'Lora', serif;
+  overflow-x: hidden;
+  display: flex;
+}
+
+/* 背景装饰元素 */
+.appeal-page-container::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(144, 238, 144, 0.08) 0%, transparent 50%);
+  animation: backgroundShift 25s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 侧栏样式 */
+.appeal-sidebar {
+  width: 300px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-right: 3px solid rgba(144, 238, 144, 0.3);
+  padding: 0;
+  position: relative;
+  z-index: 10;
+  box-shadow: 4px 0 20px rgba(45, 80, 22, 0.1);
+}
+
+.appeal-sidebar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, 
+    rgba(144, 238, 144, 0.05) 0%, 
+    rgba(255, 255, 255, 0.02) 50%, 
+    rgba(144, 238, 144, 0.05) 100%);
+  z-index: -1;
+}
+
+/* 侧栏标题 */
+.appeal-sidebar-title {
+  text-align: center;
+  padding: 25px 20px 20px 20px;
+  color: #2d5016;
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 0 2px 4px rgba(45, 80, 22, 0.1);
+  border-bottom: 2px solid rgba(144, 238, 144, 0.2);
+  background: linear-gradient(135deg, rgba(144, 238, 144, 0.1), rgba(255, 255, 255, 0.1));
+}
+
+/* 申诉列表容器 */
+.appeal-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 20px;
+  padding: 0 15px;
+}
+
+/* 申诉项目 */
+.appeal-list-item {
+  margin: 0;
+  padding: 18px 15px;
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 2px solid transparent;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(45, 80, 22, 0.08);
+}
+
+.appeal-list-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, 
+    transparent, 
+    rgba(144, 238, 144, 0.1), 
+    transparent);
+  transition: left 0.5s ease;
+}
+
+.appeal-list-item:hover::before {
+  left: 100%;
+}
+
+.appeal-list-item:hover {
+  transform: translateX(8px);
+  box-shadow: 0 8px 25px rgba(45, 80, 22, 0.15);
+}
+
+/* 选中状态 */
+.appeal-list-item.selected {
+  background: rgba(144, 238, 144, 0.15);
+  border-color: rgba(144, 238, 144, 0.5);
+  transform: translateX(8px);
+  box-shadow: 0 8px 25px rgba(144, 238, 144, 0.2);
+}
+
+/* 审核状态样式 */
+.appeal-list-item.approved {
+  border-color: rgba(67, 160, 71, 0.6);
+  color: #2e7d32;
+}
+
+.appeal-list-item.pending {
+  border-color: rgba(229, 57, 53, 0.6);
+  color: #c62828;
+}
+
+/* 状态标签 */
+.appeal-status-label {
+  float: right;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+.appeal-status-label.approved {
+  background: rgba(67, 160, 71, 0.1);
+  color: #2e7d32;
+}
+
+.appeal-status-label.pending {
+  background: rgba(229, 57, 53, 0.1);
+  color: #c62828;
+}
+
+/* 主内容区域 */
+.appeal-main-content {
+  flex: 1;
+  padding: 40px 50px;
+  position: relative;
+  z-index: 10;
+}
+
+/* 详情标题 */
+.appeal-detail-title {
+  margin-bottom: 30px;
+  color: #fff;
+  font-family: 'Playfair Display', serif;
+  font-size: 2.2rem;
+  font-weight: 700;
+  text-shadow: 0 4px 12px rgba(45, 80, 22, 0.4);
+  letter-spacing: 1px;
+}
+
+/* 详情卡片 */
+.appeal-detail-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 35px 40px;
+  margin-bottom: 35px;
+  box-shadow: 
+    0 20px 60px rgba(45, 80, 22, 0.12),
+    0 8px 25px rgba(144, 238, 144, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.appeal-detail-card::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #f0fff0 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 27px;
+  z-index: -1;
+  animation: borderGlow 4s ease-in-out infinite;
+}
+
+/* 详情项目 */
+.appeal-detail-item {
+  margin-bottom: 25px;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #2d5016;
+}
+
+.appeal-detail-item b {
+  color: #1a5c1a;
+  font-weight: 700;
+  margin-right: 8px;
+}
+
+/* 文件查看器样式 */
+.file-viewer-container {
+  margin-top: 15px;
+  padding: 20px;
+  background: rgba(144, 238, 144, 0.05);
+  border-radius: 15px;
+  border: 1px solid rgba(144, 238, 144, 0.2);
+}
+
+.file-viewer-iframe {
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 12px;
+  width: 100%;
+  height: 400px;
+  transition: all 0.3s ease;
+}
+
+.file-viewer-iframe:hover {
+  border-color: rgba(144, 238, 144, 0.5);
+  box-shadow: 0 4px 15px rgba(144, 238, 144, 0.2);
+}
+
+.file-download-link {
+  color: #2d5016;
+  text-decoration: none;
+  font-weight: 600;
+  padding: 10px 20px;
+  background: rgba(144, 238, 144, 0.1);
+  border-radius: 10px;
+  display: inline-block;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(144, 238, 144, 0.3);
+}
+
+.file-download-link:hover {
+  background: rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(144, 238, 144, 0.3);
+}
+
+/* 按钮容器 */
+.appeal-buttons-container {
+  display: flex;
+  gap: 35px;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+/* 审核按钮样式 */
+.appeal-btn {
+  border: none;
+  border-radius: 15px;
+  padding: 15px 40px;
+  font-weight: 700;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: 'Lora', serif;
+  letter-spacing: 1px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.appeal-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  transform: translate(-50%, -50%);
+}
+
+.appeal-btn:hover::before {
+  width: 120px;
+  height: 120px;
+}
+
+.appeal-btn:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+}
+
+/* 通过按钮 */
+.appeal-btn-approve {
+  background: linear-gradient(135deg, #43a047, #2e7d32);
+  color: white;
+}
+
+.appeal-btn-approve:disabled {
+  background: linear-gradient(135deg, #bdbdbd, #9e9e9e);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.appeal-btn-approve:disabled:hover {
+  transform: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 拒绝按钮 */
+.appeal-btn-reject {
+  background: linear-gradient(135deg, #e53935, #c62828);
+  color: white;
+}
+
+.appeal-btn-reject:disabled {
+  background: linear-gradient(135deg, #bdbdbd, #9e9e9e);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.appeal-btn-reject:disabled:hover {
+  transform: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 加载和错误状态 */
+.appeal-loading,
+.appeal-error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  font-size: 24px;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.appeal-error {
+  color: #ffcdd2;
+}
+
+/* 动画效果 */
+@keyframes backgroundShift {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.1) rotate(1deg); }
+}
+
+@keyframes borderGlow {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .appeal-page-container {
+    flex-direction: column;
+  }
+  
+  .appeal-sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 3px solid rgba(144, 238, 144, 0.3);
+  }
+  
+  .appeal-list-container {
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 0 15px 20px 15px;
+  }
+  
+  .appeal-list-item {
+    min-width: 200px;
+    flex-shrink: 0;
+  }
+  
+  .appeal-main-content {
+    padding: 20px 25px;
+  }
+  
+  .appeal-detail-title {
+    font-size: 1.8rem;
+  }
+  
+  .appeal-detail-card {
+    padding: 25px 30px;
+  }
+  
+  .appeal-buttons-container {
+    gap: 20px;
+    flex-wrap: wrap;
+  }
+  
+  .appeal-btn {
+    padding: 12px 30px;
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .appeal-sidebar-title {
+    font-size: 1.2rem;
+    padding: 20px 15px 15px 15px;
+  }
+  
+  .appeal-main-content {
+    padding: 15px 20px;
+  }
+  
+  .appeal-detail-title {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+  }
+  
+  .appeal-detail-card {
+    padding: 20px 25px;
+    margin-bottom: 25px;
+  }
+  
+  .appeal-detail-item {
+    font-size: 15px;
+    margin-bottom: 20px;
+  }
+  
+  .appeal-buttons-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .appeal-btn {
+    width: 100%;
+    max-width: 300px;
+    padding: 12px 20px;
+    font-size: 16px;
+  }
+}
diff --git a/front/src/AppealPage.js b/front/src/AppealPage.js
index dfbe307..0f168c3 100644
--- a/front/src/AppealPage.js
+++ b/front/src/AppealPage.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { API_BASE_URL } from "./config";
+import "./AppealPage.css";
 
 // State for appeals fetched from backend
 export default function AppealPage() {
@@ -30,8 +31,8 @@
         fetchAppeals();
     }, []);
 
-    if (loading) return <div>加载中...</div>;
-    if (error) return <div>加载失败：{error}</div>;
+    if (loading) return <div className="appeal-loading">加载中...</div>;
+    if (error) return <div className="appeal-error">加载失败：{error}</div>;
     const selectedAppeal = appeals.find(a => a.appealid === selectedId) || {};
 
     // Approve selected appeal and refresh
@@ -66,34 +67,25 @@
     };
 
     return (
-        <div style={{ display: "flex", minHeight: "100vh", background: "#f7faff" }}>
+        <div className="appeal-page-container">
             {/* 侧栏 */}
-            <div style={{ width: 180, background: "#fff", borderRight: "1px solid #e0e7ff", padding: 0 }}>
-                <h3 style={{ textAlign: "center", padding: "18px 0 0 0", color: "#1976d2" }}>申诉列表</h3>
-                <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
+            <div className="appeal-sidebar">
+                <h3 className="appeal-sidebar-title">申诉列表</h3>
+                <div className="appeal-list-container">
                     {appeals.map(a => (
                         <div
                             key={a.appealid}
                             onClick={() => setSelectedId(a.appealid)}
-                            style={{
-                                margin: "0 12px",
-                                padding: "16px 10px",
-                                borderRadius: 8,
-                                background: selectedId === a.appealid ? "#e3f2fd" : "#fff",
-                                border: `2px solid ${a.status === 1 || a.status === 2 ? "#43a047" : "#e53935"}`,
-                                color: a.status === 1 || a.status === 2 ? "#43a047" : "#e53935",
-                                fontWeight: 600,
-                                cursor: "pointer",
-                                boxShadow: selectedId === a.appealid ? "0 2px 8px #b2d8ea" : "none",
-                                transition: "all 0.2s"
-                            }}
+                            className={`appeal-list-item ${
+                                selectedId === a.appealid ? 'selected' : ''
+                            } ${
+                                a.status === 1 || a.status === 2 ? 'approved' : 'pending'
+                            }`}
                         >
                             {a.user.username}
-                            <span style={{
-                                float: "right",
-                                fontSize: 12,
-                                color: a.status === 1 || a.status === 2 ? "#43a047" : "#e53935"
-                            }}>
+                            <span className={`appeal-status-label ${
+                                a.status === 1 || a.status === 2 ? 'approved' : 'pending'
+                            }`}>
                                 {a.status === 1 || a.status === 2 ? "已审核" : "未审核"}
                             </span>
                         </div>
@@ -101,52 +93,34 @@
                 </div>
             </div>
             {/* 申诉详情 */}
-            <div style={{ flex: 1, padding: "40px 48px" }}>
-                <h2 style={{ marginBottom: 24, color: "#1976d2" }}>申诉详情</h2>
-                <div style={{ background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 32 }}>
-                    <div style={{ marginBottom: 18 }}>
+            <div className="appeal-main-content">
+                <h2 className="appeal-detail-title">申诉详情</h2>
+                <div className="appeal-detail-card">
+                    <div className="appeal-detail-item">
                         <b>申诉ID：</b>{selectedAppeal.appealid}
                     </div>
-                    <div style={{ marginBottom: 18 }}>
+                    <div className="appeal-detail-item">
                         <b>用户ID：</b>{selectedAppeal.user.userid}
                     </div>
-                    <div style={{ marginBottom: 18 }}>
+                    <div className="appeal-detail-item">
                         <b>申诉内容：</b>{selectedAppeal.content}
                     </div>
-                    <div style={{ marginBottom: 18 }}>
+                    <div className="appeal-detail-item">
                         <b>申诉文件：</b>
                         <FileViewer url={selectedAppeal.fileURL} />
                     </div>
                 </div>
                 {/* 审核按钮 */}
-                <div style={{ display: "flex", gap: 32, justifyContent: "center" }}>
+                <div className="appeal-buttons-container">
                     <button
-                        style={{
-                            background: selectedAppeal.status === 1 ? "#bdbdbd" : "#43a047",
-                            color: "#fff",
-                            border: "none",
-                            borderRadius: 8,
-                            padding: "10px 38px",
-                            fontWeight: 600,
-                            fontSize: 18,
-                            cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
-                        }}
+                        className={`appeal-btn appeal-btn-approve`}
                         disabled={selectedAppeal.status === 1}
                         onClick={handleApprove}
                     >
                         通过
                     </button>
                     <button
-                        style={{
-                            background: selectedAppeal.status === 1 ? "#bdbdbd" : "#e53935",
-                            color: "#fff",
-                            border: "none",
-                            borderRadius: 8,
-                            padding: "10px 38px",
-                            fontWeight: 600,
-                            fontSize: 18,
-                            cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
-                        }}
+                        className={`appeal-btn appeal-btn-reject`}
                         disabled={selectedAppeal.status === 1}
                         onClick={handleReject}
                     >
@@ -163,15 +137,15 @@
     if (!url) return <div>无附件</div>;
     if (url.endsWith(".pdf")) {
         return (
-            <iframe
-                src={url}
-                title="PDF预览"
-                width="100%"
-                height="400px"
-                style={{ border: "1px solid #ccc", borderRadius: 8 }}
-            />
+            <div className="file-viewer-container">
+                <iframe
+                    src={url}
+                    title="PDF预览"
+                    className="file-viewer-iframe"
+                />
+            </div>
         );
     }
     // 这里只做PDF示例，实际可扩展为DOC等
-    return <a href={url} target="_blank" rel="noopener noreferrer">下载附件</a>;
+    return <a href={url} target="_blank" rel="noopener noreferrer" className="file-download-link">下载附件</a>;
 }
\ No newline at end of file
diff --git a/front/src/BegSeedPage.css b/front/src/BegSeedPage.css
new file mode 100644
index 0000000..710ba47
--- /dev/null
+++ b/front/src/BegSeedPage.css
@@ -0,0 +1,460 @@
+/* 翡翠庄园 - 求种页面欧式园林风格样式 */
+
+/* 引入Google字体 */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;500;600&display=swap');
+
+/* 页面基础容器样式 */
+.begseed-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 20%, #8fbc8f 40%, #98fb98 60%, #f0fff0 100%);
+  position: relative;
+  font-family: 'Lora', serif;
+  overflow-x: hidden;
+}
+
+/* 背景装饰元素 */
+.begseed-container::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(144, 238, 144, 0.08) 0%, transparent 50%);
+  animation: backgroundShift 25s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 内容区域 */
+.begseed-content {
+  position: relative;
+  z-index: 10;
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* 页面标题 */
+.begseed-title {
+  text-align: center;
+  margin: 80px 0 40px 0;
+  color: #2d5016;
+  font-family: 'Playfair Display', serif;
+  font-size: 42px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-shadow: 0 2px 4px rgba(45, 80, 22, 0.2);
+  animation: titleFloat 6s ease-in-out infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.begseed-title-icon {
+  color: #90ee90;
+  filter: drop-shadow(0 2px 4px rgba(144, 238, 144, 0.4));
+  animation: iconPulse 3s ease-in-out infinite;
+}
+
+/* 发布按钮 */
+.begseed-publish-section {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.begseed-publish-btn {
+  font-size: 18px;
+  padding: 16px 40px;
+  background: linear-gradient(135deg, #90ee90 0%, #2d5016 100%);
+  color: white;
+  border: none;
+  border-radius: 25px;
+  font-weight: 600;
+  font-family: 'Lora', serif;
+  box-shadow: 
+    0 8px 25px rgba(45, 80, 22, 0.3),
+    0 4px 12px rgba(144, 238, 144, 0.2);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 1px;
+}
+
+.begseed-publish-btn:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 
+    0 12px 35px rgba(45, 80, 22, 0.4),
+    0 6px 18px rgba(144, 238, 144, 0.3);
+}
+
+.begseed-publish-btn:disabled {
+  background: linear-gradient(135deg, #a0a0a0 0%, #808080 100%);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 4px 12px rgba(128, 128, 128, 0.2);
+}
+
+.begseed-publish-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.6s ease;
+}
+
+.begseed-publish-btn:hover::before {
+  left: 100%;
+}
+
+/* 发布表单 */
+.begseed-form-container {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 40px;
+  max-width: 800px;
+  margin: 0 auto 40px auto;
+  box-shadow: 
+    0 20px 60px rgba(45, 80, 22, 0.15),
+    0 8px 25px rgba(144, 238, 144, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  position: relative;
+  animation: containerFloat 8s ease-in-out infinite;
+}
+
+.begseed-form-container::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #f0fff0 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 27px;
+  z-index: -1;
+  animation: borderGlow 4s ease-in-out infinite;
+}
+
+.begseed-form-title {
+  color: #2d5016;
+  font-family: 'Playfair Display', serif;
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.begseed-form-group {
+  margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.begseed-form-label {
+  color: #2d5016;
+  font-weight: 600;
+  font-size: 16px;
+  font-family: 'Lora', serif;
+  letter-spacing: 0.5px;
+}
+
+.begseed-form-input {
+  padding: 15px 20px;
+  border-radius: 15px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 16px;
+  font-family: 'Lora', serif;
+  transition: all 0.3s ease;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.begseed-form-input:focus {
+  outline: none;
+  border-color: #90ee90;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 3px rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+}
+
+.begseed-form-actions {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 35px;
+}
+
+.begseed-form-btn {
+  padding: 12px 30px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  font-weight: 600;
+  font-family: 'Lora', serif;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.begseed-form-btn-primary {
+  background: linear-gradient(135deg, #4a7c59 0%, #2d5016 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(45, 80, 22, 0.3);
+}
+
+.begseed-form-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(45, 80, 22, 0.4);
+}
+
+.begseed-form-btn-secondary {
+  background: linear-gradient(135deg, #999 0%, #777 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(119, 119, 119, 0.3);
+}
+
+.begseed-form-btn-secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(119, 119, 119, 0.4);
+}
+
+/* 加载和错误状态 */
+.begseed-loading {
+  text-align: center;
+  margin: 60px 0;
+  color: #4a7c59;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.begseed-error {
+  text-align: center;
+  margin: 30px auto;
+  padding: 20px;
+  max-width: 600px;
+  background: rgba(255, 235, 238, 0.9);
+  color: #c62828;
+  border-radius: 15px;
+  border: 2px solid rgba(198, 40, 40, 0.2);
+  font-weight: 500;
+}
+
+/* 求种列表 */
+.begseed-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 30px;
+  margin-top: 20px;
+}
+
+/* 求种卡片 */
+.begseed-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(15px);
+  border-radius: 20px;
+  padding: 30px;
+  box-shadow: 
+    0 15px 40px rgba(45, 80, 22, 0.12),
+    0 6px 20px rgba(144, 238, 144, 0.08);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.begseed-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(144, 238, 144, 0.1), transparent);
+  transition: left 0.5s;
+  z-index: 0;
+}
+
+.begseed-card:hover::before {
+  left: 100%;
+}
+
+.begseed-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 
+    0 25px 60px rgba(45, 80, 22, 0.18),
+    0 10px 30px rgba(144, 238, 144, 0.12);
+  border-color: rgba(74, 124, 89, 0.4);
+}
+
+.begseed-card-content {
+  position: relative;
+  z-index: 1;
+}
+
+/* 已过期/已完成的卡片 */
+.begseed-card-expired {
+  background: rgba(245, 245, 245, 0.9);
+  color: #888;
+  opacity: 0.7;
+}
+
+.begseed-card-expired:hover {
+  transform: translateY(-4px);
+  opacity: 0.8;
+}
+
+.begseed-card-title {
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: #2d5016;
+  font-family: 'Playfair Display', serif;
+  line-height: 1.3;
+}
+
+.begseed-card-expired .begseed-card-title {
+  color: #888;
+}
+
+.begseed-card-info {
+  margin-bottom: 12px;
+  color: #4a7c59;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.begseed-card-expired .begseed-card-info {
+  color: #999;
+}
+
+.begseed-card-info-icon {
+  font-size: 16px;
+  opacity: 0.8;
+}
+
+.begseed-card-status {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  margin-top: 15px;
+}
+
+.begseed-status-active {
+  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
+  color: #2d5016;
+  border: 1px solid rgba(45, 80, 22, 0.2);
+}
+
+.begseed-status-completed {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  color: #1565c0;
+  border: 1px solid rgba(21, 101, 192, 0.2);
+}
+
+.begseed-status-expired {
+  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
+  color: #666;
+  border: 1px solid rgba(102, 102, 102, 0.2);
+}
+
+/* 动画效果 */
+@keyframes backgroundShift {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  33% { transform: translate(30px, -30px) rotate(1deg); }
+  66% { transform: translate(-20px, 20px) rotate(-0.5deg); }
+}
+
+@keyframes titleFloat {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes containerFloat {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-5px); }
+}
+
+@keyframes borderGlow {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.6; }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .begseed-container {
+    padding: 20px 10px;
+  }
+  
+  .begseed-title {
+    font-size: 32px;
+    margin-bottom: 30px;
+  }
+  
+  .begseed-list {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .begseed-form-container {
+    padding: 30px 20px;
+    margin: 0 10px 30px 10px;
+  }
+  
+  .begseed-form-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .begseed-form-label {
+    width: auto;
+  }
+  
+  .begseed-form-actions {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .begseed-card {
+    padding: 25px 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .begseed-title {
+    font-size: 28px;
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .begseed-publish-btn {
+    padding: 14px 30px;
+    font-size: 16px;
+  }
+  
+  .begseed-form-title {
+    font-size: 24px;
+  }
+}
diff --git a/front/src/BegSeedPage.js b/front/src/BegSeedPage.js
index 0854535..0c1a0bb 100644
--- a/front/src/BegSeedPage.js
+++ b/front/src/BegSeedPage.js
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
 import HelpIcon from "@mui/icons-material/Help";
+import PeopleIcon from "@mui/icons-material/People";
+import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import "./BegSeedPage.css";
 
 export default function BegSeedPage() {
     const navigate = useNavigate();
@@ -153,195 +158,142 @@
     };
 
     return (
-        <div className="container">
-            <h1 style={{ margin: "24px 0 32px 0", color: "#1976d2" }}>
-                <HelpIcon style={{ verticalAlign: "middle", marginRight: 8 }} />
-                求种列表
-            </h1>
-            
-            {/* 加载状态 */}
-            {loading && (
-                <div style={{ textAlign: "center", margin: "40px 0", color: "#666" }}>
-                    正在加载求种列表...
+        <div className="begseed-container">
+            <div className="begseed-content">
+                <h1 className="begseed-title">
+                    <HelpIcon className="begseed-title-icon" style={{ fontSize: 42 }} />
+                    求种列表
+                </h1>
+                
+                {/* 加载状态 */}
+                {loading && (
+                    <div className="begseed-loading">
+                        正在加载求种列表...
+                    </div>
+                )}
+                
+                {/* 错误状态 */}
+                {error && (
+                    <div className="begseed-error">
+                        加载失败: {error} (已显示默认数据)
+                    </div>
+                )}
+                
+                <div className="begseed-publish-section">
+                    <button
+                        onClick={() => setShowForm(true)}
+                        disabled={loading}
+                        className="begseed-publish-btn"
+                    >
+                        发布求种任务
+                    </button>
                 </div>
-            )}
-            
-            {/* 错误状态 */}
-            {error && (
-                <div style={{ 
-                    textAlign: "center", 
-                    margin: "20px 0", 
-                    padding: "10px", 
-                    background: "#ffebee", 
-                    color: "#c62828", 
-                    borderRadius: "4px" 
-                }}>
-                    加载失败: {error} (已显示默认数据)
-                </div>
-            )}
-            
-            <div style={{ margin: "0 0 32px 0", textAlign: "center" }}>
-                <button
-                    onClick={() => setShowForm(true)}
-                    disabled={loading}
-                    style={{
-                        fontSize: 18,
-                        padding: "12px 36px",
-                        background: loading ? "#ccc" : "linear-gradient(90deg, #42a5f5 0%, #1976d2 100%)",
-                        color: "#fff",
-                        border: "none",
-                        borderRadius: 8,
-                        fontWeight: 600,
-                        boxShadow: "0 2px 8px #b2d8ea",
-                        cursor: loading ? "not-allowed" : "pointer",
-                        transition: "background 0.2s",
-                    }}
-                >
-                    发布求种任务
-                </button>
-            </div>
-            {showForm && (
-                <div
-                    style={{
-                        background: "#fff",
-                        border: "1.5px solid #b2d8ea",
-                        borderRadius: 12,
-                        padding: 24,
-                        maxWidth: 480,
-                        margin: "0 auto 32px auto",
-                        boxShadow: "0 2px 8px #e0e7ff",
-                    }}
-                >
-                    <h3 style={{ color: "#1976d2", marginBottom: 18 }}>发布求种任务</h3>
-                    <form onSubmit={handleSubmit}>
-                        <div style={{ marginBottom: 16 }}>
-                            <label style={{ display: "inline-block", width: 80 }}>求种信息：</label>
-                            <input
-                                type="text"
-                                name="info"
-                                value={formData.info}
-                                onChange={handleFormChange}
-                                required
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: 6,
-                                    border: "1px solid #b2d8ea",
-                                    width: 260,
-                                }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: 16 }}>
-                            <label style={{ display: "inline-block", width: 80 }}>悬赏魔力值：</label>
-                            <input
-                                type="number"
-                                name="reward_magic"
-                                value={formData.reward_magic}
-                                onChange={handleFormChange}
-                                required
-                                min={1}
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: 6,
-                                    border: "1px solid #b2d8ea",
-                                    width: 120,
-                                }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: 16 }}>
-                            <label style={{ display: "inline-block", width: 80 }}>截止日期：</label>
-                            <input
-                                type="datetime-local"
-                                name="deadline"
-                                value={formData.deadline}
-                                onChange={handleFormChange}
-                                required
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: 6,
-                                    border: "1px solid #b2d8ea",
-                                    width: 200,
-                                }}
-                            />
-                        </div>
-                        <div style={{ marginTop: 18 }}>
-                            <button
-                                type="submit"
-                                style={{
-                                    background: "#1976d2",
-                                    color: "#fff",
-                                    border: "none",
-                                    borderRadius: 6,
-                                    padding: "8px 28px",
-                                    fontWeight: 500,
-                                    fontSize: 16,
-                                    marginRight: 18,
-                                    cursor: "pointer",
-                                }}
+                
+                {showForm && (
+                    <div className="begseed-form-container">
+                        <h3 className="begseed-form-title">发布求种任务</h3>
+                        <form onSubmit={handleSubmit}>
+                            <div className="begseed-form-group">
+                                <label className="begseed-form-label">求种信息：</label>
+                                <input
+                                    type="text"
+                                    name="info"
+                                    value={formData.info}
+                                    onChange={handleFormChange}
+                                    required
+                                    className="begseed-form-input"
+                                    placeholder="请输入您要求种的资源信息"
+                                />
+                            </div>
+                            <div className="begseed-form-group">
+                                <label className="begseed-form-label">悬赏魔力值：</label>
+                                <input
+                                    type="number"
+                                    name="reward_magic"
+                                    value={formData.reward_magic}
+                                    onChange={handleFormChange}
+                                    required
+                                    min={1}
+                                    className="begseed-form-input"
+                                    placeholder="请输入悬赏的魔力值"
+                                />
+                            </div>
+                            <div className="begseed-form-group">
+                                <label className="begseed-form-label">截止日期：</label>
+                                <input
+                                    type="datetime-local"
+                                    name="deadline"
+                                    value={formData.deadline}
+                                    onChange={handleFormChange}
+                                    required
+                                    className="begseed-form-input"
+                                />
+                            </div>
+                            <div className="begseed-form-actions">
+                                <button type="submit" className="begseed-form-btn begseed-form-btn-primary">
+                                    提交
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => setShowForm(false)}
+                                    className="begseed-form-btn begseed-form-btn-secondary"
+                                >
+                                    取消
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                )}
+                
+                <div key={refreshKey} className="begseed-list">
+                    {begSeedList.map((beg) => {
+                        const isExpired = new Date(beg.deadline) < now || beg.has_match === 1;
+                        const isCompleted = beg.has_match === 1;
+                        const isActive = !isExpired && !isCompleted;
+                        
+                        return (
+                            <div
+                                key={beg.beg_id}
+                                className={`begseed-card ${isExpired ? 'begseed-card-expired' : ''}`}
+                                onClick={() => navigate(`/begseed/${beg.beg_id}`)}
                             >
-                                提交
-                            </button>
-                            <button
-                                type="button"
-                                onClick={() => setShowForm(false)}
-                                style={{
-                                    background: "#b0b0b0",
-                                    color: "#fff",
-                                    border: "none",
-                                    borderRadius: 6,
-                                    padding: "8px 28px",
-                                    fontWeight: 500,
-                                    fontSize: 16,
-                                    cursor: "pointer",
-                                }}
-                            >
-                                取消
-                            </button>
-                        </div>
-                    </form>
+                                <div className="begseed-card-content">
+                                    <div className="begseed-card-title">
+                                        {beg.info}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <PeopleIcon className="begseed-card-info-icon" />
+                                        求种人数：{beg.beg_count}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <MonetizationOnIcon className="begseed-card-info-icon" />
+                                        悬赏魔力值：{beg.reward_magic}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <AccessTimeIcon className="begseed-card-info-icon" />
+                                        截止时间：{new Date(beg.deadline).toLocaleString()}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <CheckCircleIcon className="begseed-card-info-icon" />
+                                        <span 
+                                            className={`begseed-card-status ${
+                                                isCompleted ? 'begseed-status-completed' : 
+                                                isExpired ? 'begseed-status-expired' : 
+                                                'begseed-status-active'
+                                            }`}
+                                        >
+                                            {isCompleted ? "已完成" : isExpired ? "已过期" : "进行中"}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
                 </div>
-            )}
-            <div key={refreshKey} style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
-                {begSeedList.map((beg) => {
-                    const isExpired =
-                        new Date(beg.deadline) < now || beg.has_match === 1;
-                    return (
-                        <div
-                            key={beg.beg_id}
-                            style={{
-                                background: isExpired ? "#f0f0f0" : "#e3f7e7",
-                                color: isExpired ? "#b0b0b0" : "#222",
-                                border: "1.5px solid #b2d8ea",
-                                borderRadius: 12,
-                                padding: 18,
-                                minWidth: 320,
-                                maxWidth: 420,
-                                boxShadow: "0 2px 8px #e0e7ff",
-                                opacity: isExpired ? 0.6 : 1,
-                                cursor: "pointer",
-                                marginBottom: 12,
-                                transition: "box-shadow 0.2s",
-                            }}
-                            onClick={() => navigate(`/begseed/${beg.beg_id}`)}
-                        >
-                            <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 8 }}>
-                                {beg.info}
-                            </div>
-                            <div>求种人数：{beg.beg_count}</div>
-                            <div>悬赏魔力值：{beg.reward_magic}</div>
-                            <div>
-                                截止时间：{new Date(beg.deadline).toLocaleString()}
-                            </div>
-                            <div>
-                                状态：
-                                {beg.has_match === 1
-                                    ? "已完成"
-                                    : new Date(beg.deadline) < now
-                                        ? "已过期"
-                                        : "进行中"}
-                            </div>
-                        </div>
-                    );
-                })}
             </div>
         </div>
     );
diff --git a/front/src/MigrationPage.css b/front/src/MigrationPage.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/front/src/MigrationPage.css
diff --git a/front/src/PublishPage.js b/front/src/PublishPage.js
index df03cae..d9f7db9 100644
--- a/front/src/PublishPage.js
+++ b/front/src/PublishPage.js
@@ -1,9 +1,47 @@
-import React, { useState } from 'react';
-import './App.css';
-import './PublishPage.css';
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './SharedStyles.css';
 import { API_BASE_URL } from "./config";
+import HomeIcon from "@mui/icons-material/Home";
+import MovieIcon from "@mui/icons-material/Movie";
+import TvIcon from "@mui/icons-material/Tv";
+import MusicNoteIcon from "@mui/icons-material/MusicNote";
+import AnimationIcon from "@mui/icons-material/Animation";
+import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
+import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
+import PersonIcon from "@mui/icons-material/Person";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import ForumIcon from "@mui/icons-material/Forum";
+import HelpIcon from "@mui/icons-material/Help";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import PublishIcon from "@mui/icons-material/Publish";
+import CategoryIcon from "@mui/icons-material/Category";
+import TitleIcon from "@mui/icons-material/Title";
+import DescriptionIcon from "@mui/icons-material/Description";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+
+const navItems = [
+  { label: "首页", icon: <HomeIcon className="emerald-nav-icon" />, path: "/home", type: "home" },
+  { label: "电影", icon: <MovieIcon className="emerald-nav-icon" />, path: "/movie", type: "movie" },
+  { label: "剧集", icon: <TvIcon className="emerald-nav-icon" />, path: "/tv", type: "tv" },
+  { label: "音乐", icon: <MusicNoteIcon className="emerald-nav-icon" />, path: "/music", type: "music" },
+  { label: "动漫", icon: <AnimationIcon className="emerald-nav-icon" />, path: "/anime", type: "anime" },
+  { label: "游戏", icon: <SportsEsportsIcon className="emerald-nav-icon" />, path: "/game", type: "game" },
+  { label: "体育", icon: <SportsMartialArtsIcon className="emerald-nav-icon" />, path: "/sport", type: "sport" },
+  { label: "资料", icon: <PersonIcon className="emerald-nav-icon" />, path: "/info", type: "info" },
+  { label: "论坛", icon: <ForumIcon className="emerald-nav-icon" />, path: "/forum", type: "forum" },
+  { label: "发布", icon: <AccountCircleIcon className="emerald-nav-icon" />, path: "/publish", type: "publish" },
+  { label: "求种", icon: <HelpIcon className="emerald-nav-icon" />, path: "/begseed", type: "help" },
+];
+
+// 发布页面专用文字雨内容
+const publishTexts = [
+  "分享", "上传", "种子", "资源", "贡献", "精品", "原创", "高清",
+  "无损", "蓝光", "1080P", "4K", "HDR", "珍藏", "首发", "独家"
+];
 
 const PublishPage = () => {
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
     type: '',
     torrentFile: '',
@@ -11,6 +49,30 @@
     subtitle: ''
   });
   const [subType, setSubType] = useState('');
+  const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });  const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  useEffect(() => {
+    // 获取用户信息
+    const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+    const userId = match ? match[2] : null;
+    if (userId) {
+      fetch(`${API_BASE_URL}/api/get-userpt?userid=${encodeURIComponent(userId)}`)
+        .then(res => res.json())
+        .then(data => {
+          setUserInfo({ avatar_url: data.user.avatar_url, username: data.user.username });
+          setUserPT({
+            magic: data.magic_value || data.magic || 0,
+            ratio: data.share_ratio || data.share || 0,
+            upload: data.upload_amount || data.upload || 0,
+            download: data.download_amount || data.download || 0,
+          });
+        })
+        .catch(err => console.error('Fetching user profile failed', err));
+    }
+  }, []);
 
   const typeOptions = {
     '电影': ['大陆', '港台', '欧美', '日韩'],
@@ -26,17 +88,63 @@
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
-
   const handleFileChange = (e) => {
     const file = e.target.files[0];
-    if (file && file.name.split('.').pop() !== 'torrent') {
+    validateAndSetFile(file);
+  };
+
+  const validateAndSetFile = (file) => {
+    if (file && file.name.split('.').pop().toLowerCase() !== 'torrent') {
       alert('仅能上传.torrent类型文件');
-      e.target.value = null;
-    } else {
+      return false;
+    } else if (file) {
       setFormData({ ...formData, torrentFile: file });
+      return true;
+    }
+    return false;
+  };
+
+  // 拖拽上传功能
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // 只有当鼠标真正离开拖拽区域时才设置为false
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
     }
   };
 
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      if (validateAndSetFile(file)) {
+        // 如果文件验证成功，清空文件输入框并重新设置
+        const fileInput = document.getElementById('torrentFile');
+        if (fileInput) {
+          // 创建一个新的FileList对象来模拟文件选择
+          const dt = new DataTransfer();
+          dt.items.add(file);
+          fileInput.files = dt.files;
+        }
+      }
+    }
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
     const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
@@ -46,6 +154,21 @@
       alert('请上传.torrent文件');
       return;
     }
+
+    setIsUploading(true);
+    setUploadProgress(0);
+
+    // 模拟上传进度
+    const progressInterval = setInterval(() => {
+      setUploadProgress(prev => {
+        if (prev >= 90) {
+          clearInterval(progressInterval);
+          return prev;
+        }
+        return prev + Math.random() * 15;
+      });
+    }, 200);
+
     const data = new FormData();
     data.append('userid', userId);
     data.append('title', formData.title);
@@ -58,84 +181,299 @@
         method: 'POST',
         body: data,
       });
+      
+      clearInterval(progressInterval);
+      setUploadProgress(100);
+      
       if (response.ok) {
-        alert('上传成功！');
+        setTimeout(() => {
+          alert('上传成功！');
+          setIsUploading(false);
+          setUploadProgress(0);
+          // 重置表单
+          setFormData({
+            type: '',
+            torrentFile: '',
+            title: '',
+            subtitle: ''
+          });
+          setSubType('');
+        }, 500);
       } else {
+        setIsUploading(false);
+        setUploadProgress(0);
         alert('上传失败');
       }
     } catch (err) {
+      clearInterval(progressInterval);
+      setIsUploading(false);
+      setUploadProgress(0);
       alert('网络错误');
     }
   };
-
   return (
-    <div className="publish-page">
-      <h1 className="page-title">发布种子</h1>
-      <form onSubmit={handleSubmit} className="publish-form">
-        <div className="form-row">
-          <label htmlFor="type">类型</label>
-          <select name="type" id="type" value={formData.type} onChange={e => { handleChange(e); setSubType(''); }} required>
-            <option value="">请选择类型</option>
-            <option value="电影">电影</option>
-            <option value="剧集">剧集</option>
-            <option value="音乐">音乐</option>
-            <option value="动漫">动漫</option>
-            <option value="游戏">游戏</option>
-            <option value="体育">体育</option>
-            <option value="资料">资料</option>
-          </select>
-        </div>
-        {formData.type && typeOptions[formData.type] && (
-          <div className="form-row">
-            <label htmlFor="subtype">具体类型</label>
-            <select name="subtype" id="subtype" value={subType} onChange={e => setSubType(e.target.value)} required>
-              <option value="">请选择具体类型</option>
-              {typeOptions[formData.type].map(opt => (
-                <option key={opt} value={opt}>{opt}</option>
-              ))}
-            </select>
+    <div className="emerald-home-container">
+      {/* 发布页面专用文字雨 */}
+      <div className="publish-text-rain">
+        {publishTexts.map((text, index) => (
+          <div key={index} className="text-drop" style={{
+            left: `${(index * 4) % 100}%`,
+            animationDelay: `${(index * 0.9) % 12}s`,
+            animationDuration: `${7 + (index % 6)}s`,
+            color: index % 3 === 0 ? '#90ee90' : index % 3 === 1 ? '#2d5016' : '#4a7c59'
+          }}>
+            {text}
           </div>
-        )}
+        ))}
+      </div>
 
-        <div className="form-row">
-          <label htmlFor="torrentFile">种子文件</label>
-          <input
-            type="file"
-            id="torrentFile"
-            name="torrentFile"
-            onChange={handleFileChange}
-            required
-          />
-          <span style={{ fontSize: '12px', color: '#666' }}>需上传.torrent类型文件</span>
+      {/* 浮动园林装饰元素 */}
+      <div className="floating-garden-elements">
+        <div className="garden-element">📤</div>
+        <div className="garden-element">🌟</div>
+        <div className="garden-element">💎</div>
+        <div className="garden-element">🎯</div>
+      </div>
+
+      <div className="emerald-content">
+        {/* NeuraFlux用户栏 */}
+        <div className="emerald-user-bar">
+          <div className="emerald-user-avatar" onClick={() => navigate('/user')}>
+            {userInfo.avatar_url ? (
+              <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
+            ) : (
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
+            )}
+          </div>
+          <div className="emerald-brand-section">
+            <div className="emerald-brand-icon">⚡</div>
+            <div className="emerald-user-label">NeuraFlux</div>
+          </div>
+          <div className="emerald-user-stats">
+            <span className="emerald-stat-item">
+              魔力值: <span className="emerald-stat-value">{userPT.magic}</span>
+            </span>
+            <span className="emerald-stat-item">
+              分享率: <span className="emerald-stat-value">{userPT.ratio}</span>
+            </span>
+            <span className="emerald-stat-item">
+              上传: <span className="emerald-stat-value">{userPT.upload}GB</span>
+            </span>
+            <span className="emerald-stat-item">
+              下载: <span className="emerald-stat-value">{userPT.download}GB</span>
+            </span>
+          </div>
         </div>
 
-        <div className="form-row">
-          <label htmlFor="title">标题</label>
-          <input
-            type="text"
-            id="title"
-            name="title"
-            value={formData.title}
-            onChange={handleChange}
-            required
-          />
-        </div>
+        {/* NeuraFlux导航栏 */}
+        <nav className="emerald-nav-bar">
+          {navItems.map((item) => (
+            <div
+              key={item.label}
+              className={`emerald-nav-item ${item.label === "发布" ? "active" : ""}`}
+              data-type={item.type}
+              onClick={() => navigate(item.path)}
+            >
+              {item.icon}
+              <span className="emerald-nav-label">{item.label}</span>
+            </div>
+          ))}
+        </nav>
 
-        <div className="form-row">
-          <label htmlFor="subtitle">种子简介</label>
-          <input
-            type="text"
-            id="subtitle"
-            name="subtitle"
-            value={formData.subtitle}
-            onChange={handleChange}
-          />
-        </div>
+        {/* 发布页面内容 */}
+        <div className="emerald-content-section">
+          <h1 className="emerald-page-title">
+            <PublishIcon style={{ marginRight: '15px', fontSize: '36px', color: '#2d5016' }} />
+            🌟 NeuraFlux种子发布
+          </h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '40px', fontStyle: 'italic' }}>
+            分享优质资源，成就精彩社区 • 每一次上传都是对知识传承的贡献
+          </p>
 
-        <div className="form-row submit-row">
-          <button type="submit" className="submit-button">提交</button>
+          {/* 发布表单 */}
+          <div className="publish-form-container">
+            <form onSubmit={handleSubmit} className="publish-form-advanced">
+              {/* 资源类型选择 */}
+              <div className="form-section">
+                <div className="section-header">
+                  <CategoryIcon style={{ color: '#2d5016', marginRight: '10px' }} />
+                  <h3>资源分类</h3>
+                </div>
+                <div className="form-grid">
+                  <div className="form-field">
+                    <label htmlFor="type">主要类型</label>
+                    <div className="select-wrapper">
+                      <select 
+                        name="type" 
+                        id="type" 
+                        value={formData.type} 
+                        onChange={e => { handleChange(e); setSubType(''); }} 
+                        required
+                        className="modern-select"
+                      >
+                        <option value="">请选择资源类型</option>
+                        <option value="电影">🎬 电影</option>
+                        <option value="剧集">📺 剧集</option>
+                        <option value="音乐">🎵 音乐</option>
+                        <option value="动漫">🎨 动漫</option>
+                        <option value="游戏">🎮 游戏</option>
+                        <option value="体育">⚽ 体育</option>
+                        <option value="资料">📚 资料</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  {formData.type && typeOptions[formData.type] && (
+                    <div className="form-field">
+                      <label htmlFor="subtype">具体分类</label>
+                      <div className="select-wrapper">
+                        <select 
+                          name="subtype" 
+                          id="subtype" 
+                          value={subType} 
+                          onChange={e => setSubType(e.target.value)} 
+                          required
+                          className="modern-select"
+                        >
+                          <option value="">请选择具体分类</option>
+                          {typeOptions[formData.type].map(opt => (
+                            <option key={opt} value={opt}>{opt}</option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* 种子文件上传 */}
+              <div className="form-section">
+                <div className="section-header">
+                  <CloudUploadIcon style={{ color: '#2d5016', marginRight: '10px' }} />
+                  <h3>种子文件</h3>
+                </div>                <div 
+                  className={`file-upload-area ${isDragOver ? 'drag-over' : ''}`}
+                  onDragEnter={handleDragEnter}
+                  onDragLeave={handleDragLeave}
+                  onDragOver={handleDragOver}
+                  onDrop={handleDrop}
+                >
+                  <input
+                    type="file"
+                    id="torrentFile"
+                    name="torrentFile"
+                    onChange={handleFileChange}
+                    required
+                    accept=".torrent"
+                    className="file-input-hidden"
+                  />
+                  <label htmlFor="torrentFile" className="file-upload-label">
+                    <CloudUploadIcon 
+                      style={{ 
+                        fontSize: '48px', 
+                        color: isDragOver ? '#2d5016' : '#90ee90', 
+                        marginBottom: '10px',
+                        transition: 'all 0.3s ease'
+                      }} 
+                    />
+                    <div className="upload-text">
+                      <span className="upload-main-text">
+                        {isDragOver ? 
+                          '松开鼠标完成上传' : 
+                          (formData.torrentFile ? formData.torrentFile.name : '点击选择或拖拽.torrent文件')
+                        }
+                      </span>
+                      <span className="upload-sub-text">
+                        {isDragOver ? 
+                          '🎯 即将上传文件到NeuraFlux' :
+                          '✨ 支持拖拽上传 • 仅接受.torrent格式文件'
+                        }
+                      </span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+
+              {/* 标题和描述 */}
+              <div className="form-section">
+                <div className="section-header">
+                  <TitleIcon style={{ color: '#2d5016', marginRight: '10px' }} />
+                  <h3>资源信息</h3>
+                </div>
+                <div className="form-field">
+                  <label htmlFor="title">资源标题</label>
+                  <input
+                    type="text"
+                    id="title"
+                    name="title"
+                    value={formData.title}
+                    onChange={handleChange}
+                    required
+                    className="modern-input"
+                    placeholder="请输入简洁明确的资源标题..."
+                  />
+                </div>
+
+                <div className="form-field">
+                  <label htmlFor="subtitle">
+                    <DescriptionIcon style={{ marginRight: '5px', fontSize: '18px' }} />
+                    资源简介
+                  </label>
+                  <textarea
+                    id="subtitle"
+                    name="subtitle"
+                    value={formData.subtitle}
+                    onChange={handleChange}
+                    className="modern-textarea"
+                    rows="4"
+                    placeholder="详细描述资源内容、质量、特色等信息..."
+                  />
+                </div>
+              </div>
+
+              {/* 上传进度条 */}
+              {isUploading && (
+                <div className="upload-progress-section">
+                  <div className="progress-header">
+                    <span>正在上传资源...</span>
+                    <span>{Math.round(uploadProgress)}%</span>
+                  </div>
+                  <div className="progress-bar">
+                    <div 
+                      className="progress-fill" 
+                      style={{ width: `${uploadProgress}%` }}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* 提交按钮 */}
+              <div className="form-submit-section">
+                <button 
+                  type="submit" 
+                  className="publish-submit-btn"
+                  disabled={isUploading}
+                >
+                  {isUploading ? (
+                    <>
+                      <div className="loading-spinner" />
+                      上传中...
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircleIcon style={{ marginRight: '8px', fontSize: '20px' }} />
+                      发布资源
+                    </>
+                  )}
+                </button>
+                <div className="submit-tips">
+                  💡 请确保上传的资源合法合规，感谢您的贡献！
+                </div>
+              </div>
+            </form>
+          </div>
         </div>
-      </form>
+      </div>
     </div>
   );
 };
diff --git a/front/src/SharedStyles.css b/front/src/SharedStyles.css
index 730a76e..49c13e6 100644
--- a/front/src/SharedStyles.css
+++ b/front/src/SharedStyles.css
@@ -1156,15 +1156,31 @@
   transform: translateY(-1px);
 }
 
-/* 动画定义 */
-@keyframes backgroundShift {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
+/* 发布页面专用样式 */
+.publish-text-rain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 1;
 }
 
-@keyframes meteorFall {
+.publish-text-rain .text-drop {
+  position: absolute;
+  font-size: 16px;
+  font-weight: 600;
+  animation: publishTextFall linear infinite;
+  opacity: 0.7;
+  filter: drop-shadow(0 2px 4px rgba(144, 238, 144, 0.3));
+  font-family: 'Lora', serif;
+}
+
+@keyframes publishTextFall {
   0% {
-    transform: translateY(-100vh) translateX(-50px) rotate(0deg);
+    transform: translateY(-100vh) rotate(0deg);
     opacity: 0;
   }
   10% {
@@ -1174,246 +1190,638 @@
     opacity: 0.8;
   }
   100% {
-    transform: translateY(100vh) translateX(50px) rotate(360deg);
+    transform: translateY(100vh) rotate(360deg);
     opacity: 0;
   }
 }
 
-@keyframes gardenFloat {
+.publish-form-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.publish-form-advanced {
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 25px;
+  padding: 40px;
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(45, 80, 22, 0.12);
+}
+
+.publish-form-advanced::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #f0fff0 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 27px;
+  z-index: -1;
+  animation: borderGlow 5s ease-in-out infinite;
+}
+
+.form-section {
+  margin-bottom: 35px;
+  padding: 25px;
+  background: rgba(240, 255, 240, 0.2);
+  border-radius: 20px;
+  border: 1px solid rgba(144, 238, 144, 0.2);
+  transition: all 0.3s ease;
+}
+
+.form-section:hover {
+  background: rgba(240, 255, 240, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(45, 80, 22, 0.1);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(144, 238, 144, 0.2);
+}
+
+.section-header h3 {
+  color: #2d5016;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  font-family: 'Playfair Display', serif;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 25px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.form-field label {
+  color: #2d5016;
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  font-family: 'Lora', serif;
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+.modern-select {
+  width: 100%;
+  padding: 15px 20px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 15px;
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #2d5016;
+  transition: all 0.3s ease;
+  appearance: none;
+  cursor: pointer;
+  font-family: 'Lora', serif;
+}
+
+.modern-select:focus {
+  outline: none;
+  border-color: #90ee90;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 3px rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+}
+
+.modern-select::after {
+  content: '▼';
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #90ee90;
+  pointer-events: none;
+}
+
+.modern-input {
+  width: 100%;
+  padding: 15px 20px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 15px;
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #2d5016;
+  transition: all 0.3s ease;
+  font-family: 'Lora', serif;
+  box-sizing: border-box;
+}
+
+.modern-input:focus {
+  outline: none;
+  border-color: #90ee90;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 3px rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+}
+
+.modern-textarea {
+  width: 100%;
+  padding: 15px 20px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 15px;
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #2d5016;
+  transition: all 0.3s ease;
+  resize: vertical;
+  min-height: 120px;
+  font-family: 'Lora', serif;
+  line-height: 1.6;
+  box-sizing: border-box;
+}
+
+.modern-textarea:focus {
+  outline: none;
+  border-color: #90ee90;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 3px rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+}
+
+/* 文件上传区域 */
+.file-upload-area {
+  border: 3px dashed rgba(144, 238, 144, 0.4);
+  border-radius: 20px;
+  padding: 40px;
+  text-align: center;
+  background: rgba(240, 255, 240, 0.3);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.file-upload-area:hover {
+  border-color: #90ee90;
+  background: rgba(240, 255, 240, 0.5);
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px rgba(45, 80, 22, 0.15);
+}
+
+/* 拖拽上传状态样式 */
+.file-upload-area.drag-over {
+  border-color: #2d5016 !important;
+  background: rgba(144, 238, 144, 0.2) !important;
+  transform: translateY(-5px) scale(1.02);
+  box-shadow: 
+    0 15px 40px rgba(45, 80, 22, 0.25),
+    0 0 0 3px rgba(144, 238, 144, 0.3);
+  animation: dragPulse 1.5s ease-in-out infinite;
+}
+
+.file-upload-area.drag-over .upload-main-text {
+  color: #2d5016 !important;
+  font-weight: 700;
+  transform: scale(1.05);
+}
+
+.file-upload-area.drag-over .upload-sub-text {
+  color: #1a5c1a !important;
+  font-weight: 600;
+}
+
+@keyframes dragPulse {
   0%, 100% {
-    transform: translateY(0px) rotate(0deg);
-    opacity: 0.4;
+    box-shadow: 
+      0 15px 40px rgba(45, 80, 22, 0.25),
+      0 0 0 3px rgba(144, 238, 144, 0.3);
   }
   50% {
-    transform: translateY(-15px) rotate(180deg);
-    opacity: 0.6;
+    box-shadow: 
+      0 20px 50px rgba(45, 80, 22, 0.35),
+      0 0 0 5px rgba(144, 238, 144, 0.4);
   }
 }
 
-@keyframes userBarFloat {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
+/* 拖拽时的全局遮罩效果 */
+.file-upload-area.drag-over::after {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  right: -5px;
+  bottom: -5px;
+  border: 3px dashed #2d5016;
+  border-radius: 25px;
+  background: rgba(144, 238, 144, 0.1);
+  animation: dashRotate 2s linear infinite;
+  pointer-events: none;
 }
 
-@keyframes borderGlow {
-  0%, 100% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes iconDance {
-  0%, 100% {
-    transform: scale(1) rotate(0deg);
+@keyframes dashRotate {
+  0% {
+    border-color: #2d5016;
+    transform: rotate(0deg);
   }
   25% {
-    transform: scale(1.1) rotate(5deg);
+    border-color: #90ee90;
   }
   50% {
-    transform: scale(1.2) rotate(0deg);
+    border-color: #2d5016;
+    transform: rotate(180deg);
   }
   75% {
-    transform: scale(1.1) rotate(-5deg);
+    border-color: #90ee90;
+  }
+  100% {
+    border-color: #2d5016;
+    transform: rotate(360deg);
   }
 }
 
-@keyframes iconPulse {
+/* 文件上传区域增强过渡效果 */
+.file-upload-area {
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.file-upload-label {
+  transition: all 0.3s ease;
+  z-index: 10;
+  position: relative;
+}
+
+.upload-main-text,
+.upload-sub-text {
+  transition: all 0.3s ease;
+}
+
+/* 防止拖拽时的默认行为 */
+.file-upload-area * {
+  pointer-events: none;
+}
+
+.file-upload-area label {
+  pointer-events: auto;
+}
+
+.file-upload-area input {
+  pointer-events: auto;
+}
+
+/* 文件上传隐藏输入框 */
+.file-input-hidden {
+  display: none;
+}
+
+.file-upload-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 20px;
+  border-radius: 15px;
+  transition: all 0.3s ease;
+}
+
+.upload-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.upload-main-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2d5016;
+  transition: all 0.3s ease;
+  font-family: 'Playfair Display', serif;
+}
+
+.upload-sub-text {
+  font-size: 14px;
+  color: #4a7c59;
+  font-style: italic;
+  transition: all 0.3s ease;
+  text-align: center;
+  font-family: 'Lora', serif;
+}
+
+/* 上传进度区域样式 */
+.upload-progress-section {
+  margin: 30px 0;
+  padding: 25px;
+  background: rgba(144, 238, 144, 0.1);
+  border-radius: 20px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  animation: progressGlow 2s ease-in-out infinite;
+}
+
+@keyframes progressGlow {
   0%, 100% {
-    transform: scale(1);
+    border-color: rgba(144, 238, 144, 0.3);
+    box-shadow: 0 0 10px rgba(144, 238, 144, 0.1);
   }
   50% {
-    transform: scale(1.1);
+    border-color: rgba(144, 238, 144, 0.5);
+    box-shadow: 0 0 20px rgba(144, 238, 144, 0.2);
+  }
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  font-family: 'Lora', serif;
+  font-weight: 600;
+  color: #2d5016;
+  font-size: 16px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 12px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+  overflow: hidden;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #2d5016 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 8px;
+  transition: width 0.3s ease;
+  position: relative;
+  animation: progressShine 2s ease-in-out infinite;
+}
+
+@keyframes progressShine {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(255, 255, 255, 0.4) 50%, 
+    transparent 100%);
+  animation: progressShineEffect 2s ease-in-out infinite;
+}
+
+@keyframes progressShineEffect {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* 表单提交区域样式 */
+.form-submit-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 40px auto;
+  padding: 30px;
+  background: rgba(240, 255, 240, 0.3);
+  border-radius: 20px;
+  border: 2px dashed rgba(144, 238, 144, 0.4);
+  position: relative;
+  overflow: hidden;
+  max-width: 400px;
+}
+
+.form-submit-section::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(144, 238, 144, 0.1) 0%, transparent 70%);
+  animation: submitAreaFloat 8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes submitAreaFloat {
+  0%, 100% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg);
+  }
+}
+
+/* 发布提交按钮样式 */
+.publish-submit-btn {
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 25%, #90ee90 50%, #4a7c59 75%, #2d5016 100%);
+  background-size: 300% 300%;
+  color: white;
+  border: none;
+  padding: 18px 45px;
+  font-size: 18px;
+  font-weight: 600;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  font-family: 'Playfair Display', serif;
+  letter-spacing: 1px;
+  box-shadow: 
+    0 8px 25px rgba(45, 80, 22, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  animation: buttonGradient 3s ease-in-out infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 180px;
+  margin: 0 auto;
+  z-index: 10;
+}
+
+.publish-submit-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(255, 255, 255, 0.3) 50%, 
+    transparent 100%);
+  transition: left 0.6s ease;
+}
+
+.publish-submit-btn:hover::before {
+  left: 100%;
+}
+
+.publish-submit-btn:hover {
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 
+    0 12px 35px rgba(45, 80, 22, 0.4),
+    0 0 0 3px rgba(144, 238, 144, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  background-position: 100% 100%;
+}
+
+.publish-submit-btn:active {
+  transform: translateY(-1px) scale(1.02);
+  transition: all 0.1s ease;
+}
+
+.publish-submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+  animation: none;
+}
+
+.publish-submit-btn:disabled:hover {
+  transform: none;
+  box-shadow: 0 8px 25px rgba(45, 80, 22, 0.3);
+}
+
+@keyframes buttonGradient {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* 加载动画样式 */
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid white;
+  border-radius: 50%;
+  animation: loadingSpin 1s linear infinite;
+  margin-right: 12px;
+}
+
+@keyframes loadingSpin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 提交提示样式 */
+.submit-tips {
+  margin: 20px auto 0;
+  color: #4a7c59;
+  font-size: 14px;
+  font-style: italic;
+  padding: 15px;
+  background: rgba(144, 238, 144, 0.1);
+  border-radius: 15px;
+  border: 1px solid rgba(144, 238, 144, 0.2);
+  font-family: 'Lora', serif;
+  line-height: 1.5;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  max-width: 350px;
+}
+
+.submit-tips::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -100%;
+  width: 100%;
+  height: calc(100% + 4px);
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(144, 238, 144, 0.2) 50%, 
+    transparent 100%);
+  animation: tipShine 4s ease-in-out infinite;
+}
+
+@keyframes tipShine {
+  0%, 80%, 100% {
+    left: -100%;
+  }
+  10%, 70% {
+    left: 100%;
   }
 }
 
 /* 响应式设计 */
-@media (max-width: 1200px) {
-  .emerald-user-bar {
-    width: 440px;
-    right: 20px;
-  }
-  
-  .emerald-nav-bar {
-    margin: 100px 20px 20px;
-    padding: 16px 20px;
-    grid-template-columns: repeat(6, 1fr);
-  }
-  
-  .emerald-nav-item {
-    min-width: 80px;
-    padding: 12px 16px;
-  }
-}
-
 @media (max-width: 768px) {
-  .emerald-user-bar {
-    position: relative;
-    top: 0;
-    right: 0;
-    width: 100%;
-    margin: 20px 0;
-    flex-direction: column;
-    gap: 16px;
+  .form-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
   }
   
-  .emerald-brand-section {
-    margin-right: 0;
-    justify-content: center;
+  .publish-form-advanced {
+    padding: 25px;
+    margin: 20px;
   }
   
-  .emerald-user-stats {
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
+  .file-upload-area {
+    padding: 30px 20px;
   }
   
-  .emerald-nav-bar {
-    margin: 20px 10px;
-    padding: 16px;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
+  .upload-main-text {
+    font-size: 16px;
   }
   
-  .emerald-nav-item {
-    min-width: 70px;
-    padding: 10px 12px;
-  }
-  
-  .emerald-nav-icon {
-    font-size: 24px !important;
-  }
-  
-  .emerald-nav-label {
+  .upload-sub-text {
     font-size: 12px;
   }
   
-  .emerald-content-section {
-    margin: 20px 10px;
-    padding: 20px 15px;
+  .publish-submit-btn {
+    padding: 15px 35px;
+    font-size: 16px;
+    min-width: 160px;
   }
   
-  .meteor {
-    font-size: 14px;
-  }
-  
-  .garden-element {
-    font-size: 20px;
-  }
-  
-  .forum-toolbar {
-    flex-direction: column;
-    gap: 15px;
-    padding: 15px 20px;
-  }
-  
-  .search-section {
-    width: 100%;
-    max-width: none;
-  }
-  
-  .search-input-container {
-    max-width: none;
-  }
-  
-  .forum-search-input {
-    border-radius: 25px 0 0 25px;
-  }
-  
-  .forum-search-btn {
-    border-radius: 0 25px 25px 0;
-    padding: 14px 16px;
-  }
-  
-  .forum-post-card {
+  .form-submit-section {
     padding: 20px;
-  }
-  
-  .post-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-  
-  .post-footer {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-}
-
-@media (max-width: 480px) {
-  .emerald-nav-bar {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    padding: 12px;
-  }
-  
-  .emerald-nav-item {
-    min-width: 60px;
-    padding: 8px 10px;
-  }
-  
-  .emerald-nav-icon {
-    font-size: 20px !important;
-  }
-  
-  .emerald-nav-label {
-    font-size: 11px;
-  }
-  
-  .emerald-table-section {
-    margin: 20px 10px;
-    padding: 20px 15px;
-  }
-  
-  .emerald-table th,
-  .emerald-table td {
-    padding: 10px 12px;
-    font-size: 13px;
-  }
-  
-  .forum-toolbar {
-    padding: 12px 15px;
-  }
-  
-  .search-section {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .forum-search-input {
-    border-radius: 20px;
-    border: 2px solid rgba(144, 238, 144, 0.3);
-    border-bottom: none;
-  }
-  
-  .forum-search-btn {
-    border-radius: 20px;
-    border: 2px solid rgba(144, 238, 144, 0.3);
-    border-top: none;
-    width: 100%;
-  }
-  
-  .post-detail-title {
-    font-size: 24px;
-  }
-  
-  .post-detail-content {
-    font-size: 14px;
-  }
-  
-  .reply-textarea {
-    padding: 15px;
-  }
-  
-  .submit-reply-btn {
-    padding: 10px 20px;
-    font-size: 14px;
+    margin-top: 30px;
   }
 }
diff --git a/front/src/UserProfile.css b/front/src/UserProfile.css
new file mode 100644
index 0000000..913b571
--- /dev/null
+++ b/front/src/UserProfile.css
@@ -0,0 +1,681 @@
+/* UserProfile.css - 翡翠园林风格用户个人资料页面样式 */
+
+/* 引入Google字体 */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;500;600&display=swap');
+
+/* 主容器 */
+.user-profile-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 20%, #8fbc8f 40%, #98fb98 60%, #f0fff0 100%);
+  padding: 24px;
+  font-family: 'Lora', serif;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 背景装饰元素 */
+.user-profile-container::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(144, 238, 144, 0.08) 0%, transparent 50%);
+  animation: backgroundShift 25s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 响应式网格布局 */
+.profile-grid {
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  grid-template-rows: auto auto;
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 10;
+}
+
+@media (max-width: 1200px) {
+  .profile-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto auto;
+  }
+}
+
+/* 卡片基础样式 */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  box-shadow: 
+    0 20px 60px rgba(45, 80, 22, 0.12),
+    0 8px 25px rgba(144, 238, 144, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  position: relative;
+}
+
+.profile-card::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, 
+    #90ee90 0%, 
+    #98fb98 25%, 
+    #f0fff0 50%, 
+    #98fb98 75%, 
+    #90ee90 100%);
+  border-radius: 27px;
+  z-index: -1;
+  animation: borderGlow 4s ease-in-out infinite;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.profile-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 
+    0 25px 80px rgba(45, 80, 22, 0.15),
+    0 12px 35px rgba(144, 238, 144, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.profile-card:hover::before {
+  opacity: 1;
+}
+
+/* 用户基本信息卡片 */
+.user-info-card {
+  grid-column: 1;
+  grid-row: 1;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 600px;
+}
+
+.user-avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.avatar-container {
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+}
+
+.avatar-container:hover {
+  transform: scale(1.05);
+}
+
+.user-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 4px solid rgba(144, 238, 144, 0.4);
+  box-shadow: 
+    0 8px 24px rgba(45, 80, 22, 0.2),
+    0 0 0 4px rgba(144, 238, 144, 0.2);
+  transition: all 0.3s ease;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: rgba(45, 80, 22, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.user-title {
+  color: #1a237e;
+  font-size: 28px;
+  font-weight: 600;
+  margin: 0;
+  letter-spacing: 0.5px;
+  text-align: center;
+}
+
+/* 表单区域 */
+.user-form {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3a4a6b;
+  letter-spacing: 0.3px;
+}
+
+.form-input {
+  padding: 12px 16px;
+  border: 2px solid #e0e7ff;
+  border-radius: 12px;
+  font-size: 16px;
+  background: rgba(248, 250, 255, 0.6);
+  transition: all 0.3s ease;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #1a237e;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(26, 35, 126, 0.1);
+}
+
+.form-input:read-only {
+  background: #f5f7ff;
+  cursor: not-allowed;
+  color: #6b7280;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.status-dot.active {
+  background: #43a047;
+  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.2);
+}
+
+.status-dot.banned {
+  background: #e53935;
+  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
+}
+
+/* 邀请功能 */
+.invite-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f8faff 0%, #e0e7ff 100%);
+  border-radius: 16px;
+  border: 1px solid #e0e7ff;
+}
+
+.invite-form {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.invite-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.invite-counter {
+  font-size: 14px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.invite-status {
+  font-size: 14px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(229, 57, 53, 0.1);
+  color: #e53935;
+  border: 1px solid rgba(229, 57, 53, 0.2);
+}
+
+/* 按钮样式 */
+.btn {
+  padding: 12px 20px;
+  border: none;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 100px;
+  max-width: 140px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
+  transition: left 0.5s ease;
+}
+
+.btn:hover::before {
+  left: 100%;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #1a237e 0%, #3f51b5 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(26, 35, 126, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 24px rgba(26, 35, 126, 0.4);
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, #e53935 0%, #f44336 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
+}
+
+.btn-warning {
+  background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
+  color: white;
+  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
+}
+
+.btn-small {
+  padding: 6px 12px;
+  font-size: 12px;
+  min-width: 70px;
+  max-width: 100px;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  flex-wrap: wrap;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* 活跃度卡片 */
+.activity-card {
+  grid-column: 1;
+  grid-row: 2;
+  padding: 32px;
+  min-height: 400px;
+}
+
+.activity-title {
+  color: #1a237e;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 24px 0;
+  letter-spacing: 0.5px;
+}
+
+.activity-content {
+  background: linear-gradient(135deg, #f0fff0 0%, #e6ffe6 100%);
+  border: 2px dashed rgba(144, 238, 144, 0.6);
+  border-radius: 16px;
+  padding: 20px;
+  height: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.magic-exchange {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  border: 1px solid rgba(144, 238, 144, 0.3);
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.exchange-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.exchange-input {
+  min-width: 100px;
+  flex: 1;
+  max-width: calc(50% - 4px);
+}
+
+.exchange-result {
+  font-size: 14px;
+  font-weight: 600;
+  color: #43a047;
+  padding: 8px 12px;
+  background: rgba(67, 160, 71, 0.1);
+  border-radius: 8px;
+  border: 1px solid rgba(67, 160, 71, 0.2);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 10px;
+  border: 1px solid rgba(224, 231, 255, 0.5);
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.stat-value.upload { color: #43a047; }
+.stat-value.download { color: #e53935; }
+.stat-value.ratio { color: #ff9800; }
+.stat-value.vip { color: #1976d2; }
+.stat-value.magic { color: #9c27b0; }
+
+/* 种子列表卡片 */
+.seeds-card, .favorites-card {
+  grid-column: 2;
+  padding: 32px;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.seeds-card {
+  grid-row: 1;
+}
+
+.favorites-card {
+  grid-row: 2;
+}
+
+.list-title {
+  color: #1a237e;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 24px 0;
+  letter-spacing: 0.5px;
+}
+
+.list-container {
+  background: linear-gradient(135deg, #f0fff0 0%, #e6ffe6 100%);
+  border: 2px dashed rgba(144, 238, 144, 0.6);
+  border-radius: 16px;
+  padding: 16px;
+  flex: 1;
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 100%;
+  max-height: calc(100% - 40px);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #9e9e9e;
+  font-size: 18px;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.seeds-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 320px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.seed-item {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 12px;
+  border: 1px solid rgba(224, 231, 255, 0.6);
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.seed-item:hover {
+  background: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(26, 35, 126, 0.1);
+}
+
+.seed-title {
+  flex: 2;
+  font-weight: 600;
+  color: #1a237e;
+  text-decoration: none;
+  font-size: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.seed-title:hover {
+  text-decoration: underline;
+}
+
+.seed-tags {
+  flex: 1;
+  color: #5c6bc0;
+  font-size: 14px;
+  padding: 0 12px;
+}
+
+.seed-stats {
+  flex: 1;
+  color: #ff9800;
+  font-size: 14px;
+  text-align: right;
+  font-weight: 500;
+  padding-right: 12px;
+}
+
+.seed-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* 滚动条样式 */
+.seeds-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.seeds-list::-webkit-scrollbar-track {
+  background: rgba(224, 231, 255, 0.3);
+  border-radius: 3px;
+}
+
+.seeds-list::-webkit-scrollbar-thumb {
+  background: rgba(26, 35, 126, 0.3);
+  border-radius: 3px;
+}
+
+.seeds-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(26, 35, 126, 0.5);
+}
+
+/* 对话框覆盖样式 */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+  z-index: 1000;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .user-profile-container {
+    padding: 16px;
+  }
+  
+  .profile-grid {
+    gap: 16px;
+  }
+  
+  .profile-card {
+    padding: 24px;
+  }
+  
+  .user-title {
+    font-size: 24px;
+  }
+  
+  .exchange-form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .seed-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  
+  .seed-title,
+  .seed-tags,
+  .seed-stats {
+    flex: none;
+    text-align: left;
+    padding: 0;
+  }
+  
+  .seed-actions {
+    justify-content: flex-end;
+  }
+}
+
+/* 动画 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.profile-card {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.profile-card:nth-child(1) { animation-delay: 0.1s; }
+.profile-card:nth-child(2) { animation-delay: 0.2s; }
+.profile-card:nth-child(3) { animation-delay: 0.3s; }
+.profile-card:nth-child(4) { animation-delay: 0.4s; }
+
+/* 加载动画 */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.loading {
+  animation: pulse 2s infinite;
+}
diff --git a/front/src/UserProfile.js b/front/src/UserProfile.js
index fb44b43..074d68c 100644
--- a/front/src/UserProfile.js
+++ b/front/src/UserProfile.js
@@ -1,5 +1,13 @@
 import React, { useState, useEffect } from "react";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import PersonIcon from "@mui/icons-material/Person";
+import EmailIcon from "@mui/icons-material/Email";
+import SchoolIcon from "@mui/icons-material/School";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import EmptyIcon from "@mui/icons-material/Inbox";
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,7 +17,7 @@
 import DialogActions from '@mui/material/DialogActions';
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
-import "./App.css";
+import "./UserProfile.css";
 
 export default function UserProfile() {
   const navigate = useNavigate();
@@ -386,442 +394,352 @@
       console.error('账号迁移失败', err);
       setMigrationStatus('迁移失败，请检查网络');
     }
-  };
+  };  return (
+    <div className="user-profile-container">
+      <div className="profile-grid">
+        {/* 用户基本信息卡片 */}
+        <div className="profile-card user-info-card">
+          <div className="user-avatar-section">
+            <div className="avatar-container" onClick={handleAvatarClick}>
+              {tempUserInfo.avatar_url ? (
+                <img
+                  src={tempUserInfo.avatar_url}
+                  alt="用户头像"
+                  className="user-avatar"
+                />
+              ) : (
+                <AccountCircleIcon style={{ fontSize: 120, color: '#1a237e' }} />
+              )}
+              <div className="avatar-overlay">
+                <span>点击更换头像</span>
+              </div>
+            </div>
+            <h2 className="user-title">用户个人资料</h2>
+          </div>
 
-  return (
-    <div
-      className="container"
-      style={{
-        minHeight: '100vh',
-        background: 'linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%)',
-        display: 'grid',
-        gridTemplateColumns: '1.1fr 1.9fr',
-        gridTemplateRows: 'auto auto',
-        gap: '12px',
-        padding: '24px 3vw',
-        boxSizing: 'border-box'
-      }}
-    >
-      {/* 左上：用户资料 */}
-      <div style={{
-        gridColumn: '1 / 2',
-        gridRow: '1 / 2',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 28px',
-        minWidth: 320,
-        minHeight: 420,
-        transition: 'box-shadow 0.2s',
-      }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 18 }}>
-          <div onClick={handleAvatarClick} style={{ cursor: 'pointer', position: 'relative' }}>
-            <AccountCircleIcon style={{ fontSize: 96, color: '#1a237e', marginBottom: 12 }} />
-            {tempUserInfo.avatar_url && (
-              <img
-                src={tempUserInfo.avatar_url}
-                alt="用户头像"
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: 96,
-                  height: 96,
-                  borderRadius: '50%',
-                  objectFit: 'cover',
-                  border: '2px solid #e0e7ff',
-                  boxShadow: '0 2px 8px #bfcfff'
-                }}
+          <div className="user-form">
+            <div className="form-group">
+              <label className="form-label">
+                <PersonIcon style={{ fontSize: 16, marginRight: 4 }} />
+                用户名
+              </label>
+              <input
+                className="form-input"
+                value={tempUserInfo.username}
+                onChange={(e) => handleInputChange("username", e.target.value)}
+                placeholder="请输入用户名"
               />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">
+                <EmailIcon style={{ fontSize: 16, marginRight: 4 }} />
+                邮箱
+              </label>
+              <input
+                className="form-input"
+                value={tempUserInfo.email}
+                readOnly
+                style={{ cursor: 'not-allowed' }}
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">
+                <SchoolIcon style={{ fontSize: 16, marginRight: 4 }} />
+                学校
+              </label>
+              <input
+                className="form-input"
+                value={tempUserInfo.school}
+                onChange={(e) => handleInputChange("school", e.target.value)}
+                placeholder="请输入学校名称"
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">账号状态</label>
+              <div className="status-indicator">
+                <input
+                  className="form-input"
+                  value={tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? "封禁" : "正常"}
+                  readOnly
+                />
+                <div className={`status-dot ${tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? 'banned' : 'active'}`}></div>
+              </div>
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">性别</label>
+              <select
+                className="form-input"
+                value={tempUserInfo.gender}
+                onChange={(e) => handleInputChange("gender", e.target.value)}
+              >
+                <option value="">请选择性别</option>
+                <option value="m">男性</option>
+                <option value="f">女性</option>
+              </select>
+            </div>
+
+            {/* 邀请功能 */}
+            <div className="invite-section">
+              <label className="form-label">邀请功能</label>
+              <div className="invite-form">
+                <input
+                  className="form-input invite-input"
+                  type="email"
+                  placeholder="输入邀请邮箱"
+                  value={inviteEmail}
+                  onChange={e => setInviteEmail(e.target.value)}
+                  disabled={Number(tempUserInfo.invite_left) === 0}
+                />
+                <button
+                  className="btn btn-primary btn-small"
+                  onClick={handleInvite}
+                  disabled={Number(tempUserInfo.invite_left) === 0 || !inviteEmail}
+                >
+                  邀请
+                </button>
+              </div>
+              <div className="invite-counter">
+                剩余邀请次数：{tempUserInfo.invite_left || "0"}
+              </div>
+              {inviteStatus && (
+                <div className="invite-status">{inviteStatus}</div>
+              )}
+            </div>
+
+            <div className="btn-group">
+              <button className="btn btn-primary" onClick={handleSave}>
+                保存信息
+              </button>
+              <button className="btn btn-danger" onClick={() => setAppealOpen(true)}>
+                用户申诉
+              </button>
+              <button className="btn btn-warning" onClick={() => setMigrationOpen(true)}>
+                账号迁移
+              </button>            </div>
+          </div>
+        </div>
+
+        {/* 活跃度卡片 */}
+        <div className="profile-card activity-card">
+          <h3 className="activity-title">
+            <AutoAwesomeIcon style={{ fontSize: 24, marginRight: 8 }} />
+            活跃度统计
+          </h3>
+          
+          <div className="activity-content">
+            {/* 魔力值兑换 */}
+            <div className="magic-exchange">
+              <div className="stat-item">
+                <span className="stat-label">当前魔力值</span>
+                <span className="stat-value magic">{userStats.magic}</span>
+              </div>
+              
+              <div className="exchange-form">
+                <input
+                  className="form-input exchange-input"
+                  type="number"
+                  placeholder="输入兑换魔力值"
+                  value={exchangeMagic}
+                  onChange={e => setExchangeMagic(e.target.value)}
+                />
+                <select
+                  className="form-input exchange-input"
+                  value={exchangeType}
+                  onChange={e => setExchangeType(e.target.value)}
+                >
+                  <option value="uploaded">上传量（增加）</option>
+                  <option value="downloaded">下载量（减少）</option>
+                  <option value="vip_downloads">VIP下载次数（增加）</option>
+                </select>
+                <button
+                  className="btn btn-primary btn-small"
+                  onClick={handleExchange}
+                  disabled={
+                    !exchangeMagic ||
+                    isNaN(exchangeMagic) ||
+                    Number(exchangeMagic) <= 0 ||
+                    Number(exchangeMagic) > userStats.magic ||
+                    !Number.isInteger(exchangeResult)
+                  }
+                >
+                  兑换
+                </button>
+              </div>
+              
+              {exchangeMagic && (
+                <div className="exchange-result">
+                  可兑换：{exchangeResult} {exchangeType === 'vip_downloads' ? '次' : 'MB'}
+                  {!Number.isInteger(exchangeResult) && exchangeResult > 0 && (
+                    <span style={{ color: '#e53935', marginLeft: 8 }}>
+                      (结果必须为整数)
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 统计数据 */}
+            <div className="stats-grid">
+              <div className="stat-item">
+                <span className="stat-label">
+                  <CloudUploadIcon style={{ fontSize: 16, marginRight: 4 }} />
+                  上传量
+                </span>
+                <span className="stat-value upload">
+                  {(userStats.upload / 1000000)?.toFixed(2)} MB
+                </span>
+              </div>
+              
+              <div className="stat-item">
+                <span className="stat-label">
+                  <CloudDownloadIcon style={{ fontSize: 16, marginRight: 4 }} />
+                  下载量
+                </span>
+                <span className="stat-value download">
+                  {(userStats.download / 1000000)?.toFixed(2)} MB
+                </span>
+              </div>
+              
+              <div className="stat-item">
+                <span className="stat-label">上传/下载比</span>
+                <span className="stat-value ratio">
+                  {userStats.download === 0 ? "∞" : (userStats.upload / userStats.download).toFixed(2)}
+                </span>
+              </div>
+              
+              <div className="stat-item">
+                <span className="stat-label">VIP下载次数</span>
+                <span className="stat-value vip">{userStats.viptime}</span>
+              </div>
+            </div>
+          </div>
+        </div>        {/* 个人上传种子列表 */}
+        <div className="profile-card seeds-card">
+          <h3 className="list-title">
+            <CloudUploadIcon style={{ fontSize: 24, marginRight: 8 }} />
+            个人上传种子列表
+          </h3>
+          
+          <div className="list-container">
+            {userSeeds.length === 0 ? (
+              <div className="empty-state">
+                <EmptyIcon className="empty-icon" />
+                <span>暂无上传种子</span>
+              </div>
+            ) : (
+              <ul className="seeds-list">
+                {userSeeds.map((seed, idx) => (
+                  <li
+                    key={seed.seedid || idx}
+                    className="seed-item"
+                    onClick={e => {
+                      if (e.target.classList.contains('delete-btn')) return;
+                      navigate(`/torrent/${seed.seed_id}`);
+                    }}
+                  >
+                    <span className="seed-title">{seed.title}</span>
+                    <span className="seed-tags">{seed.tags}</span>
+                    <span className="seed-stats">人气: {seed.downloadtimes}</span>
+                    <div className="seed-actions">
+                      <button
+                        className="btn btn-danger btn-small delete-btn"
+                        onClick={async e => {
+                          e.stopPropagation();
+                          const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+                          const userid = match ? match[2] : null;
+                          if (!userid) {
+                            alert('未获取到用户ID');
+                            return;
+                          }
+                          try {
+                            const res = await fetch(`${API_BASE_URL}/api/delete-seed`, {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ seed_id: seed.seed_id, userid }),
+                            });
+                            if (res.ok) {
+                              setUserSeeds(userSeeds.filter((s, i) => (s.seed_id || i) !== (seed.seed_id || idx)));
+                            } else {
+                              alert('删除失败，请重试');
+                            }
+                          } catch (err) {
+                            alert('删除失败，请检查网络');
+                          }
+                        }}
+                      >
+                        删除
+                      </button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             )}
           </div>
-          <h2 style={{ color: '#1a237e', marginBottom: 0, fontSize: 26, letterSpacing: 1 }}>用户个人资料</h2>
         </div>
-        <div className="card" style={{
-          padding: 32,
-          width: '100%',
-          background: '#fff',
-          borderRadius: 18,
-          boxShadow: '0 2px 12px #e0e7ff',
-          flex: 1,
-          minWidth: 0
-        }}>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>用户名：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.username}
-              onChange={(e) => handleInputChange("username", e.target.value)}
-              sx={{ flex: 1, minWidth: 0 }}
-            />
-          </div>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邮箱：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.email}
-              InputProps={{ readOnly: true }}
-              sx={{ flex: 1, minWidth: 0, background: '#f5f5f5' }}
-            />
-          </div>
-          {/* 邀请功能 */}
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>邀请剩余：</b>
-            <TextField
-              type="email"
-              size="small"
-              placeholder="被邀请邮箱"
-              value={inviteEmail}
-              onChange={e => setInviteEmail(e.target.value)}
-              sx={{ flex: 2, marginRight: 1, minWidth: 120 }}
-              disabled={Number(tempUserInfo.invite_left) === 0}
-            />
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handleInvite}
-              disabled={Number(tempUserInfo.invite_left) === 0 || !inviteEmail}
-              sx={{ marginRight: 1, minWidth: 80 }}
-            >邀请</Button>
-            <span style={{ color: '#888', fontSize: 15 }}>剩余：{tempUserInfo.invite_left || "0"}</span>
-          </div>
-          {inviteStatus && <div style={{ color: '#e53935', fontSize: 14, marginBottom: 8 }}>{inviteStatus}</div>}
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>学校：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.school}
-              onChange={(e) => handleInputChange("school", e.target.value)}
-              sx={{ flex: 1, minWidth: 0 }}
-            />
-          </div>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>账号状态：</b>
-            <TextField
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? "封禁" : "正常"}
-              InputProps={{ readOnly: true }}
-              sx={{ flex: 1, minWidth: 0, background: '#f5f5f5' }}
-            />
-            <span style={{
-              display: 'inline-block',
-              width: 12,
-              height: 12,
-              borderRadius: '50%',
-              backgroundColor: tempUserInfo.account_status === 1 || tempUserInfo.account_status === "1" ? '#e53935' : '#43a047',
-              marginLeft: 10,
-              border: '1px solid #b2b2b2',
-            }} />
-          </div>
-          <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
-            <b style={{ width: 72, textAlign: 'left', marginRight: 0, fontSize: 16 }}>性别：</b>
-            <TextField
-              select
-              variant="outlined"
-              size="small"
-              value={tempUserInfo.gender}
-              onChange={e => handleInputChange("gender", e.target.value)}
-              sx={{ flex: 1, minWidth: 0 }}
-            >
-              <MenuItem value="m">男性</MenuItem>
-              <MenuItem value="f">女性</MenuItem>
-            </TextField>
-          </div>          <div style={{ display: 'flex', gap: 16, marginTop: 24, justifyContent: 'flex-end' }}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handleSave}
-              sx={{ fontSize: 16, borderRadius: 2, padding: '6px 12px' }}
-            >保存</Button>
-            <Button
-              variant="contained"
-              color="error"
-              onClick={() => setAppealOpen(true)}
-              sx={{ fontSize: 16, borderRadius: 2, padding: '6px 12px' }}
-            >用户申诉</Button>
-            <Button
-              variant="contained"
-              color="warning"
-              onClick={() => setMigrationOpen(true)}
-              sx={{ fontSize: 16, borderRadius: 2, padding: '6px 12px' }}
-            >账号迁移</Button>
-          </div>
-        </div>
-      </div>
-      {/* 左下：活跃度模块 */}
-      <div style={{
-        gridColumn: '1 / 2',
-        gridRow: '2 / 3',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 28px',
-        minWidth: 320,
-        minHeight: 320,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
-      }}>
-        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18, letterSpacing: 1 }}>活跃度</h3>
-        <div style={{
-          border: '1.5px dashed #b2b2b2',
-          borderRadius: 14,
-          minHeight: 80,
-          padding: 22,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 14,
-          fontSize: 18,
-          background: '#f8faff'
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
-            <span>魔力值：<b style={{ color: '#1976d2' }}>{userStats.magic}</b></span>
-            <TextField
-              type="number"
-              size="small"
-              placeholder="输入兑换魔力值"
-              value={exchangeMagic}
-              onChange={e => setExchangeMagic(e.target.value)}
-              sx={{ width: 100, marginLeft: 2, marginRight: 1 }}
-            />
-            <TextField
-              select
-              size="small"
-              value={exchangeType}
-              onChange={e => setExchangeType(e.target.value)}
-              sx={{ minWidth: 120 }}
-            >
-              <MenuItem value="uploaded">上传量（增加）</MenuItem>
-              <MenuItem value="downloaded">下载量（减少）</MenuItem>
-              <MenuItem value="vip_downloads">VIP下载次数（增加）</MenuItem>
-            </TextField>            <span style={{ marginLeft: 8, color: '#43a047' }}>
-              可兑换：<b>{exchangeResult}</b> {exchangeType === 'vip_downloads' ? '次' : 'MB'}
-              {!Number.isInteger(exchangeResult) && exchangeResult > 0 && (
-                <span style={{ color: '#e53935', fontSize: '12px', marginLeft: 8 }}>
-                  (结果必须为整数)
-                </span>
-              )}
-            </span><Button
-              variant="contained"
-              color="primary"
-              onClick={handleExchange}
-              disabled={
-                !exchangeMagic ||
-                isNaN(exchangeMagic) ||
-                Number(exchangeMagic) <= 0 ||
-                Number(exchangeMagic) > userStats.magic ||
-                !Number.isInteger(exchangeResult)
-              }
-              sx={{
-                marginLeft: 2,
-                minWidth: 80,
-                background: (!exchangeMagic || isNaN(exchangeMagic) || Number(exchangeMagic) <= 0 || Number(exchangeMagic) > userStats.magic || !Number.isInteger(exchangeResult)) ? '#ccc' : undefined
-              }}
-            >兑换</Button>
-          </div>          <div>上传量：<b style={{ color: '#43a047' }}>{(userStats.upload / 1000000)?.toFixed(2)} MB</b></div>
-          <div>下载量：<b style={{ color: '#e53935' }}>{(userStats.download / 1000000)?.toFixed(2)} MB</b></div>
-          <div>上传/下载值：<b style={{ color: '#ff9800' }}>{userStats.download === 0 ? "∞" : (userStats.upload / userStats.download).toFixed(2)}</b></div>
-          <div>VIP下载次数：<b style={{ color: '#1976d2' }}>{userStats.viptime}</b></div>
-        </div>
-      </div>
-      {/* 右上：个人上传种子列表 */}
-      <div style={{
-        gridColumn: '2 / 3',
-        gridRow: '1 / 2',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 36px',
-        minHeight: 420,
-        display: 'flex',
-        flexDirection: 'column'
-      }}>
-        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18, letterSpacing: 1 }}>个人上传种子列表</h3>
-        <div style={{
-          border: '1.5px dashed #b2b2b2',
-          borderRadius: 14,
-          minHeight: 80,
-          padding: 16,
-          background: '#f8faff'
-        }}>
-          {userSeeds.length === 0 ? (
-            <div style={{ color: '#b2b2b2', fontSize: 18, textAlign: 'center' }}>（暂无上传种子）</div>
-          ) : (
-            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-              {userSeeds.map((seed, idx) => (
-                <li
-                  key={seed.seedid || idx}
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: '12px 0',
-                    borderBottom: idx === userSeeds.length - 1 ? 'none' : '1px solid #e0e7ff',
-                    cursor: 'pointer',
-                    transition: 'background 0.15s'
-                  }}
-                  onClick={e => {
-                    if (e.target.classList.contains('delete-btn')) return;
-                    navigate(`/torrent/${seed.seed_id}`);
-                  }}
-                  onMouseOver={e => e.currentTarget.style.background = '#f3f6ff'}
-                  onMouseOut={e => e.currentTarget.style.background = ''}
-                >
-                  <span style={{ flex: 2, fontWeight: 500, color: '#1a237e', textDecoration: 'underline' }}>{seed.title}</span>
-                  <span style={{ flex: 1, color: '#5c6bc0' }}>{seed.tags}</span>
-                  <span style={{ flex: 1, color: '#ff9800', textAlign: 'right' }}>人气: {seed.downloadtimes}</span>
-                  <Button
-                    className="delete-btn"
-                    variant="contained"
-                    color="error"
-                    size="small"
-                    sx={{ marginLeft: 2, borderRadius: 1, minWidth: 60 }} onClick={async e => {
-                      e.stopPropagation();
-                      const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
-                      const userid = match ? match[2] : null;
-                      if (!userid) {
-                        alert('未获取到用户ID');
-                        return;
-                      }
-                      try {
-                        const res = await fetch(`${API_BASE_URL}/api/delete-seed`, {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ seed_id: seed.seed_id, userid }),
-                        });
-                        if (res.ok) {
-                          setUserSeeds(userSeeds.filter((s, i) => (s.seed_id || i) !== (seed.seed_id || idx)));
-                        } else {
-                          alert('删除失败，请重试');
-                        }
-                      } catch (err) {
-                        alert('删除失败，请检查网络');
-                      }
+
+        {/* 个人收藏种子列表 */}
+        <div className="profile-card favorites-card">
+          <h3 className="list-title">
+            <FavoriteIcon style={{ fontSize: 24, marginRight: 8 }} />
+            个人收藏种子列表
+          </h3>
+          
+          <div className="list-container">
+            {userFavorites.length === 0 ? (
+              <div className="empty-state">
+                <FavoriteIcon className="empty-icon" />
+                <span>暂无收藏种子</span>
+              </div>
+            ) : (
+              <ul className="seeds-list">
+                {userFavorites.map((seed, idx) => (
+                  <li
+                    key={seed.seedid || idx}
+                    className="seed-item"
+                    onClick={e => {
+                      if (e.target.classList.contains('remove-favorite-btn')) return;
+                      navigate(`/torrent/${seed.seedid || seed.seed_id}`);
                     }}
-                  >删除</Button>
-                </li>
-              ))}
-            </ul>
-          )}
+                  >
+                    <span className="seed-title">{seed.seed.title}</span>
+                    <span className="seed-tags">{seed.seed.tags}</span>
+                    <span className="seed-stats">人气: {seed.seed.downloadtimes}</span>
+                    <div className="seed-actions">
+                      <button
+                        className="btn btn-warning btn-small remove-favorite-btn"
+                        onClick={e => {
+                          e.stopPropagation();
+                          handleRemoveFavorite(seed.seedid || seed.seed_id);
+                        }}
+                      >
+                        取消收藏
+                      </button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
         </div>
-      </div>
-      {/* 右下：个人收藏种子列表 */}
-      <div style={{
-        gridColumn: '2 / 3',
-        gridRow: '2 / 3',
-        background: '#fff',
-        borderRadius: 20,
-        boxShadow: '0 6px 32px #e0e7ff',
-        padding: '32px 36px',
-        minHeight: 320,
-        display: 'flex',
-        flexDirection: 'column'
-      }}>
-        <h3 style={{ color: '#1a237e', fontSize: 22, marginBottom: 18, letterSpacing: 1 }}>个人收藏种子列表</h3>
-        <div style={{
-          border: '1.5px dashed #b2b2b2',
-          borderRadius: 14,
-          minHeight: 80,
-          padding: 16,
-          background: '#f8faff'
-        }}>
-          {userFavorites.length === 0 ? (
-            <div style={{ color: '#b2b2b2', fontSize: 18, textAlign: 'center' }}>（暂无收藏种子）</div>
-          ) : (<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
-            {userFavorites.map((seed, idx) => (
-              <li
-                key={seed.seedid || idx}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  padding: '12px 0',
-                  borderBottom: idx === userFavorites.length - 1 ? 'none' : '1px solid #e0e7ff',
-                  cursor: 'pointer',
-                  transition: 'background 0.15s'
-                }} onClick={e => {
-                  if (e.target.classList.contains('remove-favorite-btn')) return;
-                  navigate(`/torrent/${seed.seedid || seed.seed_id}`);
-                }}
-                onMouseOver={e => e.currentTarget.style.background = '#f3f6ff'}
-                onMouseOut={e => e.currentTarget.style.background = ''}
-              >
-                <span style={{ flex: 2, fontWeight: 500, color: '#1a237e', textDecoration: 'underline', cursor: 'pointer' }}>{seed.seed.title}</span>
-                <span style={{ flex: 1, color: '#5c6bc0' }}>{seed.seed.tags}</span>
-                <span style={{ flex: 1, color: '#ff9800', textAlign: 'right' }}>人气: {seed.seed.downloadtimes}</span>
-                <Button
-                  className="remove-favorite-btn"
-                  variant="contained"
-                  color="warning"
-                  size="small"
-                  sx={{ marginLeft: 2, borderRadius: 1, minWidth: 80 }} onClick={e => {
-                    e.stopPropagation();
-                    handleRemoveFavorite(seed.seedid || seed.seed_id);
-                  }}
-                >取消收藏</Button>
-              </li>
-            ))}
-          </ul>
-          )}
-        </div>
-      </div>
+      </div>      
       {/* 申诉弹窗 */}
-      <Dialog open={appealOpen} onClose={() => setAppealOpen(false)}>
-        <DialogTitle>提交申诉</DialogTitle>
-        <DialogContent>
-          <div style={{ marginBottom: 16 }}>
+      <Dialog open={appealOpen} onClose={() => setAppealOpen(false)} maxWidth="sm" fullWidth>
+        <DialogTitle style={{ background: '#f8faff', color: '#1a237e', fontWeight: 600 }}>
+          提交申诉
+        </DialogTitle>
+        <DialogContent style={{ padding: '24px', background: '#ffffff' }}>
+          <div style={{ marginBottom: 20 }}>
             <TextField
               label="申诉主题"
               fullWidth
               value={appealTitle}
               onChange={e => setAppealTitle(e.target.value)}
-              size="small"
-            />
-          </div>          <div>
-            <input
-              type="file"
-              accept=".pdf"
-              onChange={e => {
-                const file = e.target.files[0];
-                if (file && file.type !== 'application/pdf') {
-                  alert('请选择PDF文件');
-                  e.target.value = '';
-                  setAppealFile(null);
-                } else {
-                  setAppealFile(file);
-                }
-              }}
-              style={{ marginTop: 8 }}
-            />
-            <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
-              请选择PDF文件（最大100MB）
-            </div>
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleAppealSubmit} variant="contained" color="primary" disabled={!appealTitle || !appealFile}>提交</Button>
-          <Button onClick={() => setAppealOpen(false)} variant="outlined">取消</Button>
-        </DialogActions>
-      </Dialog>
-      {/* 账号迁移弹窗 */}
-      <Dialog open={migrationOpen} onClose={() => setMigrationOpen(false)}>
-        <DialogTitle>账号迁移</DialogTitle>
-        <DialogContent>
-          <div style={{ marginBottom: 16 }}>
-            <TextField
-              label="待发放上传量"
-              type="number"
-              fullWidth
-              value={migrationUpload}
-              onChange={e => setMigrationUpload(e.target.value)}
-              size="small"
-              inputProps={{ min: 1 }}
-              style={{ marginBottom: 18 }}
+              variant="outlined"
+              style={{ marginBottom: 16 }}
             />
           </div>
           <div>
@@ -838,21 +756,135 @@
                   setAppealFile(file);
                 }
               }}
-              style={{ marginTop: 8 }}
+              style={{ 
+                marginTop: 8,
+                padding: '12px',
+                border: '2px dashed #e0e7ff',
+                borderRadius: '8px',
+                width: '100%',
+                background: '#f8faff'
+              }}
             />
-            <div style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
+            <div style={{ 
+              fontSize: 12, 
+              color: '#666', 
+              marginTop: 8,
+              padding: '8px 12px',
+              background: '#f0f4ff',
+              borderRadius: '6px'
+            }}>
+              请选择PDF文件（最大100MB）
+            </div>
+          </div>
+        </DialogContent>
+        <DialogActions style={{ padding: '16px 24px', background: '#f8faff' }}>
+          <Button 
+            onClick={handleAppealSubmit} 
+            variant="contained" 
+            disabled={!appealTitle || !appealFile}
+            style={{
+              background: (!appealTitle || !appealFile) ? '#ccc' : 'linear-gradient(135deg, #1a237e 0%, #3f51b5 100%)',
+              color: 'white',
+              fontWeight: 600
+            }}
+          >
+            提交申诉
+          </Button>
+          <Button 
+            onClick={() => setAppealOpen(false)} 
+            variant="outlined"
+            style={{ color: '#1a237e', borderColor: '#1a237e' }}
+          >
+            取消
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* 账号迁移弹窗 */}
+      <Dialog open={migrationOpen} onClose={() => setMigrationOpen(false)} maxWidth="sm" fullWidth>
+        <DialogTitle style={{ background: '#f8faff', color: '#1a237e', fontWeight: 600 }}>
+          账号迁移
+        </DialogTitle>
+        <DialogContent style={{ padding: '24px', background: '#ffffff' }}>
+          <div style={{ marginBottom: 20 }}>
+            <TextField
+              label="待发放上传量"
+              type="number"
+              fullWidth
+              value={migrationUpload}
+              onChange={e => setMigrationUpload(e.target.value)}
+              variant="outlined"
+              inputProps={{ min: 1 }}
+              style={{ marginBottom: 16 }}
+            />
+          </div>
+          <div>
+            <input
+              type="file"
+              accept=".pdf"
+              onChange={e => {
+                const file = e.target.files[0];
+                if (file && file.type !== 'application/pdf') {
+                  alert('请选择PDF文件');
+                  e.target.value = '';
+                  setAppealFile(null);
+                } else {
+                  setAppealFile(file);
+                }
+              }}
+              style={{ 
+                marginTop: 8,
+                padding: '12px',
+                border: '2px dashed #e0e7ff',
+                borderRadius: '8px',
+                width: '100%',
+                background: '#f8faff'
+              }}
+            />
+            <div style={{ 
+              fontSize: 12, 
+              color: '#666', 
+              marginTop: 8,
+              padding: '8px 12px',
+              background: '#f0f4ff',
+              borderRadius: '6px'
+            }}>
               请选择PDF文件（最大10MB）
             </div>
           </div>
           {migrationStatus && (
-            <div style={{ color: migrationStatus.includes('成功') ? '#43a047' : '#e53935', fontSize: 14, marginTop: 8 }}>
+            <div style={{ 
+              color: migrationStatus.includes('成功') ? '#43a047' : '#e53935', 
+              fontSize: 14, 
+              marginTop: 16,
+              padding: '12px',
+              borderRadius: '8px',
+              background: migrationStatus.includes('成功') ? 'rgba(67, 160, 71, 0.1)' : 'rgba(229, 57, 53, 0.1)',
+              border: `1px solid ${migrationStatus.includes('成功') ? 'rgba(67, 160, 71, 0.3)' : 'rgba(229, 57, 53, 0.3)'}`
+            }}>
               {migrationStatus}
             </div>
           )}
         </DialogContent>
-        <DialogActions>
-          <Button onClick={handleMigrationSubmit} variant="contained" color="primary">提交迁移</Button>
-          <Button onClick={() => setMigrationOpen(false)} variant="outlined">取消</Button>
+        <DialogActions style={{ padding: '16px 24px', background: '#f8faff' }}>
+          <Button 
+            onClick={handleMigrationSubmit} 
+            variant="contained"
+            style={{
+              background: 'linear-gradient(135deg, #ff9800 0%, #ffa726 100%)',
+              color: 'white',
+              fontWeight: 600
+            }}
+          >
+            提交迁移
+          </Button>
+          <Button 
+            onClick={() => setMigrationOpen(false)} 
+            variant="outlined"
+            style={{ color: '#1a237e', borderColor: '#1a237e' }}
+          >
+            取消
+          </Button>
         </DialogActions>
       </Dialog>
     </div>
diff --git a/front/src/UserProfileNew.js b/front/src/UserProfileNew.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/front/src/UserProfileNew.js