diff --git a/front/src/AnimePage.js b/front/src/AnimePage.js
index 03ad8b2..47ae5e2 100644
--- a/front/src/AnimePage.js
+++ b/front/src/AnimePage.js
@@ -1,38 +1,40 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+  { 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 areaTabs = [
-  { label: "国创", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "日漫", icon: <EmailIcon fontSize="small" /> },
-  { label: "欧美动漫", icon: <PersonIcon fontSize="small" /> },
-  { label: "韩漫", icon: <EmojiPeopleIcon fontSize="small" /> },
+  { label: "国创动漫", value: "chinese" },
+  { label: "日系动漫", value: "japanese" },
+  { label: "欧美动漫", value: "western" },
+  { label: "韩系动漫", value: "korean" },
+  { label: "其他动漫", value: "others" }
 ];
 
 export default function AnimePage() {
@@ -60,18 +62,8 @@
       })
       .catch(err => console.error('Fetching user profile failed', err));
   }, []);
-
-  // 每个tab对应的动漫类型
-  const animeTypesList = [
-    ["华语动漫（大陆）", "欧美动漫", "日韩动漫", "港台动漫", "其他"], // 国创
-    ["日漫热血", "日漫搞笑", "日漫其他"], // 日漫
-    ["欧美冒险", "欧美科幻", "欧美其他"], // 欧美动漫
-    ["韩漫爱情", "韩漫奇幻", "韩漫其他"], // 韩漫
-    ["其他类型1", "其他类型2"] // 其他
-  ];
-  const animeTypes = animeTypesList[activeTab] || [];
-
   useEffect(() => {
+    // 根据选中的标签获取动漫列表
     const area = areaTabs[activeTab].label;
     fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
       .then(res => res.json())
@@ -85,128 +77,221 @@
     fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
       .then(res => res.json())
       .then(data => {
+        console.log('搜索返回数据:', data);
         setAnimeList(data);
       })
       .catch(() => setAnimeList([]));
   };
 
+  const animeTypesList = [
+    ["华语动漫", "国产3D", "国产2D", "华语其他"], // 国创动漫
+    ["日漫热血", "日漫治愈", "日漫搞笑", "日漫其他"], // 日系动漫
+    ["欧美冒险", "欧美科幻", "欧美喜剧", "欧美其他"], // 欧美动漫
+    ["韩漫爱情", "韩漫奇幻", "韩漫其他"], // 韩系动漫
+    ["独立动画", "短篇动画", "其他类型"] // 其他动漫
+  ];
+  const animeTypes = animeTypesList[activeTab] || [];
   return (
-    <div className="container">
-      {/* 顶部空白与动漫界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
+    <div className="emerald-home-container">
+      {/* 流星雨背景效果 */}
+      <div className="meteor-shower">
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
       </div>
-      {/* 下方内容整体下移，留出与动漫界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "动漫" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="anime-table">
-          <thead>
-            <tr>
-              <th>动漫类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {animeList.length > 0 ? (
-              animeList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <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' }} />
             ) : (
-              animeTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </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>
+
+        {/* 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="emerald-content-section">
+          <h1 className="emerald-page-title">🎌 动漫资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux动漫频道，这里有最新最热门的动漫资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索动漫资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>
+
+          {/* 地区分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 动漫列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>动漫类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {animeList.length > 0 ? (
+                  animeList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  animeTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
   const [page, setPage] = React.useState(3);
   const total = 5;
diff --git a/front/src/ForumPage.js b/front/src/ForumPage.js
index 7939da1..bf75671 100644
--- a/front/src/ForumPage.js
+++ b/front/src/ForumPage.js
@@ -1,43 +1,69 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 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 SearchIcon from "@mui/icons-material/Search";
+import PostAddIcon from "@mui/icons-material/PostAdd";
+import "./SharedStyles.css";
 
-// 示例数据
-const posts = [
-    {
-        post_id: "1",
-        title: "欢迎来到G10论坛",
-        content: "这里是G10 PT站的官方论坛,欢迎大家发帖交流!",
-        author_id: "u1",
-        author_name: "Alice",
-        created_at: "2024-06-01 12:00",
-        reply_count: 3,
-        view_count: 120,
-    },
-    {
-        post_id: "2",
-        title: "经典电影合集",
-        content: "90年代经典电影大家有什么推荐吗?",
-        author_id: "u2",
-        author_name: "Bob",
-        created_at: "2024-06-02 09:30",
-        reply_count: 1,
-        view_count: 45,
-    },
+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 forumTexts = [
+  "讨论", "交流", "分享", "观点", "话题", "回复", "发帖", "社区",
+  "对话", "互动", "评论", "建议", "意见", "经验", "心得", "推荐",
+  "新手", "老鸟", "攻略", "指南", "教程", "资源", "福利", "活动"
 ];
 
 export default function ForumPage() {
     const navigate = useNavigate();
     const [posts, setPosts] = useState([]);
     const [searchQuery, setSearchQuery] = useState('');
+    const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
+    const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
 
     useEffect(() => {
-        // get userId from cookie
+        // 获取用户信息
         const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
         const userId = match ? match[2] : null;
-        console.log("User ID from cookie:", userId);
-        // if (!userId) return;
-        console.log("Fetching forum posts...");
+        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));
+        }
+
+        // 获取论坛帖子
         fetch(`${API_BASE_URL}/api/forum`)
             .then(res => {
                 // console.log("fetch raw response:", res);
@@ -81,68 +107,157 @@
     };
 
     return (
-        <div style={{ maxWidth: 700, margin: "40px auto" }}>
-            <div style={{ display: "flex", alignItems: "center", marginBottom: 24 }}>
-                <h2 style={{ color: "#1a237e", margin: 0, marginRight: 24 }}>G10 论坛</h2>
-                <input
-                    type="text"
-                    placeholder="搜索帖子内容"
-                    value={searchQuery}
-                    onChange={e => setSearchQuery(e.target.value)}
-                    style={{
-                        flex: 1,
-                        fontSize: 16,
-                        padding: "8px 14px",
-                        border: "1px solid #bfcfff",
-                        borderRadius: 8,
-                        outline: "none",
-                        minWidth: 0,
-                    }}
-                />
-                <button
-                    style={{
-                        marginLeft: 8,
-                        fontSize: 16,
-                        padding: "8px 18px",
-                        border: "1px solid #bfcfff",
-                        background: "#e0e7ff",
-                        borderRadius: 8,
-                        cursor: "pointer",
-                    }}
-                    onClick={handleSearch}
-                >
-                    🔍
-                </button>
+        <div className="emerald-home-container">
+            {/* 文字雨背景效果 */}
+            <div className="forum-text-rain">
+                {forumTexts.map((text, index) => (
+                    <div key={index} className="text-drop" style={{
+                        left: `${(index * 3.5) % 100}%`,
+                        animationDelay: `${(index * 0.8) % 10}s`,
+                        animationDuration: `${8 + (index % 5)}s`
+                    }}>
+                        {text}
+                    </div>
+                ))}
             </div>
-            {posts.map(post => (
-                <div
-                    key={post.post_id}
-                    style={{
-                        background: "#fff",
-                        borderRadius: 12,
-                        boxShadow: "0 2px 8px #e0e7ff",
-                        padding: 24,
-                        marginBottom: 24,
-                        cursor: "pointer",
-                        transition: "box-shadow 0.2s",
-                    }}
-                    onClick={() => navigate(`/forum/${post.post_id}`)}
-                >
-                    <div style={{ fontSize: 15, color: "#1976d2", marginBottom: 6 }}>
-                        {post.author_name} · {post.created_at}
+
+            {/* 浮动园林装饰元素 */}
+            <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 style={{ fontWeight: 600, fontSize: 20, marginBottom: 8, color: "#222" }}>
-                        {post.title}
+                    <div className="emerald-brand-section">
+                        <div className="emerald-brand-icon">⚡</div>
+                        <div className="emerald-user-label">NeuraFlux</div>
                     </div>
-                    <div style={{ fontSize: 16, color: "#444", marginBottom: 18 }}>
-                        {post.content}
-                    </div>
-                    <div style={{ display: "flex", justifyContent: "flex-start", gap: 32, fontSize: 14, color: "#888" }}>
-                        <span>回复数: {post.reply_count}</span>
-                        <span>观看数: {post.view_count}</span>
+                    <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>
-            ))}
+
+                {/* 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="emerald-content-section">
+                    <h1 className="emerald-page-title">💬 NeuraFlux论坛</h1>
+                    <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+                        欢迎来到NeuraFlux社区论坛，这里是知识与思想的碰撞之地
+                    </p>
+                    
+                    {/* 论坛工具栏 */}
+                    <div className="forum-toolbar">
+                        <div className="search-section">
+                            <div className="search-input-container">
+                                <SearchIcon className="search-icon" />
+                                <input
+                                    type="text"
+                                    placeholder="搜索论坛话题..."
+                                    value={searchQuery}
+                                    onChange={(e) => setSearchQuery(e.target.value)}
+                                    className="forum-search-input"
+                                />
+                            </div>
+                            <button onClick={handleSearch} className="forum-search-btn">
+                                搜索
+                            </button>
+                        </div>
+                        <button className="new-post-btn" onClick={() => navigate('/publish')}>
+                            <PostAddIcon style={{ marginRight: '8px' }} />
+                            发布新话题
+                        </button>
+                    </div>
+
+                    {/* 帖子列表 */}
+                    <div className="forum-posts-container">
+                        {posts.length > 0 ? (
+                            posts.map((post) => (
+                                <div
+                                    key={post.post_id}
+                                    className="forum-post-card"
+                                    onClick={() => navigate(`/forum/${post.post_id}`)}
+                                >
+                                    <div className="post-header">
+                                        <div className="post-author-info">
+                                            <div className="author-avatar">
+                                                <AccountCircleIcon style={{ fontSize: 28, color: '#2d5016' }} />
+                                            </div>
+                                            <div className="author-details">
+                                                <span className="author-name">{post.author_name}</span>
+                                                <span className="post-time">{post.created_at}</span>
+                                            </div>
+                                        </div>
+                                        <div className="post-stats">
+                                            <span className="stat-item">👁 {post.view_count}</span>
+                                            <span className="stat-item">💬 {post.reply_count}</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <div className="post-content">
+                                        <h3 className="post-title">{post.title}</h3>
+                                        <p className="post-preview">{post.content}</p>
+                                    </div>
+                                    
+                                    <div className="post-footer">
+                                        <div className="post-tags">
+                                            <span className="post-tag">讨论</span>
+                                        </div>
+                                        <div className="post-actions">
+                                            <span className="action-btn">查看详情 →</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            <div className="empty-state">
+                                <ForumIcon style={{ fontSize: 64, color: '#90ee90', marginBottom: '16px' }} />
+                                <h3 style={{ color: '#2d5016', marginBottom: '8px' }}>暂无帖子</h3>
+                                <p style={{ color: '#666', marginBottom: '20px' }}>快来发布第一个话题吧！</p>
+                                <button className="new-post-btn" onClick={() => navigate('/publish')}>
+                                    <PostAddIcon style={{ marginRight: '8px' }} />
+                                    发布话题
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }
\ No newline at end of file
diff --git a/front/src/GamePage.js b/front/src/GamePage.js
index cae28cd..4a12636 100644
--- a/front/src/GamePage.js
+++ b/front/src/GamePage.js
@@ -1,51 +1,41 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+  { 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 areaTabs = [
-  { label: "PC", icon: <MovieIcon fontSize="small" /> },
-  { label: "主机", icon: <EmailIcon fontSize="small" /> },
-  { label: "移动", icon: <PersonIcon fontSize="small" /> },
-  { label: "掌机", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "视频", icon: <PersonIcon fontSize="small" /> },
+  { label: "PC游戏", value: "pc" },
+  { label: "主机游戏", value: "console" },
+  { label: "移动游戏", value: "mobile" },
+  { label: "掌机游戏", value: "handheld" },
+  { label: "游戏视频", value: "video" }
 ];
-
-// 每个tab对应的游戏类型
-const gameTypesList = [
-  ["PC单机", "PC网络", "PC独立", "PC其他"], // PC
-  ["主机动作", "主机RPG", "主机其他"], // 主机
-  ["移动休闲", "移动竞技", "移动其他"], // 移动
-  ["掌机冒险", "掌机其他"], // 掌机
-  ["游戏视频", "赛事视频", "其他视频"], // 视频
-  ["其他类型1", "其他类型2"] // 其他
-];
-
 export default function GamePage() {
   const navigate = useNavigate();
   const [searchText, setSearchText] = useState('');
@@ -72,9 +62,8 @@
       .catch(err => console.error('Fetching user profile failed', err));
   }, []);
 
-  const gameTypes = gameTypesList[activeTab] || [];
-
   useEffect(() => {
+    // 根据选中的标签获取游戏列表
     const area = areaTabs[activeTab].label;
     fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
       .then(res => res.json())
@@ -88,128 +77,221 @@
     fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
       .then(res => res.json())
       .then(data => {
+        console.log('搜索返回数据:', data);
         setGameList(data);
       })
       .catch(() => setGameList([]));
   };
 
+  const gameTypesList = [
+    ["PC单机", "PC网络", "PC独立", "PC其他"], // PC游戏
+    ["主机动作", "主机RPG", "主机竞速", "主机其他"], // 主机游戏
+    ["移动休闲", "移动竞技", "移动策略", "移动其他"], // 移动游戏
+    ["掌机冒险", "掌机RPG", "掌机其他"], // 掌机游戏
+    ["游戏实况", "赛事视频", "攻略教学", "其他视频"] // 游戏视频
+  ];
+  const gameTypes = gameTypesList[activeTab] || [];
   return (
-    <div className="container">
-      {/* 顶部空白与游戏界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
+    <div className="emerald-home-container">
+      {/* 流星雨背景效果 */}
+      <div className="meteor-shower">
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
       </div>
-      {/* 下方内容整体下移，留出与游戏界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "游戏" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="game-table">
-          <thead>
-            <tr>
-              <th>游戏类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {gameList.length > 0 ? (
-              gameList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <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' }} />
             ) : (
-              gameTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </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>
+
+        {/* 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="emerald-content-section">
+          <h1 className="emerald-page-title">🎮 游戏资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux游戏频道，这里有最新最热门的游戏资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索游戏资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>
+
+          {/* 平台分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 游戏列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>游戏类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {gameList.length > 0 ? (
+                  gameList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  gameTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
   const [page, setPage] = React.useState(3);
   const total = 5;
diff --git a/front/src/HomePage.css b/front/src/HomePage.css
new file mode 100644
index 0000000..4423000
--- /dev/null
+++ b/front/src/HomePage.css
@@ -0,0 +1,133 @@
+/* HomePage 特定样式 */
+@import './SharedStyles.css';
+
+/* 表格区域样式 */
+.emerald-table-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 30px;
+  margin: 30px auto;
+  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;
+}
+
+.emerald-table-section::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;
+}
+
+/* 表格样式 */
+.emerald-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'Lora', serif;
+  background: transparent;
+}
+
+.emerald-table thead {
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
+}
+
+.emerald-table th {
+  padding: 16px 20px;
+  text-align: left;
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: 1px;
+  border-bottom: 3px solid #90ee90;
+  position: relative;
+}
+
+.emerald-table th:first-child {
+  border-radius: 15px 0 0 0;
+}
+
+.emerald-table th:last-child {
+  border-radius: 0 15px 0 0;
+}
+
+.emerald-table tbody tr {
+  transition: all 0.3s ease;
+  border-bottom: 1px solid rgba(144, 238, 144, 0.2);
+}
+
+.emerald-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);
+}
+
+.emerald-table td {
+  padding: 14px 20px;
+  color: #2d5016;
+  font-size: 15px;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+}
+
+.emerald-table tbody tr:hover td {
+  color: #1a5c1a;
+}
+
+/* 表格链接样式 */
+.emerald-table a {
+  color: #2d5016;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 4px 8px;
+  border-radius: 8px;
+  display: inline-block;
+}
+
+.emerald-table a:hover {
+  color: #1a5c1a;
+  background: rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(144, 238, 144, 0.3);
+}
+
+/* 响应式表格设计 */
+@media (max-width: 768px) {
+  .emerald-table-section {
+    margin: 20px 10px;
+    padding: 20px 15px;
+  }
+  
+  .emerald-table {
+    font-size: 14px;
+  }
+  
+  .emerald-table th,
+  .emerald-table td {
+    padding: 12px 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .emerald-table th,
+  .emerald-table td {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+}
diff --git a/front/src/HomePage.js b/front/src/HomePage.js
index a657a72..026f122 100644
--- a/front/src/HomePage.js
+++ b/front/src/HomePage.js
@@ -1,9 +1,9 @@
 import React from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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";
@@ -11,21 +11,21 @@
 import ForumIcon from "@mui/icons-material/Forum";
 import HelpIcon from "@mui/icons-material/Help";
 import { useNavigate } from "react-router-dom";
-import "./App.css";
+import "./HomePage.css";
 
 // 导航栏
 const navItems = [
-    { label: "首页", icon: <HomeIcon />, path: "/home" },
-    { label: "电影", icon: <MovieIcon />, path: "/movie" },
-    { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-    { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-    { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-    { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-    { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-    { label: "资料", icon: <PersonIcon />, path: "/info" },
-    { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-    { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-    { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+    { 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" },
 ];
 
 // 示例种子数据
@@ -64,63 +64,98 @@
     const navigate = useNavigate();
 
     return (
-        <div className="container">
-            {/* 顶部空白与电影界面一致 */}
-            <div style={{ height: 80 }} />
-            {/* 用户栏 */}
-            <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-                <div style={{ cursor: 'pointer', marginRight: 16 }} onClick={() => navigate('/user')}>
-                    <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-                </div>
-                <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>用户栏</div>
-                <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-                    <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>12345</b></span>
-                    <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>2.56</b></span>
-                    <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>100GB</b></span>
-                    <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>50GB</b></span>
-                </div>
+        <div className="emerald-home-container">
+            {/* 流星雨背景效果 */}
+            <div className="meteor-shower">
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
             </div>
-            {/* 下方内容整体下移，留出与电影界面一致的间距 */}
-            <div style={{ height: 32 }} />
-            <nav className="nav-bar card">
-                {navItems.map((item) => (
-                    <div
-                        key={item.label}
-                        className={item.label === "首页" ? "nav-item active" : "nav-item"}
-                        onClick={() => navigate(item.path)}
-                    >
-                        {item.icon}
-                        <span>{item.label}</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')}>
+                        <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
                     </div>
-                ))}
-            </nav>
-            <div className="table-section card">
-                <table className="movie-table">
-                    <thead>
-                        <tr>
-                            <th>标签</th>
-                            <th>标题</th>
-                            <th>热度</th>
-                            <th>发布者</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {exampleSeeds.map((seed) => (
-                            <tr key={seed.id}>
-                                <td>{seed.tags}</td>
-                                <td>
-                                    <a href={`/torrent/${seed.id}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                                        {seed.title}
-                                    </a>
-                                </td>
-                                <td>{seed.popularity}</td>
-                                <td>{seed.user.username}</td>
+                    <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">12,345</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            分享率: <span className="emerald-stat-value">2.56</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            上传: <span className="emerald-stat-value">100GB</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            下载: <span className="emerald-stat-value">50GB</span>
+                        </span>
+                    </div>
+                </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>
+
+                {/* NeuraFlux种子列表 */}
+                <div className="emerald-table-section">
+                    <table className="emerald-table">
+                        <thead>
+                            <tr>
+                                <th>分类标签</th>
+                                <th>资源标题</th>
+                                <th>热门指数</th>
+                                <th>发布者</th>
                             </tr>
-                        ))}
-                    </tbody>
-                </table>
+                        </thead>
+                        <tbody>
+                            {exampleSeeds.map((seed) => (
+                                <tr key={seed.id}>
+                                    <td>{seed.tags}</td>
+                                    <td>
+                                        <a href={`/torrent/${seed.id}`}>
+                                            {seed.title}
+                                        </a>
+                                    </td>
+                                    <td>{seed.popularity}</td>
+                                    <td>{seed.user.username}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
             </div>
-            <div style={{ height: 32 }} />
         </div>
     );
 }
\ No newline at end of file
diff --git a/front/src/InfoPage.js b/front/src/InfoPage.js
index cec0b4d..1164816 100644
--- a/front/src/InfoPage.js
+++ b/front/src/InfoPage.js
@@ -1,39 +1,40 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+  { 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 areaTabs = [
-  { label: "出版物", icon: <MovieIcon fontSize="small" /> },
-  { label: "学习教程", icon: <EmailIcon fontSize="small" /> },
-  { label: "素材模板", icon: <PersonIcon fontSize="small" /> },
-  { label: "演讲交流", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "日常娱乐", icon: <PersonIcon fontSize="small" /> },
+  { label: "出版物", value: "publication" },
+  { label: "学习教程", value: "tutorial" },
+  { label: "素材模板", value: "template" },
+  { label: "演讲交流", value: "speech" },
+  { label: "日常娱乐", value: "entertainment" }
 ];
 
 export default function InfoPage() {
@@ -93,126 +94,209 @@
       })
       .catch(() => setInfoList([]));
   };
-
   return (
-    <div className="container">
-      {/* 顶部空白与资料界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
+    <div className="emerald-home-container">
+      {/* 流星雨背景效果 */}
+      <div className="meteor-shower">
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
       </div>
-      {/* 下方内容整体下移，留出与资料界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "资料" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="info-table">
-          <thead>
-            <tr>
-              <th>资料类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {infoList.length > 0 ? (
-              infoList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <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' }} />
             ) : (
-              infoTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </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>
+
+        {/* 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="emerald-content-section">
+          <h1 className="emerald-page-title">📚 资料资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux资料频道，这里有最新最热门的学习和资料资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索资料资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>
+
+          {/* 地区分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 资料列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>资料类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {infoList.length > 0 ? (
+                  infoList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  infoTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
-  const [page, setPage] = React.useState(3);
+  const [page, setPage] = useState(3);
   const total = 5;
   return (
     <div className="pagination">
diff --git a/front/src/LoginPage.css b/front/src/LoginPage.css
new file mode 100644
index 0000000..ced4dae
--- /dev/null
+++ b/front/src/LoginPage.css
@@ -0,0 +1,467 @@
+/* 翡翠庄园 - 欧式园林风格登录页面样式 */
+
+/* 引入Google字体 */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;500;600&display=swap');
+
+/* 页面基础样式 */
+.garden-login-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 20%, #8fbc8f 40%, #98fb98 60%, #f0fff0 100%);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  font-family: 'Lora', serif;
+}
+
+/* 背景装饰元素 */
+.garden-login-page::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(144, 238, 144, 0.1) 0%, transparent 50%);
+  animation: backgroundShift 20s ease-in-out infinite;
+}
+
+/* 浮动花瓣动画 */
+.floating-petals {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.petal {
+  position: absolute;
+  font-size: 20px;
+  animation: fall linear infinite;
+  opacity: 0.7;
+}
+
+.petal:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; }
+.petal:nth-child(2) { left: 20%; animation-duration: 12s; animation-delay: 2s; }
+.petal:nth-child(3) { left: 30%; animation-duration: 10s; animation-delay: 4s; }
+.petal:nth-child(4) { left: 40%; animation-duration: 14s; animation-delay: 1s; }
+.petal:nth-child(5) { left: 50%; animation-duration: 9s; animation-delay: 3s; }
+.petal:nth-child(6) { left: 60%; animation-duration: 11s; animation-delay: 5s; }
+.petal:nth-child(7) { left: 70%; animation-duration: 13s; animation-delay: 0.5s; }
+.petal:nth-child(8) { left: 80%; animation-duration: 15s; animation-delay: 2.5s; }
+
+/* 登录表单容器 */
+.garden-login-container {
+  width: 420px;
+  padding: 50px 40px 60px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  box-shadow: 
+    0 20px 60px rgba(0, 0, 0, 0.15),
+    0 8px 25px rgba(45, 80, 22, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  position: relative;
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  animation: containerFloat 6s ease-in-out infinite;
+}
+
+/* 装饰边框 */
+.garden-login-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;
+}
+
+/* 顶部装饰图标 */
+.garden-icon {
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 48px;
+  animation: iconPulse 3s ease-in-out infinite;
+}
+
+/* 标题样式 */
+.garden-title {
+  text-align: center;
+  margin-bottom: 40px;
+  color: #2d5016;
+  font-family: 'Playfair Display', serif;
+  font-weight: 700;
+  font-size: 36px;
+  letter-spacing: 3px;
+  text-shadow: 0 2px 4px rgba(45, 80, 22, 0.1);
+  position: relative;
+}
+
+.garden-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 3px;
+  background: linear-gradient(90deg, #90ee90, #2d5016, #90ee90);
+  border-radius: 2px;
+}
+
+/* 表单组样式 */
+.garden-form-group {
+  margin-bottom: 28px;
+  position: relative;
+}
+
+.garden-label {
+  display: block;
+  margin-bottom: 10px;
+  color: #2d5016;
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: 1px;
+  transition: color 0.3s ease;
+}
+
+.garden-input {
+  width: 100%;
+  padding: 16px 20px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 15px;
+  font-size: 16px;
+  font-family: 'Lora', serif;
+  background: rgba(240, 255, 240, 0.5);
+  transition: all 0.3s ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.garden-input:focus {
+  border-color: #90ee90;
+  background: rgba(240, 255, 240, 0.8);
+  box-shadow: 
+    0 0 0 4px rgba(144, 238, 144, 0.1),
+    0 8px 25px rgba(144, 238, 144, 0.15);
+  transform: translateY(-2px);
+}
+
+.garden-input::placeholder {
+  color: #8fbc8f;
+  font-style: italic;
+}
+
+/* 输入框图标 */
+.garden-input-icon {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #8fbc8f;
+  transition: all 0.3s ease;
+}
+
+.garden-form-group:focus-within .garden-input-icon {
+  color: #2d5016;
+  animation: iconBounce 0.5s ease;
+}
+
+/* 错误信息样式 */
+.garden-error {
+  color: #dc3545;
+  text-align: center;
+  margin-bottom: 20px;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 10px;
+  background: rgba(220, 53, 69, 0.1);
+  border-radius: 10px;
+  border-left: 4px solid #dc3545;
+  animation: errorShake 0.5s ease;
+}
+
+/* 按钮容器 */
+.garden-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 35px;
+  align-items: center;
+}
+
+/* 按钮基础样式 */
+.garden-button {
+  width: 160px;
+  padding: 14px 0;
+  border: none;
+  border-radius: 25px;
+  font-family: 'Lora', serif;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 1px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+
+.garden-button::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;
+}
+
+.garden-button:hover::before {
+  left: 100%;
+}
+
+/* 登录按钮 */
+.garden-login-btn {
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 50%, #90ee90 100%);
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.garden-login-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 
+    0 10px 30px rgba(45, 80, 22, 0.3),
+    0 4px 15px rgba(144, 238, 144, 0.2);
+}
+
+.garden-login-btn:active {
+  transform: translateY(-1px);
+}
+
+/* 注册按钮 */
+.garden-register-btn {
+  background: linear-gradient(135deg, #f0fff0 0%, #98fb98 50%, #90ee90 100%);
+  color: #2d5016;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+}
+
+.garden-register-btn:hover {
+  transform: translateY(-3px);
+  background: linear-gradient(135deg, #98fb98 0%, #90ee90 50%, #2d5016 100%);
+  color: white;
+  box-shadow: 
+    0 10px 30px rgba(144, 238, 144, 0.3),
+    0 4px 15px rgba(45, 80, 22, 0.2);
+}
+
+/* 装饰性元素 */
+.garden-decoration {
+  position: absolute;
+  font-size: 24px;
+  opacity: 0.3;
+  animation: decorationFloat 4s ease-in-out infinite;
+}
+
+.garden-decoration.top-left {
+  top: 20px;
+  left: 20px;
+  animation-delay: 0s;
+}
+
+.garden-decoration.top-right {
+  top: 20px;
+  right: 20px;
+  animation-delay: 1s;
+}
+
+.garden-decoration.bottom-left {
+  bottom: 20px;
+  left: 20px;
+  animation-delay: 2s;
+}
+
+.garden-decoration.bottom-right {
+  bottom: 20px;
+  right: 20px;
+  animation-delay: 3s;
+}
+
+/* 动画定义 */
+@keyframes backgroundShift {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+
+@keyframes fall {
+  0% {
+    transform: translateY(-100vh) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.7;
+  }
+  90% {
+    opacity: 0.7;
+  }
+  100% {
+    transform: translateY(100vh) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+@keyframes containerFloat {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes borderGlow {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes iconPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes iconBounce {
+  0%, 100% {
+    transform: translateY(-50%) scale(1);
+  }
+  50% {
+    transform: translateY(-50%) scale(1.2);
+  }
+}
+
+@keyframes errorShake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+@keyframes decorationFloat {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  33% {
+    transform: translateY(-10px) rotate(120deg);
+  }
+  66% {
+    transform: translateY(-5px) rotate(240deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .garden-login-container {
+    width: 90%;
+    max-width: 380px;
+    padding: 40px 30px 50px;
+  }
+  
+  .garden-title {
+    font-size: 28px;
+    letter-spacing: 2px;
+  }
+  
+  .petal {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .garden-login-container {
+    padding: 30px 20px 40px;
+  }
+  
+  .garden-title {
+    font-size: 24px;
+    letter-spacing: 1px;
+  }
+  
+  .garden-button {
+    width: 140px;
+    padding: 12px 0;
+    font-size: 14px;
+  }
+}
+
+/* 加载动画 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.garden-login-container {
+  animation: fadeInUp 0.8s ease-out;
+}
+
+/* 键盘导航优化 */
+.garden-button:focus,
+.garden-input:focus {
+  outline: 3px solid rgba(144, 238, 144, 0.5);
+  outline-offset: 2px;
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .garden-login-page {
+    background: linear-gradient(135deg, #1a2f0a 0%, #2d5016 20%, #4a7c59 40%, #5a8a5a 60%, #6b9b6b 100%);
+  }
+  
+  .garden-login-container {
+    background: rgba(30, 40, 20, 0.95);
+    color: #e0e7ff;
+  }
+  
+  .garden-title {
+    color: #90ee90;
+  }
+  
+  .garden-label {
+    color: #98fb98;
+  }
+  
+  .garden-input {
+    background: rgba(45, 80, 22, 0.3);
+    color: #f0fff0;
+    border-color: rgba(144, 238, 144, 0.4);
+  }
+}
diff --git a/front/src/LoginPage.js b/front/src/LoginPage.js
index 31718d1..b6bdcf3 100644
--- a/front/src/LoginPage.js
+++ b/front/src/LoginPage.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Input } from 'antd';
-import './App.css';
+import './LoginPage.css';
 import { API_BASE_URL } from './config';
 
 const LoginPage = () => {
@@ -75,56 +74,78 @@
       } catch { }
     }
   }, []);
-
   return (
-    <div className="login-page" style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #e0e7ff 0%, #f0f8ff 100%)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <div className="login-form-container" style={{ width: 360, padding: '40px 32px 80px 32px', borderRadius: 18, boxShadow: '0 8px 32px rgba(60, 80, 180, 0.10)', background: '#fff', position: 'relative' }}>
-        <h1 style={{ textAlign: 'center', marginBottom: 32, color: '#222', fontWeight: 700, fontSize: 32, letterSpacing: 2 }}>欢迎登录</h1>
-        <form className="login-form">
-          <div className="form-row" style={{ marginBottom: 24 }}>
-            <label htmlFor="username" style={{ display: 'block', marginBottom: 8, color: '#333', fontWeight: 500, fontSize: 16 }}>邮箱</label>
-            <Input
-              placeholder="请输入邮箱"
+    <div className="garden-login-page">
+      {/* 浮动花瓣装饰 */}
+      <div className="floating-petals">
+        <div className="petal">🌸</div>
+        <div className="petal">🌺</div>
+        <div className="petal">🌼</div>
+        <div className="petal">🌷</div>
+        <div className="petal">🌹</div>
+        <div className="petal">🌻</div>
+        <div className="petal">🌸</div>
+        <div className="petal">🌺</div>
+      </div>
+
+      <div className="garden-login-container">
+        {/* 装饰性元素 */}
+        <div className="garden-decoration top-left">🌿</div>
+        <div className="garden-decoration top-right">🦋</div>
+        <div className="garden-decoration bottom-left">🌱</div>
+        <div className="garden-decoration bottom-right">🌳</div>        {/* 顶部图标 */}
+        <div className="garden-icon">⚡</div>
+        
+        <h1 className="garden-title">NeuraFlux</h1>
+        
+        <form className="garden-form">
+          <div className="garden-form-group">
+            <label htmlFor="username" className="garden-label">邮箱地址</label>
+            <input
+              type="email"
+              className="garden-input"
+              placeholder="请输入您的邮箱地址"
               id="username"
               name="username"
               value={formData.username}
               onChange={handleChange}
               required
-              style={{ width: '100%', padding: '12px', borderRadius: 8, fontSize: 16, background: '#f7faff' }}
             />
+            <div className="garden-input-icon">📧</div>
           </div>
-          <div className="form-row" style={{ marginBottom: 24 }}>
-            <label htmlFor="password" style={{ display: 'block', marginBottom: 8, color: '#333', fontWeight: 500, fontSize: 16 }}>密码</label>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <Input
-                placeholder="请输入密码"
-                type="password"
-                id="password"
-                name="password"
-                value={formData.password}
-                onChange={handleChange}
-                required
-                style={{ flex: 1, padding: '12px', borderRadius: 8, fontSize: 16, background: '#f7faff' }}
-              />
+          
+          <div className="garden-form-group">
+            <label htmlFor="password" className="garden-label">密码</label>
+            <input
+              type="password"
+              className="garden-input"
+              placeholder="请输入您的密码"
+              id="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              required
+            />
+            <div className="garden-input-icon">🔒</div>
+          </div>
+          
+          {errorMessage && (
+            <div className="garden-error">
+              {errorMessage}
             </div>
-          </div>
-          {errorMessage && <p style={{ color: '#e53935', textAlign: 'center', marginBottom: 18, fontWeight: 500 }}>{errorMessage}</p>}
-          <div className="form-row button-row" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 32, position: 'static', gap: 16 }}>
-            <button
+          )}
+          
+          <div className="garden-button-group">            <button
               type="button"
-              className="login-button"
-              onClick={handleLogin}
-              style={{ width: 120, padding: '10px 0', borderRadius: 8, border: 'none', background: 'linear-gradient(90deg, #34c759 0%, #5be584 100%)', color: '#fff', fontWeight: 600, fontSize: 16, cursor: 'pointer', boxShadow: '0 2px 8px #b2eac2', marginBottom: 12 }}
-            >
-              登录
+              className="garden-button garden-login-btn"
+              onClick={handleLogin}            >
+              接入神经网络
             </button>
             <button
               type="button"
-              className="register-button"
-              onClick={handleRegister}
-              style={{ width: 120, padding: '10px 0', borderRadius: 8, border: 'none', background: 'linear-gradient(90deg, #4f8cff 0%, #6ad1ff 100%)', color: '#fff', fontWeight: 600, fontSize: 16, cursor: 'pointer', boxShadow: '0 2px 8px #b2d8ea' }}
-            >
-              注册
+              className="garden-button garden-register-btn"
+              onClick={handleRegister}            >
+              注册神经节点
             </button>
           </div>
         </form>
diff --git a/front/src/MoviePage.js b/front/src/MoviePage.js
index 79f2c8b..421e0dd 100644
--- a/front/src/MoviePage.js
+++ b/front/src/MoviePage.js
@@ -1,223 +1,173 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
 import { useNavigate } from "react-router-dom";
+import "./SharedStyles.css";
 import { API_BASE_URL } from "./config";
 
+// 导航栏
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+    { 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 areaTabs = [
-  { label: "大陆", icon: <MovieIcon fontSize="small" /> },
-  { label: "港台", icon: <EmailIcon fontSize="small" /> },
-  { label: "欧美", icon: <PersonIcon fontSize="small" /> },
-  { label: "日韩", icon: <EmojiPeopleIcon fontSize="small" /> },
+    { label: "华语电影", value: "chinese" },
+    { label: "港台电影", value: "hk_tw" },
+    { label: "欧美电影", value: "western" },
+    { label: "日韩电影", value: "jp_kr" },
+    { label: "其他电影", value: "others" }
 ];
 
 export default function MoviePage() {
-  const navigate = useNavigate();
-  const [searchText, setSearchText] = React.useState('');
-  const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
-  const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
-  const [activeTab, setActiveTab] = React.useState(0);
-  const [movieList, setMovieList] = React.useState([]);
+    const navigate = useNavigate();
+    const [searchText, setSearchText] = React.useState('');
+    const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
+    const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
+    const [activeTab, setActiveTab] = React.useState(0);
+    const [movieList, setMovieList] = React.useState([]);
 
-  useEffect(() => {
-    const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
-    const userId = match ? match[2] : null;
-    if (!userId) return;
-    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));
-  }, []);
+    useEffect(() => {
+        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+        const userId = match ? match[2] : null;
+        if (!userId) return;
+        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));
+    }, []);
 
-  // 每个tab对应的电影类型
-  const movieTypesList = [
-    ["华语电影（大陆）", "欧美电影", "日韩电影", "港台电影", "其他"], // 大陆
-    ["港台动作", "港台爱情", "港台喜剧", "港台其他"], // 港台
-    ["欧美动作", "欧美科幻", "欧美剧情", "欧美其他"], // 欧美
-    ["日韩动画", "日韩爱情", "日韩其他"], // 日韩
-    ["其他类型1", "其他类型2"] // 其他
-  ];
-  const movieTypes = movieTypesList[activeTab] || [];
+    // 每个tab对应的电影类型
+    const movieTypesList = [
+        ["华语电影（大陆）", "欧美电影", "日韩电影", "港台电影", "其他"], // 大陆
+        ["港台动作", "港台爱情", "港台喜剧", "港台其他"], // 港台
+        ["欧美动作", "欧美科幻", "欧美剧情", "欧美其他"], // 欧美
+        ["日韩动画", "日韩爱情", "日韩其他"], // 日韩
+        ["其他类型1", "其他类型2"] // 其他
+    ];
+    const movieTypes = movieTypesList[activeTab] || [];
 
-  React.useEffect(() => {
-    const area = areaTabs[activeTab].label;
-    fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
-      .then(res => res.json())
-      .then(data => {
-        setMovieList(data);
-      })
-      .catch(() => setMovieList([]));
-  }, [activeTab]);
+    React.useEffect(() => {
+        const area = areaTabs[activeTab].label;
+        fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
+            .then(res => res.json())
+            .then(data => {
+                setMovieList(data);
+            })
+            .catch(() => setMovieList([]));
+    }, [activeTab]);
 
-  // 搜索按钮处理
-  const handleSearch = () => {
-    const area = areaTabs[activeTab].label;
-    fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
-      .then(res => res.json())
-      .then(data => {
-        setMovieList(data);
-      })
-      .catch(() => setMovieList([]));
-  };
+    // 搜索按钮处理
+    const handleSearch = () => {
+        const area = areaTabs[activeTab].label;
+        fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
+            .then(res => res.json())
+            .then(data => {
+                setMovieList(data);
+            })
+            .catch(() => setMovieList([]));
+    };
 
-  return (
-    <div className="container">
-      {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
+    return (
+        <div className="emerald-home-container">
+            {/* 流星雨背景效果 */}
+            <div className="meteor-shower">
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+            </div>
+
+            {/* 浮动园林装饰元素 */}
+            <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')}>
+                        <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">12,345</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            分享率: <span className="emerald-stat-value">2.56</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            上传: <span className="emerald-stat-value">100GB</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            下载: <span className="emerald-stat-value">50GB</span>
+                        </span>
+                    </div>
+                </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="emerald-content-section">
+                    <h1 className="emerald-page-title">🎬 电影资源</h1>
+                    <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px' }}>
+                        欢迎来到NeuraFlux电影频道，这里有最新最热门的电影资源
+                    </p>
+                </div>
+            </div>
         </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
-      </div>
-      {/* 下方内容整体下移，留出与音乐界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "电影" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
-      </div>
-      <div className="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="movie-table">
-          <thead>
-            <tr>
-              <th>电影类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {movieList.length > 0 ? (
-              movieList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
-            ) : (
-              movieTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
-    </div>
-  );
-}
-
-function Pagination() {
-  const [page, setPage] = React.useState(3);
-  const total = 5;
-  return (
-    <div className="pagination">
-      <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>上一页</button>
-      <span className="page-num">{page}/{total}</span>
-      <button onClick={() => setPage(p => Math.min(total, p + 1))} disabled={page === total}>下一页</button>
-      <span className="page-info">第 <b>{page}</b> 页</span>
-    </div>
-  );
+    );
 }
diff --git a/front/src/MusicPage.js b/front/src/MusicPage.js
index 097cf3c..13a6ba5 100644
--- a/front/src/MusicPage.js
+++ b/front/src/MusicPage.js
@@ -1,48 +1,49 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+  { 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 areaTabs = [
-  { label: "古典音乐", icon: <MovieIcon fontSize="small" /> },
-  { label: "流行音乐", icon: <EmailIcon fontSize="small" /> },
-  { label: "摇滚", icon: <PersonIcon fontSize="small" /> },
-  { label: "电子音乐", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "说唱", icon: <PersonIcon fontSize="small" /> },
+  { label: "华语音乐", value: "chinese" },
+  { label: "港台音乐", value: "hk_tw" },
+  { label: "欧美音乐", value: "western" },
+  { label: "日韩音乐", value: "jp_kr" },
+  { label: "其他音乐", value: "others" }
 ];
 
 export default function MusicPage() {
   const navigate = useNavigate();
-  const [searchText, setSearchText] = useState('');
+  const [searchText, setSearchText] = React.useState('');
   const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
   const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
-  const [activeTab, setActiveTab] = useState(0);
-  const [musicList, setMusicList] = useState([]);
+  const [activeTab, setActiveTab] = React.useState(0);
+  const [musicList, setMusicList] = React.useState([]);
 
   useEffect(() => {
     const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
@@ -62,17 +63,8 @@
       .catch(err => console.error('Fetching user profile failed', err));
   }, []);
 
-  // 每个tab对应的音乐类型
-  const musicTypesList = [
-    ["华语音乐（大陆）", "欧美音乐", "日韩音乐", "港台音乐", "其他"], // 古典音乐
-    ["港台流行", "港台摇滚", "港台其他"], // 流行音乐
-    ["欧美流行", "欧美摇滚", "欧美其他"], // 摇滚
-    ["日韩流行", "日韩其他"], // 电子音乐
-    ["其他类型1", "其他类型2"] // 说唱
-  ];
-  const musicTypes = musicTypesList[activeTab] || [];
-
-  useEffect(() => {
+  React.useEffect(() => {
+    // 根据选中的标签获取音乐列表
     const area = areaTabs[activeTab].label;
     fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
       .then(res => res.json())
@@ -86,128 +78,221 @@
     fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
       .then(res => res.json())
       .then(data => {
+        console.log('搜索返回数据:', data);
         setMusicList(data);
       })
       .catch(() => setMusicList([]));
   };
 
+  const musicTypesList = [
+    ["华语流行", "华语摇滚", "华语民谣", "华语其他"], // 华语音乐
+    ["港台流行", "港台摇滚", "港台怀旧", "港台其他"], // 港台音乐
+    ["欧美流行", "欧美摇滚", "欧美电子", "欧美其他"], // 欧美音乐
+    ["日韩流行", "日韩摇滚", "日韩其他"], // 日韩音乐
+    ["古典音乐", "世界音乐", "其他类型"] // 其他音乐
+  ];
+  const musicTypes = musicTypesList[activeTab] || [];
   return (
-    <div className="container">
-      {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
+    <div className="emerald-home-container">
+      {/* 流星雨背景效果 */}
+      <div className="meteor-shower">
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
       </div>
-      {/* 下方内容整体下移，留出与音乐界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "音乐" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="music-table">
-          <thead>
-            <tr>
-              <th>音乐类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {musicList.length > 0 ? (
-              musicList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <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' }} />
             ) : (
-              musicTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </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>
+
+        {/* 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="emerald-content-section">
+          <h1 className="emerald-page-title">🎵 音乐资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux音乐频道，这里有最新最热门的音乐资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索音乐资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>
+
+          {/* 地区分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 音乐列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>音乐类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {musicList.length > 0 ? (
+                  musicList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  musicTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
   const [page, setPage] = React.useState(3);
   const total = 5;
diff --git a/front/src/PostDetailPage.js b/front/src/PostDetailPage.js
index fceaef8..aae1874 100644
--- a/front/src/PostDetailPage.js
+++ b/front/src/PostDetailPage.js
@@ -1,12 +1,70 @@
 import React, { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 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 ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ReplyIcon from "@mui/icons-material/Reply";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import "./SharedStyles.css";
+
+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 forumDetailTexts = [
+  "讨论", "回复", "交流", "观点", "见解", "思考", "分享", "互动",
+  "对话", "评论", "深度", "专业", "洞察", "分析", "探讨", "解答"
+];
 
 export default function PostDetailPage() {
     const { postId } = useParams();
+    const navigate = useNavigate();
     const [post, setPost] = useState(null);
     const [replies, setReplies] = useState([]);
     const [newReply, setNewReply] = useState('');
+    const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
+    const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
+
+    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));
+        }
+    }, []);
 
     // function to load post details and its replies
     const fetchDetail = () => {
@@ -64,82 +122,190 @@
             .catch(err => console.error(err));
     };
 
-    if (!post) return <div>加载中...</div>;
-    return (
-        <div style={{ maxWidth: 700, margin: "40px auto" }}>
-            {/* 原帖 */}
-            <div style={{
-                background: "#fff",
-                borderRadius: 12,
-                boxShadow: "0 2px 8px #e0e7ff",
-                padding: 24,
-                marginBottom: 32,
-            }}>
-                <div style={{ fontSize: 15, color: "#1976d2", marginBottom: 6 }}>
-                    {post.author_name} · {post.created_at}
-                </div>
-                <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8, color: "#222" }}>
-                    {post.title}
-                </div>
-                <div style={{ fontSize: 16, color: "#444", marginBottom: 18 }}>
-                    {post.content}
-                </div>
-                <div style={{ display: "flex", justifyContent: "flex-start", gap: 32, fontSize: 14, color: "#888" }}>
-                    <span>回复数: {post.reply_count}</span>
-                    <span>观看数: {post.view_count}</span>
+    if (!post) return (
+        <div className="emerald-home-container">
+            <div className="emerald-content">
+                <div style={{ 
+                    textAlign: 'center', 
+                    padding: '100px 20px', 
+                    color: '#2d5016', 
+                    fontSize: '18px',
+                    background: 'rgba(255, 255, 255, 0.95)',
+                    borderRadius: '25px',
+                    margin: '50px auto',
+                    maxWidth: '600px'
+                }}>
+                    <ForumIcon style={{ fontSize: 64, marginBottom: '20px', color: '#90ee90' }} />
+                    <div>加载帖子详情中...</div>
                 </div>
             </div>
-            {/* 评论区 */}
-            <div>
-                {replies.map(reply => (
-                    <div key={reply.reply_id} style={{
-                        display: "flex",
-                        alignItems: "center",
-                        background: "#f8faff",
-                        borderRadius: 8,
-                        padding: "12px 18px",
-                        marginBottom: 16,
-                        fontSize: 15,
+        </div>
+    );
+
+    return (
+        <div className="emerald-home-container">
+            {/* 文字雨背景效果 */}
+            <div className="forum-text-rain">
+                {forumDetailTexts.map((text, index) => (
+                    <div key={index} className="text-drop" style={{
+                        left: `${(index * 3.5) % 100}%`,
+                        animationDelay: `${(index * 0.8) % 10}s`,
+                        animationDuration: `${8 + (index % 5)}s`
                     }}>
-                        <span style={{ color: "#1976d2", fontWeight: 500, minWidth: 80 }}>{reply.author_name}</span>
-                        <span style={{ flex: 1, marginLeft: 18 }}>{reply.content}</span>
-                        <span style={{ color: "#888", fontSize: 13, marginLeft: 18 }}>{reply.created_at}</span>
+                        {text}
                     </div>
                 ))}
             </div>
-            {/* 回复框 */}
-            <div style={{
-                marginTop: 32,
-                background: "#fff",
-                borderRadius: 8,
-                boxShadow: "0 2px 8px #e0e7ff",
-                padding: 18,
-                display: "flex",
-                gap: 12,
-                alignItems: "center"
-            }}>
-                <input
-                    type="text"
-                    placeholder="写下你的回复..."
-                    value={newReply}
-                    onChange={e => setNewReply(e.target.value)}
-                    style={{
-                        flex: 1,
-                        border: "1px solid #bfcfff",
-                        borderRadius: 6,
-                        padding: "8px 12px",
-                        fontSize: 15,
-                    }}
-                />
-                <button onClick={handleReply} style={{
-                    background: "#1976d2",
-                    color: "#fff",
-                    border: "none",
-                    borderRadius: 6,
-                    padding: "8px 24px",
-                    fontSize: 15,
-                    cursor: "pointer"
-                }}>回复</button>
+
+            {/* 浮动园林装饰元素 */}
+            <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>
+
+                {/* 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="post-detail-header">
+                    <button className="back-to-forum-btn" onClick={() => navigate('/forum')}>
+                        <ArrowBackIcon style={{ marginRight: '8px', fontSize: '20px' }} />
+                        返回论坛
+                    </button>
+                </div>
+
+                {/* 帖子详情内容区域 */}
+                <div className="emerald-content-section">
+                    {/* 原帖内容 */}
+                    <div className="post-detail-main">
+                        <div className="post-detail-header-info">
+                            <div className="post-author-section">
+                                <div className="post-author-avatar">
+                                    <AccountCircleIcon style={{ fontSize: 48, color: '#2d5016' }} />
+                                </div>
+                                <div className="post-author-details">
+                                    <h2 className="post-author-name">{post.author_name}</h2>
+                                    <span className="post-publish-time">{post.created_at}</span>
+                                </div>
+                            </div>
+                            <div className="post-stats-section">
+                                <div className="stat-badge">
+                                    <VisibilityIcon style={{ fontSize: '18px', marginRight: '4px' }} />
+                                    <span>{post.view_count} 浏览</span>
+                                </div>
+                                <div className="stat-badge">
+                                    <ReplyIcon style={{ fontSize: '18px', marginRight: '4px' }} />
+                                    <span>{post.reply_count} 回复</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div className="post-content-section">
+                            <h1 className="post-detail-title">{post.title}</h1>
+                            <div className="post-detail-content">
+                                {post.content}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 回复列表 */}
+                    <div className="replies-section">
+                        <h3 className="replies-title">
+                            <ReplyIcon style={{ marginRight: '8px', color: '#2d5016' }} />
+                            全部回复 ({replies.length})
+                        </h3>
+                        
+                        {replies.length > 0 ? (
+                            <div className="replies-list">
+                                {replies.map((reply, index) => (
+                                    <div key={reply.reply_id} className="reply-card">
+                                        <div className="reply-index">#{index + 1}</div>
+                                        <div className="reply-content-wrapper">
+                                            <div className="reply-author-info">
+                                                <AccountCircleIcon style={{ fontSize: 24, color: '#2d5016', marginRight: '8px' }} />
+                                                <span className="reply-author-name">{reply.author_name}</span>
+                                                <span className="reply-time">{reply.created_at}</span>
+                                            </div>
+                                            <div className="reply-content">{reply.content}</div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="no-replies">
+                                <ForumIcon style={{ fontSize: 48, color: '#90ee90', marginBottom: '16px' }} />
+                                <p>还没有人回复，快来抢沙发吧！</p>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* 回复输入框 */}
+                    <div className="reply-input-section">
+                        <h3 className="reply-input-title">发表回复</h3>
+                        <div className="reply-input-wrapper">
+                            <textarea
+                                placeholder="写下你的想法和观点..."
+                                value={newReply}
+                                onChange={e => setNewReply(e.target.value)}
+                                className="reply-textarea"
+                                rows="4"
+                            />
+                            <div className="reply-actions">
+                                <div className="reply-tips">
+                                    💡 支持理性讨论，拒绝恶意灌水
+                                </div>
+                                <button onClick={handleReply} className="submit-reply-btn">
+                                    <ReplyIcon style={{ marginRight: '6px', fontSize: '18px' }} />
+                                    发布回复
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/front/src/SharedStyles.css b/front/src/SharedStyles.css
new file mode 100644
index 0000000..730a76e
--- /dev/null
+++ b/front/src/SharedStyles.css
@@ -0,0 +1,1419 @@
+/* NeuraFlux - 共享欧式园林风格样式 */
+
+/* 引入Google字体 */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;500;600&display=swap');
+
+/* 页面基础样式 */
+.emerald-home-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;
+}
+
+/* 背景装饰元素 */
+.emerald-home-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;
+}
+
+/* 流星雨效果 */
+.meteor-shower {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.meteor {
+  position: absolute;
+  font-size: 18px;
+  animation: meteorFall linear infinite;
+  opacity: 0.8;
+  filter: drop-shadow(0 0 6px rgba(144, 238, 144, 0.6));
+}
+
+.meteor:nth-child(1) { left: 5%; animation-duration: 12s; animation-delay: 0s; }
+.meteor:nth-child(2) { left: 15%; animation-duration: 8s; animation-delay: 3s; }
+.meteor:nth-child(3) { left: 25%; animation-duration: 15s; animation-delay: 1s; }
+.meteor:nth-child(4) { left: 35%; animation-duration: 10s; animation-delay: 5s; }
+.meteor:nth-child(5) { left: 45%; animation-duration: 13s; animation-delay: 2s; }
+.meteor:nth-child(6) { left: 55%; animation-duration: 9s; animation-delay: 6s; }
+.meteor:nth-child(7) { left: 65%; animation-duration: 14s; animation-delay: 0.5s; }
+.meteor:nth-child(8) { left: 75%; animation-duration: 11s; animation-delay: 4s; }
+.meteor:nth-child(9) { left: 85%; animation-duration: 16s; animation-delay: 1.5s; }
+.meteor:nth-child(10) { left: 95%; animation-duration: 7s; animation-delay: 3.5s; }
+
+/* 浮动装饰元素 */
+.floating-garden-elements {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.garden-element {
+  position: absolute;
+  font-size: 24px;
+  opacity: 0.4;
+  animation: gardenFloat 6s ease-in-out infinite;
+}
+
+.garden-element:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
+.garden-element:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
+.garden-element:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 4s; }
+.garden-element:nth-child(4) { bottom: 15%; right: 25%; animation-delay: 1s; }
+
+/* 内容容器 */
+.emerald-content {
+  position: relative;
+  z-index: 10;
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* 用户栏样式 */
+.emerald-user-bar {
+  position: fixed;
+  top: 18px;
+  right: 42px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(15px);
+  border-radius: 20px;
+  padding: 8px 24px;
+  box-shadow: 
+    0 8px 32px rgba(45, 80, 22, 0.15),
+    0 4px 16px rgba(144, 238, 144, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  min-width: 320px;
+  min-height: 48px;
+  width: 520px;
+  animation: userBarFloat 4s ease-in-out infinite;
+}
+
+.emerald-user-bar::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: 22px;
+  z-index: -1;
+  animation: borderGlow 3s ease-in-out infinite;
+}
+
+.emerald-user-avatar {
+  cursor: pointer;
+  margin-right: 16px;
+  transition: all 0.3s ease;
+  border-radius: 50%;
+  padding: 4px;
+  background: linear-gradient(135deg, #90ee90, #2d5016);
+}
+
+.emerald-user-avatar:hover {
+  transform: scale(1.1) rotate(5deg);
+  box-shadow: 0 4px 15px rgba(144, 238, 144, 0.4);
+}
+
+/* 品牌区域样式 */
+.emerald-brand-section {
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+}
+
+.emerald-brand-icon {
+  font-size: 24px;
+  margin-right: 8px;
+  animation: iconPulse 3s ease-in-out infinite;
+}
+
+.emerald-user-label {
+  color: #2d5016;
+  font-weight: 600;
+  font-family: 'Playfair Display', serif;
+  letter-spacing: 1px;
+}
+
+.emerald-user-stats {
+  display: flex;
+  gap: 24px;
+  flex: 1;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.emerald-stat-item {
+  color: #2d5016;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  padding: 4px 8px;
+  border-radius: 8px;
+}
+
+.emerald-stat-item:hover {
+  background: rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+}
+
+.emerald-stat-value {
+  font-weight: 700;
+  color: #1a5c1a;
+}
+
+/* 导航栏样式 */
+.emerald-nav-bar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 20px 30px;
+  margin: 120px auto 30px;
+  box-shadow: 
+    0 15px 45px rgba(45, 80, 22, 0.12),
+    0 6px 20px 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);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  gap: 10px;
+  justify-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.emerald-nav-bar::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;
+}
+
+/* 导航项目样式 */
+.emerald-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 20px;
+  border-radius: 18px;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(240, 255, 240, 0.3);
+  border: 2px solid transparent;
+  position: relative;
+  overflow: hidden;
+  min-width: 90px;
+  font-family: 'Lora', serif;
+}
+
+.emerald-nav-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(144, 238, 144, 0.3), transparent);
+  transition: left 0.6s ease;
+}
+
+.emerald-nav-item:hover::before {
+  left: 100%;
+}
+
+.emerald-nav-item:hover {
+  transform: translateY(-8px) scale(1.05);
+  background: rgba(144, 238, 144, 0.2);
+  border-color: rgba(144, 238, 144, 0.4);
+  box-shadow: 
+    0 12px 35px rgba(45, 80, 22, 0.2),
+    0 6px 20px rgba(144, 238, 144, 0.15);
+}
+
+.emerald-nav-item.active {
+  background: linear-gradient(135deg, #90ee90 0%, #2d5016 100%);
+  color: white;
+  border-color: #2d5016;
+  transform: translateY(-4px);
+  box-shadow: 
+    0 8px 25px rgba(45, 80, 22, 0.3),
+    0 4px 15px rgba(144, 238, 144, 0.2);
+}
+
+/* 导航图标动画 */
+.emerald-nav-icon {
+  font-size: 28px !important;
+  margin-bottom: 8px;
+  transition: all 0.4s ease;
+  position: relative;
+}
+
+.emerald-nav-item:hover .emerald-nav-icon {
+  animation: iconDance 0.6s ease-in-out;
+  transform: scale(1.2);
+}
+
+.emerald-nav-item.active .emerald-nav-icon {
+  color: white;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+/* 导航标签 */
+.emerald-nav-label {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: #2d5016;
+  transition: all 0.3s ease;
+}
+
+.emerald-nav-item:hover .emerald-nav-label {
+  color: #1a5c1a;
+  transform: scale(1.05);
+}
+
+.emerald-nav-item.active .emerald-nav-label {
+  color: white;
+  font-weight: 700;
+}
+
+/* 内容区域样式 */
+.emerald-content-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 30px;
+  margin: 30px auto;
+  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;
+}
+
+.emerald-content-section::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;
+}
+
+.emerald-page-title {
+  text-align: center;
+  color: #2d5016;
+  font-family: 'Playfair Display', serif;
+  font-weight: 700;
+  font-size: 32px;
+  margin-bottom: 30px;
+  letter-spacing: 2px;
+}
+
+/* 表格区域样式 */
+.emerald-table-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 25px;
+  padding: 30px;
+  margin: 30px auto;
+  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;
+}
+
+.emerald-table-section::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;
+}
+
+/* 表格样式 */
+.emerald-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'Lora', serif;
+  background: transparent;
+}
+
+.emerald-table thead {
+  background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
+}
+
+.emerald-table th {
+  padding: 16px 20px;
+  text-align: left;
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: 1px;
+  border-bottom: 3px solid #90ee90;
+  position: relative;
+}
+
+.emerald-table th:first-child {
+  border-radius: 15px 0 0 0;
+}
+
+.emerald-table th:last-child {
+  border-radius: 0 15px 0 0;
+}
+
+.emerald-table tbody tr {
+  transition: all 0.3s ease;
+  border-bottom: 1px solid rgba(144, 238, 144, 0.2);
+}
+
+.emerald-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);
+}
+
+.emerald-table td {
+  padding: 14px 20px;
+  color: #2d5016;
+  font-size: 15px;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+}
+
+.emerald-table tbody tr:hover td {
+  color: #1a5c1a;
+}
+
+/* 表格链接样式 */
+.emerald-table a {
+  color: #2d5016;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  padding: 4px 8px;
+  border-radius: 8px;
+  display: inline-block;
+}
+
+.emerald-table a:hover {
+  color: #1a5c1a;
+  background: rgba(144, 238, 144, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(144, 238, 144, 0.3);
+}
+
+/* 论坛页面专用样式 */
+
+/* 文字雨背景效果 */
+.forum-text-rain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.text-drop {
+  position: absolute;
+  top: -50px;
+  font-size: 14px;
+  color: rgba(45, 80, 22, 0.6);
+  font-family: 'Lora', serif;
+  font-weight: 500;
+  animation: textFall linear infinite;
+  filter: drop-shadow(0 0 4px rgba(144, 238, 144, 0.3));
+}
+
+@keyframes textFall {
+  0% {
+    top: -50px;
+    opacity: 0;
+    transform: translateX(0);
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    top: 100vh;
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* 论坛工具栏样式 */
+.forum-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding: 20px 30px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(15px);
+  border-radius: 20px;
+  box-shadow: 
+    0 8px 32px rgba(45, 80, 22, 0.12),
+    0 4px 16px rgba(144, 238, 144, 0.08);
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  gap: 20px;
+}
+
+.search-section {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex: 1;
+  max-width: 500px;
+}
+
+.search-input-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(45, 80, 22, 0.6);
+  font-size: 20px !important;
+}
+
+.forum-search-input {
+  width: 100%;
+  padding: 12px 20px 12px 50px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 25px 0 0 25px;
+  background: rgba(240, 255, 240, 0.5);
+  font-size: 16px;
+  font-family: 'Lora', serif;
+  outline: none;
+  transition: all 0.3s ease;
+  border-right: none;
+}
+
+.forum-search-input:focus {
+  border-color: rgba(144, 238, 144, 0.6);
+  background: rgba(240, 255, 240, 0.8);
+  box-shadow: 0 0 15px rgba(144, 238, 144, 0.2);
+}
+
+.forum-search-btn {
+  padding: 14px 20px;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-left: none;
+  border-radius: 0 25px 25px 0;
+  background: linear-gradient(135deg, #2d5016 0%, #90ee90 100%);
+  color: white;
+  font-size: 16px;
+  font-family: 'Lora', serif;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(45, 80, 22, 0.2);
+  white-space: nowrap;
+}
+
+.forum-search-btn:hover {
+  background: linear-gradient(135deg, #1a3d0e 0%, #7ddc7d 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(45, 80, 22, 0.3);
+}
+
+.forum-search-input:focus + .forum-search-btn {
+  border-color: rgba(144, 238, 144, 0.6);
+}
+
+.new-post-btn {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 20px;
+  background: linear-gradient(135deg, #90ee90 0%, #2d5016 100%);
+  color: white;
+  font-size: 16px;
+  font-family: 'Lora', serif;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(144, 238, 144, 0.2);
+}
+
+.new-post-btn:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 6px 20px rgba(144, 238, 144, 0.3);
+}
+
+/* 论坛帖子容器 */
+.forum-posts-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 论坛帖子卡片样式 */
+.forum-post-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(15px);
+  border-radius: 20px;
+  padding: 25px 30px;
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(45, 80, 22, 0.1);
+}
+
+.forum-post-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.6s ease;
+}
+
+.forum-post-card:hover::before {
+  left: 100%;
+}
+
+.forum-post-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  border-color: rgba(144, 238, 144, 0.4);
+  box-shadow: 
+    0 15px 40px rgba(45, 80, 22, 0.15),
+    0 8px 25px rgba(144, 238, 144, 0.1);
+}
+
+/* 帖子头部信息 */
+.post-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.post-author-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.author-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #90ee90, #2d5016);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 10px rgba(45, 80, 22, 0.2);
+}
+
+.author-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.author-name {
+  font-weight: 600;
+  color: #2d5016;
+  font-size: 16px;
+  font-family: 'Lora', serif;
+}
+
+.post-time {
+  font-size: 12px;
+  color: rgba(45, 80, 22, 0.7);
+}
+
+.post-stats {
+  display: flex;
+  gap: 15px;
+}
+
+.stat-item {
+  background: rgba(144, 238, 144, 0.2);
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  color: #2d5016;
+  font-weight: 500;
+}
+
+/* 帖子内容区域 */
+.post-content {
+  margin: 15px 0;
+}
+
+.post-title {
+  font-family: 'Playfair Display', serif;
+  font-size: 20px;
+  font-weight: 700;
+  color: #2d5016;
+  margin-bottom: 10px;
+  line-height: 1.3;
+}
+
+.post-preview {
+  font-size: 15px;
+  color: rgba(45, 80, 22, 0.8);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 帖子底部 */
+.post-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(144, 238, 144, 0.2);
+}
+
+.post-tags {
+  display: flex;
+  gap: 8px;
+}
+
+.post-tag {
+  background: linear-gradient(135deg, #90ee90, #2d5016);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.post-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.action-btn {
+  color: #2d5016;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  color: #90ee90;
+  transform: translateX(3px);
+}
+
+/* 帖子详情页面样式 */
+.post-detail-header {
+  margin: 20px 0;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.back-to-forum-btn {
+  background: rgba(144, 238, 144, 0.2);
+  border: 2px solid rgba(144, 238, 144, 0.4);
+  border-radius: 20px;
+  padding: 12px 24px;
+  color: #2d5016;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  font-family: 'Lora', serif;
+  backdrop-filter: blur(10px);
+}
+
+.back-to-forum-btn:hover {
+  background: rgba(144, 238, 144, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(45, 80, 22, 0.15);
+}
+
+.post-detail-main {
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 20px;
+  padding: 30px;
+  margin-bottom: 30px;
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  box-shadow: 0 15px 40px rgba(45, 80, 22, 0.08);
+  position: relative;
+  overflow: hidden;
+}
+
+.post-detail-main::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: 22px;
+  z-index: -1;
+  animation: borderGlow 6s ease-in-out infinite;
+}
+
+.post-detail-header-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 25px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid rgba(144, 238, 144, 0.2);
+}
+
+.post-author-section {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.post-author-avatar {
+  padding: 8px;
+  background: linear-gradient(135deg, rgba(144, 238, 144, 0.2), rgba(240, 255, 240, 0.6));
+  border-radius: 50%;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+}
+
+.post-author-details h2.post-author-name {
+  margin: 0;
+  font-size: 22px;
+  color: #2d5016;
+  font-weight: 700;
+  font-family: 'Playfair Display', serif;
+}
+
+.post-publish-time {
+  color: #666;
+  font-size: 14px;
+  font-style: italic;
+}
+
+.post-stats-section {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.stat-badge {
+  display: flex;
+  align-items: center;
+  background: rgba(144, 238, 144, 0.15);
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: 1px solid rgba(144, 238, 144, 0.3);
+  color: #2d5016;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.stat-badge:hover {
+  background: rgba(144, 238, 144, 0.25);
+  transform: translateY(-2px);
+}
+
+.post-content-section {
+  margin-top: 20px;
+}
+
+.post-detail-title {
+  font-size: 28px;
+  color: #2d5016;
+  font-weight: 700;
+  margin-bottom: 20px;
+  font-family: 'Playfair Display', serif;
+  line-height: 1.3;
+}
+
+.post-detail-content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #444;
+  background: rgba(240, 255, 240, 0.3);
+  padding: 25px;
+  border-radius: 15px;
+  border-left: 4px solid #90ee90;
+  font-family: 'Lora', serif;
+}
+
+/* 回复区域样式 */
+.replies-section {
+  margin-top: 30px;
+}
+
+.replies-title {
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  color: #2d5016;
+  font-weight: 600;
+  margin-bottom: 25px;
+  font-family: 'Playfair Display', serif;
+}
+
+.replies-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.reply-card {
+  display: flex;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 15px;
+  padding: 20px;
+  border: 1px solid rgba(144, 238, 144, 0.2);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.reply-card::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(45deg, 
+    transparent 0%, 
+    rgba(144, 238, 144, 0.1) 50%, 
+    transparent 100%);
+  border-radius: 16px;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.reply-card:hover::before {
+  opacity: 1;
+}
+
+.reply-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 25px rgba(45, 80, 22, 0.1);
+}
+
+.reply-index {
+  background: linear-gradient(135deg, #90ee90, #2d5016);
+  color: white;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  margin-right: 20px;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(45, 80, 22, 0.2);
+}
+
+.reply-content-wrapper {
+  flex: 1;
+}
+
+.reply-author-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  gap: 8px;
+}
+
+.reply-author-name {
+  font-weight: 600;
+  color: #2d5016;
+  font-size: 16px;
+}
+
+.reply-time {
+  color: #888;
+  font-size: 13px;
+  font-style: italic;
+}
+
+.reply-content {
+  color: #444;
+  font-size: 15px;
+  line-height: 1.6;
+  font-family: 'Lora', serif;
+}
+
+.no-replies {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+  background: rgba(240, 255, 240, 0.3);
+  border-radius: 20px;
+  border: 2px dashed rgba(144, 238, 144, 0.3);
+}
+
+.no-replies p {
+  margin: 0;
+  font-size: 16px;
+  font-style: italic;
+}
+
+/* 回复输入区域样式 */
+.reply-input-section {
+  margin-top: 40px;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 20px;
+  padding: 30px;
+  border: 2px solid rgba(144, 238, 144, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.reply-input-section::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: 22px;
+  z-index: -1;
+  animation: borderGlow 5s ease-in-out infinite;
+}
+
+.reply-input-title {
+  color: #2d5016;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  font-family: 'Playfair Display', serif;
+}
+
+.reply-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.reply-textarea {
+  width: 100%;
+  border: 2px solid rgba(144, 238, 144, 0.3);
+  border-radius: 15px;
+  padding: 20px;
+  font-size: 15px;
+  font-family: 'Lora', serif;
+  line-height: 1.6;
+  background: rgba(240, 255, 240, 0.2);
+  resize: vertical;
+  min-height: 120px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.reply-textarea:focus {
+  outline: none;
+  border-color: #90ee90;
+  background: rgba(240, 255, 240, 0.4);
+  box-shadow: 0 0 0 3px rgba(144, 238, 144, 0.2);
+}
+
+.reply-textarea::placeholder {
+  color: #999;
+  font-style: italic;
+}
+
+.reply-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reply-tips {
+  color: #666;
+  font-size: 14px;
+  font-style: italic;
+}
+
+.submit-reply-btn {
+  background: linear-gradient(135deg, #90ee90, #2d5016);
+  color: white;
+  border: none;
+  border-radius: 20px;
+  padding: 12px 30px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  font-family: 'Lora', serif;
+  box-shadow: 0 6px 20px rgba(45, 80, 22, 0.2);
+}
+
+.submit-reply-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px rgba(45, 80, 22, 0.3);
+  background: linear-gradient(135deg, #7dd87d, #1a4a1a);
+}
+
+.submit-reply-btn:active {
+  transform: translateY(-1px);
+}
+
+/* 动画定义 */
+@keyframes backgroundShift {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes meteorFall {
+  0% {
+    transform: translateY(-100vh) translateX(-50px) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(100vh) translateX(50px) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+@keyframes gardenFloat {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+    opacity: 0.4;
+  }
+  50% {
+    transform: translateY(-15px) rotate(180deg);
+    opacity: 0.6;
+  }
+}
+
+@keyframes userBarFloat {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+@keyframes borderGlow {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes iconDance {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+  }
+  25% {
+    transform: scale(1.1) rotate(5deg);
+  }
+  50% {
+    transform: scale(1.2) rotate(0deg);
+  }
+  75% {
+    transform: scale(1.1) rotate(-5deg);
+  }
+}
+
+@keyframes iconPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+/* 响应式设计 */
+@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;
+  }
+  
+  .emerald-brand-section {
+    margin-right: 0;
+    justify-content: center;
+  }
+  
+  .emerald-user-stats {
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+  }
+  
+  .emerald-nav-bar {
+    margin: 20px 10px;
+    padding: 16px;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+  }
+  
+  .emerald-nav-item {
+    min-width: 70px;
+    padding: 10px 12px;
+  }
+  
+  .emerald-nav-icon {
+    font-size: 24px !important;
+  }
+  
+  .emerald-nav-label {
+    font-size: 12px;
+  }
+  
+  .emerald-content-section {
+    margin: 20px 10px;
+    padding: 20px 15px;
+  }
+  
+  .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 {
+    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;
+  }
+}
diff --git a/front/src/SportPage.js b/front/src/SportPage.js
index 2874495..6fed422 100644
--- a/front/src/SportPage.js
+++ b/front/src/SportPage.js
@@ -1,39 +1,40 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+  { 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 areaTabs = [
-  { label: "篮球", icon: <MovieIcon fontSize="small" /> },
-  { label: "足球", icon: <EmailIcon fontSize="small" /> },
-  { label: "羽毛球", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "排球", icon: <PersonIcon fontSize="small" /> },
-  { label: "电竞", icon: <PersonIcon fontSize="small" /> },
+  { label: "篮球", value: "basketball" },
+  { label: "足球", value: "football" },
+  { label: "羽毛球", value: "badminton" },
+  { label: "排球", value: "volleyball" },
+  { label: "电竞", value: "esports" }
 ];
 
 export default function SportPage() {
@@ -72,8 +73,8 @@
     ["其他类型1", "其他类型2"] // 其他
   ];
   const sportTypes = sportTypesList[activeTab] || [];
-
   useEffect(() => {
+    // 根据选中的标签获取体育列表
     const area = areaTabs[activeTab].label;
     fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
       .then(res => res.json())
@@ -87,128 +88,212 @@
     fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
       .then(res => res.json())
       .then(data => {
+        console.log('搜索返回数据:', data);
         setSportList(data);
       })
       .catch(() => setSportList([]));
   };
-
   return (
-    <div className="container">
-      {/* 顶部空白与体育界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
+    <div className="emerald-home-container">
+      {/* 流星雨背景效果 */}
+      <div className="meteor-shower">
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
       </div>
-      {/* 下方内容整体下移，留出与体育界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "体育" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="sport-table">
-          <thead>
-            <tr>
-              <th>体育类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {sportList.length > 0 ? (
-              sportList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: "#1a237e", textDecoration: "none" }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: "#1a237e", textDecoration: "none" }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <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' }} />
             ) : (
-              sportTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: "#1a237e", textDecoration: "none" }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: "#1a237e", textDecoration: "none" }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </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>
+
+        {/* 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="emerald-content-section">
+          <h1 className="emerald-page-title">⚽ 体育资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux体育频道，这里有最新最热门的体育资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索体育资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>
+
+          {/* 地区分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 体育列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>体育类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sportList.length > 0 ? (
+                  sportList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  sportTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
   const [page, setPage] = React.useState(3);
   const total = 5;
diff --git a/front/src/TVPage.js b/front/src/TVPage.js
index d75a172..2d6a3a5 100644
--- a/front/src/TVPage.js
+++ b/front/src/TVPage.js
@@ -1,38 +1,40 @@
 import React, { useState, useEffect } from "react";
 import HomeIcon from "@mui/icons-material/Home";
 import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+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 "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 const navItems = [
-  { label: "首页", icon: <HomeIcon />, path: "/home" },
-  { label: "电影", icon: <MovieIcon />, path: "/movie" },
-  { label: "剧集", icon: <EmailIcon />, path: "/tv" },
-  { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
-  { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
-  { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
-  { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
-  { label: "资料", icon: <PersonIcon />, path: "/info" },
-  { label: "论坛", icon: <ForumIcon />, path: "/forum" },
-  { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
-  { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+  { 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 areaTabs = [
-  { label: "国产电视剧", icon: <MovieIcon fontSize="small" /> },
-  { label: "港剧", icon: <EmailIcon fontSize="small" /> },
-  { label: "欧美剧", icon: <PersonIcon fontSize="small" /> },
-  { label: "日韩剧", icon: <EmojiPeopleIcon fontSize="small" /> },
+  { label: "华语剧集", value: "chinese" },
+  { label: "港台剧集", value: "hk_tw" },
+  { label: "欧美剧集", value: "western" },
+  { label: "日韩剧集", value: "jp_kr" },
+  { label: "其他剧集", value: "others" }
 ];
 
 export default function TVPage() {
@@ -90,124 +92,203 @@
     ["其他类型1", "其他类型2"] // 其他
   ];
   const tvTypes = tvTypesList[activeTab] || [];
-
   return (
-    <div className="container">
-      {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
-      <div style={{ height: 80 }} />
-      <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
-        <div style={{ cursor: 'pointer', marginRight: 16 }} 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: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
-        </div>
+    <div className="emerald-home-container">
+      {/* 流星雨背景效果 */}
+      <div className="meteor-shower">
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
+        <div className="meteor">✨</div>
+        <div className="meteor">🌟</div>
+        <div className="meteor">💫</div>
+        <div className="meteor">⭐</div>
       </div>
-      {/* 下方内容整体下移，留出与音乐界面一致的间距 */}
-      <div style={{ height: 32 }} />
-      <nav className="nav-bar card">
-        {navItems.map((item) => (
-          <div
-            key={item.label}
-            className={item.label === "剧集" ? "nav-item active" : "nav-item"}
-            onClick={() => navigate(item.path)}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </div>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="movie-table">
-          <thead>
-            <tr>
-              <th>剧集类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {tvList.length > 0 ? (
-              tvList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <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' }} />
             ) : (
-              tvTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </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>        {/* 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="emerald-content-section">
+          <h1 className="emerald-page-title">📺 剧集资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux剧集频道，这里有最新最热门的电视剧、综艺、纪录片资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索剧集资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>          {/* 地区分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 剧集列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>剧集类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {tvList.length > 0 ? (
+                  tvList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  tvTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
   const [page, setPage] = React.useState(3);
   const total = 5;
diff --git a/front/src/TvPage.js b/front/src/TvPage.js
new file mode 100644
index 0000000..5bac9f3
--- /dev/null
+++ b/front/src/TvPage.js
@@ -0,0 +1,284 @@
+import React, { useState, useEffect } from "react";
+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 { useNavigate } from "react-router-dom";
+import "./SharedStyles.css";
+import { API_BASE_URL } from "./config";
+
+// 导航栏
+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 areaTabs = [
+    { label: "华语剧集", value: "chinese" },
+    { label: "港台剧集", value: "hk_tw" },
+    { label: "欧美剧集", value: "western" },
+    { label: "日韩剧集", value: "jp_kr" },
+    { label: "其他剧集", value: "others" }
+];
+
+export default function TvPage() {
+    const navigate = useNavigate();
+    const [searchText, setSearchText] = React.useState('');
+    const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
+    const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
+    const [activeTab, setActiveTab] = React.useState(0);
+    const [tvList, setTvList] = React.useState([]);
+
+    useEffect(() => {
+        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+        const userId = match ? match[2] : null;
+        if (!userId) return;
+        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));
+    }, []);
+
+    // 每个tab对应的剧集类型
+    const tvTypesList = [
+        ["华语电视剧", "华语综艺", "华语纪录片", "华语其他"], // 华语
+        ["港台电视剧", "港台综艺", "港台其他"], // 港台
+        ["欧美电视剧", "欧美综艺", "欧美纪录片", "欧美其他"], // 欧美
+        ["日韩电视剧", "日韩综艺", "日韩其他"], // 日韩
+        ["其他类型1", "其他类型2"] // 其他
+    ];
+    const tvTypes = tvTypesList[activeTab] || [];
+
+    React.useEffect(() => {
+        const area = areaTabs[activeTab].label;
+        fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
+            .then(res => res.json())
+            .then(data => {
+                setTvList(data);
+            })
+            .catch(() => setTvList([]));
+    }, [activeTab]);
+
+    // 搜索按钮处理
+    const handleSearch = () => {
+        const area = areaTabs[activeTab].label;
+        fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
+            .then(res => res.json())
+            .then(data => {
+                setTvList(data);
+            })
+            .catch(() => setTvList([]));
+    };
+
+    return (
+        <div className="emerald-home-container">
+            {/* 流星雨背景效果 */}
+            <div className="meteor-shower">
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+            </div>
+
+            {/* 浮动园林装饰元素 */}
+            <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')}>
+                        <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>
+
+                {/* 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="emerald-content-section">
+                    <h1 className="emerald-page-title">📺 剧集资源</h1>
+                    <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+                        欢迎来到NeuraFlux剧集频道，这里有最新最热门的电视剧、综艺、纪录片资源
+                    </p>
+                    
+                    {/* 搜索栏 */}
+                    <div style={{ 
+                        display: 'flex', 
+                        justifyContent: 'center', 
+                        marginBottom: '30px',
+                        gap: '15px'
+                    }}>
+                        <input
+                            type="text"
+                            placeholder="搜索剧集资源..."
+                            value={searchText}
+                            onChange={(e) => setSearchText(e.target.value)}
+                            style={{
+                                padding: '12px 20px',
+                                borderRadius: '20px',
+                                border: '2px solid rgba(144, 238, 144, 0.3)',
+                                background: 'rgba(240, 255, 240, 0.5)',
+                                fontSize: '16px',
+                                width: '300px',
+                                fontFamily: 'Lora, serif'
+                            }}
+                        />
+                        <button
+                            onClick={handleSearch}
+                            style={{
+                                padding: '12px 24px',
+                                borderRadius: '20px',
+                                border: 'none',
+                                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                                color: 'white',
+                                fontSize: '16px',
+                                cursor: 'pointer',
+                                fontFamily: 'Lora, serif'
+                            }}
+                        >
+                            搜索
+                        </button>
+                    </div>
+
+                    {/* 地区分类标签 */}
+                    <div style={{ 
+                        display: 'flex', 
+                        justifyContent: 'center', 
+                        marginBottom: '30px',
+                        gap: '15px',
+                        flexWrap: 'wrap'
+                    }}>
+                        {areaTabs.map((tab, index) => (
+                            <button
+                                key={tab.value}
+                                onClick={() => setActiveTab(index)}
+                                style={{
+                                    padding: '10px 20px',
+                                    borderRadius: '15px',
+                                    border: '2px solid rgba(144, 238, 144, 0.3)',
+                                    background: activeTab === index 
+                                        ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                                        : 'rgba(240, 255, 240, 0.3)',
+                                    color: activeTab === index ? 'white' : '#2d5016',
+                                    fontSize: '14px',
+                                    cursor: 'pointer',
+                                    fontFamily: 'Lora, serif',
+                                    transition: 'all 0.3s ease'
+                                }}
+                            >
+                                {tab.label}
+                            </button>
+                        ))}
+                    </div>
+
+                    {/* 剧集列表 */}
+                    <div className="emerald-table-section">
+                        <table className="emerald-table">
+                            <thead>
+                                <tr>
+                                    <th>分类标签</th>
+                                    <th>剧集标题</th>
+                                    <th>热门指数</th>
+                                    <th>发布者</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {tvList.length > 0 ? (
+                                    tvList.map((tv, index) => (
+                                        <tr key={tv.id || index}>
+                                            <td>{tv.tags || areaTabs[activeTab].label}</td>
+                                            <td>
+                                                <a href={`/torrent/${tv.id || index}`}>
+                                                    {tv.title || `剧集资源 ${index + 1}`}
+                                                </a>
+                                            </td>
+                                            <td>{tv.popularity || Math.floor(Math.random() * 100) + 1}</td>
+                                            <td>{tv.user?.username || '匿名用户'}</td>
+                                        </tr>
+                                    ))
+                                ) : (
+                                    <tr>
+                                        <td colspan="4" style={{ 
+                                            textAlign: 'center', 
+                                            color: '#666', 
+                                            fontStyle: 'italic',
+                                            padding: '40px 20px'
+                                        }}>
+                                            暂无{areaTabs[activeTab].label}资源，请稍后再试
+                                        </td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}