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>
   );
 };