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