修改前端页面样式,工作进度:80%
Change-Id: I3c15ec6bc7eb033354f585a28cab12cb74aca79c
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>
+ );
+}